baserCMS公式ガイド「ver4/関数リファレンス/BcBaser css」の版間の差分
提供: baserCMS公式ガイド
Katokaisya (トーク | 投稿記録) |
Webbingstudio (トーク | 投稿記録) (CakePHPの仕様変更に伴い、関数の説明を大幅に変更) |
||
| 行6: | 行6: | ||
## 使い方 | ## 使い方 | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
| − | <?php $this->BcBaser->css( $path , [$ | + | <?php $this->BcBaser->css( $path , [$options] ); ?> |
</syntaxhighlight> | </syntaxhighlight> | ||
## パラメータ | ## パラメータ | ||
| − | + | （array）$path | |
| − | : | + | : CSSファイルまでのパス。配列として指定し、配列の順番の通りに出力する。 |
| − | + | 先頭にスラッシュをつけた場合は、baserCMSのルートからのパスとなる。 | |
| − | + | スラッシュをつけず相対パスとした場合は、 /themes/{テーマ名}/css からのパスとなる。拡張子は不要。 | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | （array）$options | ||
| + | : 初期値：array( 'rel' => 'stylesheet', 'inline' => true ); | ||
| + | `rel` : rel属性。「import」とすると@import形式で出力する。 | ||
| + | `inline` : 「true」を指定すると、関数を指定した箇所で一行ずつ改行して出力し、「false」を指定すると、管理画面用CSSの出力が終了してから改行を詰めて出力する。 | ||
## 戻り値 | ## 戻り値 | ||
| 行32: | 行27: | ||
####コード | ####コード | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
| − | <?php $this->BcBaser->css( | + | <?php $this->BcBaser->css(array( |
| + | 'style', | ||
| + | 'font-awesome.min.css', | ||
| + | )) ?> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
####出力 | ####出力 | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
| − | + | <link rel="stylesheet" type="text/css" href="/theme/_mybasertheme_/css/style.css"/> | |
| + | <link rel="stylesheet" type="text/css" href="/theme/_mybasertheme_/css/font-awesome.min.css"/> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| 行43: | 行42: | ||
####コード | ####コード | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
| − | + | <?php $this->BcBaser->css(array( | |
| + | 'style', | ||
| + | 'font-awesome.min.css', | ||
| + | ),array( | ||
| + | 'rel' => 'import', | ||
| + | 'inline' => false | ||
| + | )) ?> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
####出力 | ####出力 | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
| − | + | （管理画面用CSSの出力後） | |
| + | <style type="text/css">@import url(/theme/_mybasertheme_/css/style.css);</style><style type="text/css">@import url(/theme/_mybasertheme_/css/font-awesome.min.css);</style> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
## 注 | ## 注 | ||
| + | |||
| + | @importによる読み込みは、link要素よりも遅くなることが知られています（関連資料を参照）。このため、何らかの技術的な目的がない限り、relの値を指定する必要はありません。 | ||
## 変更履歴 | ## 変更履歴 | ||
| + | |||
| + | ### 2018-06-15 | ||
| + | |||
| + | - CakePHPの仕様変更に伴い、関数の説明を大幅に変更 | ||
## ソースファイル | ## ソースファイル | ||
| + | |||
| + | [https://github.com/baserproject/basercms/blob/master/lib/Baser/View/Helper/BcBaserHelper.php](https://github.com/baserproject/basercms/blob/master/lib/Baser/View/Helper/BcBaserHelper.php) | ||
## 関連資料 | ## 関連資料 | ||
| + | |||
| + | [【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる ｜ Developers.IO](https://dev.classmethod.jp/ria/html5/css-import-no-parallel-load-sass/) | ||
##類似の関数 | ##類似の関数 | ||
| + | [BcBaser->js](http://wiki.basercms.net/ver4/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/js) | ||
[[Category:関数リファレンスver4]] | [[Category:関数リファレンスver4]] | ||
2018年6月15日 (金) 00:52時点における版
[このコンテンツは内容調整中です]
目次
説明
CSS タグを出力する。
使い方
<?php $this->BcBaser->css( $path , [$options] ); ?>
パラメータ
- （array）$path
- CSSファイルまでのパス。配列として指定し、配列の順番の通りに出力する。
先頭にスラッシュをつけた場合は、baserCMSのルートからのパスとなる。
スラッシュをつけず相対パスとした場合は、 /themes/{テーマ名}/css からのパスとなる。拡張子は不要。 - （array）$options
- 初期値：array( 'rel' => 'stylesheet', 'inline' => true );
rel: rel属性。「import」とすると@import形式で出力する。
inline: 「true」を指定すると、関数を指定した箇所で一行ずつ改行して出力し、「false」を指定すると、管理画面用CSSの出力が終了してから改行を詰めて出力する。
戻り値
なし
用例
基本
コード
<?php $this->BcBaser->css(array( 'style', 'font-awesome.min.css', )) ?>
出力
<link rel="stylesheet" type="text/css" href="/theme/_mybasertheme_/css/style.css"/> <link rel="stylesheet" type="text/css" href="/theme/_mybasertheme_/css/font-awesome.min.css"/>
応用
コード
<?php $this->BcBaser->css(array( 'style', 'font-awesome.min.css', ),array( 'rel' => 'import', 'inline' => false )) ?>
出力
（管理画面用CSSの出力後） <style type="text/css">@import url(/theme/<em>mybasertheme</em>/css/style.css);</style><style type="text/css">@import url(/theme/<em>mybasertheme</em>/css/font-awesome.min.css);</style>
注
@importによる読み込みは、link要素よりも遅くなることが知られています（関連資料を参照）。このため、何らかの技術的な目的がない限り、relの値を指定する必要はありません。
変更履歴
2018-06-15
- CakePHPの仕様変更に伴い、関数の説明を大幅に変更
ソースファイル
https://github.com/baserproject/basercms/blob/master/lib/Baser/View/Helper/BcBaserHelper.php
関連資料
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる ｜ Developers.IO
