inglow Blog

Tech Blog
エンジニアブログ

CakePHP(3.x)におけるHtmlHelperの使い方

2020.05.21

このエントリーをはてなブックマークに追加

こんにちは!今回は、HTMLに関連するオプションをより簡単に作成するツールとして、HtmlHelperを紹介します。

HtmlHelperの多くのメソッドは $attributes という引数を持っています。これを使うことでいかなる追加属性もタグに付け加えることができます。今回はこのパラメータを使用する例をいくつか紹介します!

文字セットのタグの作成

echo $this->Html->charset();

// 出力結果
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

CSSファイルへのリンクを作成

echo $this->Html->css(‘forms’);

// 出力結果
<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変換後の値
htmltext/html
rssapplication/rss+xml
atomapplication/atom+xml
iconimage/x-icon

Html->meta(‘favicon.ico’, ‘/favicon.ico’,[‘type’ => ‘icon’]);?>

// 出力結果
<link
    href="/subdir/favicon.ico"
    type="image/x-icon"
    rel="icon"
/>

また、このメソッドを使用して、meta keywords と description を追加することもできます。

Html->meta(‘keywords’,’ここに meta キーワードを書き込む’);?>

// 出力結果
<meta name="keywords" content="ここに meta キーワードを書き込む" />

Html->meta(‘description’,’ここに何か説明を書き込む’);?>

// 出力結果
<meta name="description" content="ここに何か説明を書き込む" />

DOCTYPEの作成

echo $this->Html->docType();

// 出力結果: <!DOCTYPE html>

画像リンクの作成

echo $this->Html->image(“recipes/6.jpg”, [
“alt” => “Brownies”,
‘url’ => [‘controller’ => ‘Recipes’,
‘action’ => ‘view’, 6]]);

// 出力結果
<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’]
);

// 実行結果
<a href="/pages/home" class="button" target="_blank">Enter</a>

おわりに

今回はHtmlHelperについてよく使うものを簡単に紹介させていただきましたが、次回はFormを用いたHelperの使い方についても簡単に紹介しようと思います!

Related Blog
関連記事

2020.05.23
【PHP入門】演算子の使い方
2020.05.14
レスポンシブサイトを作る(実例)
2020.05.09
初学者のためのHTML/CSS
2020.05.08
bakeしよう!その2bake
2020.05.07
レスポンシブサイトを作る