CakePHP(3.x)におけるHtmlHelperの使い方
カテゴリ：インターン生ブログ
こんにちは！今回は、HTMLに関連するオプションをより簡単に作成するツールとして、HtmlHelperを紹介します。
HtmlHelperの多くのメソッドは $attributes という引数を持っています。これを使うことでいかなる追加属性もタグに付け加えることができます。今回はこのパラメータを使用する例をいくつか紹介します！
文字セットのタグの作成
echo $this->Html->charset();
|
1 2 |
// 出力結果 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> |
CSSファイルへのリンクを作成
echo $this->Html->css(‘forms’);
|
1 2 |
// 出力結果 <link rel="stylesheet" href="/css/forms.css" /> |
また、複数のファイルを含むように配列で指定することができます。
echo $this->Html->css([‘forms’, ‘tables’, ‘menu’]);
また、プラグイン記法を用いて読み込まれたプラグインのCSSファイルをインクルードすることができます。
echo $this->Html->css(‘DebugKit.toolbar.css’);
プログラムによるCSSの作成
メソッドに渡した配列のキーとその値からCSS によるスタイルを作成できます。
echo $this->Html->style([
‘background’ => ‘#633’,
‘border-bottom’ => ‘1px solid #000’,
‘padding’ => ’10px’
]);
metaタグの作成
type属性を設定する際に、返還後の値との対応はこのようになります。
| type | 変換後の値 |
| html | text/html |
| rss | application/rss+xml |
| atom | application/atom+xml |
| icon | image/x-icon |
Html->meta(‘favicon.ico’, ‘/favicon.ico’,[‘type’ => ‘icon’]);?>
|
1 2 3 4 5 6 7 |
// 出力結果 <link href="/subdir/favicon.ico" type="image/x-icon" rel="icon" /> |
また、このメソッドを使用して、meta keywords と description を追加することもできます。
Html->meta(‘keywords’,’ここに meta キーワードを書き込む’);?>
|
1 2 |
// 出力結果 <meta name="keywords" content="ここに meta キーワードを書き込む" /> |
Html->meta(‘description’,’ここに何か説明を書き込む’);?>
|
1 2 |
// 出力結果 <meta name="description" content="ここに何か説明を書き込む" /> |
DOCTYPEの作成
echo $this->Html->docType();
|
1 |
// 出力結果: <!DOCTYPE html> |
画像リンクの作成
echo $this->Html->image(“recipes/6.jpg”, [
“alt” => “Brownies”,
‘url’ => [‘controller’ => ‘Recipes’,
‘action’ => ‘view’, 6]]);
|
1 2 3 4 |
// 出力結果 <a href="/recipes/view/6"> <img src="/img/recipes/6.jpg" alt="Brownies" /> </a> |
リンクの作成
echo $this->Html->link(
‘Enter’,
‘/pages/home’,
[‘class’ => ‘button’, ‘target’ => ‘_blank’]
);
|
1 2 |
// 実行結果 <a href="/pages/home" class="button" target="_blank">Enter</a> |
おわりに
今回はHtmlHelperについてよく使うものを簡単に紹介させていただきましたが、次回はFormを用いたHelperの使い方についても簡単に紹介しようと思います！
