「ver4/関数リファレンス/BcBaser css」の版間の差分
提供: baserCMS公式ガイド
Katokaisya (トーク | 投稿記録) |
|||
(4人の利用者による、間の15版が非表示) | |||
行1: | 行1: | ||
− | |||
− | |||
## 説明 | ## 説明 | ||
CSS タグを出力する。 | CSS タグを出力する。 | ||
行6: | 行4: | ||
## 使い方 | ## 使い方 | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
− | <?php $this->BcBaser->css( | + | <?php $this->BcBaser->css( $path , [$options] ); ?> |
</syntaxhighlight> | </syntaxhighlight> | ||
## パラメータ | ## パラメータ | ||
− | + | (mixed)$path | |
− | : | + | : CSSファイルのパス。(cssフォルダからの相対パス)拡張子は省略可。<br> |
− | + | キーを含まない値のみの配列として指定し、配列の順番の通りにCSSが読み込まれる。 | |
− | + | : 先頭にスラッシュをつけた場合は、baserCMSのルートからのパスとなる。 | |
− | + | : スラッシュをつけず相対パスとした場合は、 '''/theme/{テーマ名}/css に該当ファイルが存在している場合'''、そのファイルへのパスとなる。 | |
− | + | ||
− | + | ||
− | : | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | (mixed)$options | ||
+ | : `rel` : rel属性。「import」とすると@import形式で出力する。(初期値 : 'stylesheet') | ||
+ | : `inline` : 「true」を指定すると、関数を指定した箇所で一行ずつ改行して出力し、「false」を指定すると、管理画面用CSSの出力が終了してから改行を詰めて出力する。(初期値 : true) | ||
## 戻り値 | ## 戻り値 | ||
行30: | 行23: | ||
## 用例 | ## 用例 | ||
### 基本 | ### 基本 | ||
+ | /theme/{テーマ名}/css/内にある、'style.css'、'font-awesome.min.css'を読み込む。 | ||
####コード | ####コード | ||
<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/mytheme/css/style.css"/> | |
+ | <link rel="stylesheet" type="text/css" href="/theme/mytheme/css/font-awesome.min.css"/> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
### 応用 | ### 応用 | ||
+ | 管理画面用cssを出力後、@import形式で'style.css'と'font-awesome.min.css'を読み込む。 | ||
####コード | ####コード | ||
<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/mytheme/css/style.css);</style><style type="text/css">@import url(/theme/mytheme/css/font-awesome.min.css);</style> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
## 注 | ## 注 | ||
+ | |||
+ | @importによる読み込みは、link要素よりも遅くなることが知られている(関連資料を参照)。このため、何らかの技術的な目的がない限り、relの値を指定する必要はない。 | ||
## 変更履歴 | ## 変更履歴 | ||
− | # | + | - [https://github.com/baserproject/basercms/blob/98c5d24daca66c38dfbd2b67c0ac85a3b5902b26/lib/Baser/View/Helper/BcBaserHelper.php#L906 4.4.0] |
## 関連資料 | ## 関連資料 | ||
− | + | [【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | Developers.IO](https://dev.classmethod.jp/ria/html5/css-import-no-parallel-load-sass/) | |
+ | ##類似の関数 | ||
− | [ | + | - [js](/ver4/関数リファレンス/js) - javascriptの読み込みタグを出力する |
2020年10月20日 (火) 14:58時点における最新版
目次
説明
CSS タグを出力する。
使い方
<?php $this->BcBaser->css( $path , [$options] ); ?>
パラメータ
- (mixed)$path
- CSSファイルのパス。(cssフォルダからの相対パス)拡張子は省略可。
キーを含まない値のみの配列として指定し、配列の順番の通りにCSSが読み込まれる。 - 先頭にスラッシュをつけた場合は、baserCMSのルートからのパスとなる。
- スラッシュをつけず相対パスとした場合は、 /theme/{テーマ名}/css に該当ファイルが存在している場合、そのファイルへのパスとなる。
- (mixed)$options
rel
: rel属性。「import」とすると@import形式で出力する。(初期値 : 'stylesheet')inline
: 「true」を指定すると、関数を指定した箇所で一行ずつ改行して出力し、「false」を指定すると、管理画面用CSSの出力が終了してから改行を詰めて出力する。(初期値 : true)
戻り値
なし
用例
基本
/theme/{テーマ名}/css/内にある、'style.css'、'font-awesome.min.css'を読み込む。
コード
<?php $this->BcBaser->css(array( 'style', 'font-awesome.min.css', )) ?>
出力
<link rel="stylesheet" type="text/css" href="/theme/mytheme/css/style.css"/> <link rel="stylesheet" type="text/css" href="/theme/mytheme/css/font-awesome.min.css"/>
応用
管理画面用cssを出力後、@import形式で'style.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/mytheme/css/style.css);</style><style type="text/css">@import url(/theme/mytheme/css/font-awesome.min.css);</style>
注
@importによる読み込みは、link要素よりも遅くなることが知られている(関連資料を参照)。このため、何らかの技術的な目的がない限り、relの値を指定する必要はない。
変更履歴
関連資料
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | Developers.IO
類似の関数
- js - javascriptの読み込みタグを出力する