スライドショー

【CakePHP入門】スタイルシート(CSS)を読み込む方法

こんにちは!フリーエンジニアのヤマシタです。

CakePHPではCSSファイルを読みこんだり、CSSを編集してWebページ全体のレイアウトをカスタマイズすることが可能です。

この記事では、

・スタイルシート(CSS)とは
・CSSファイルを読み込む方法
・複数のCSSファイルを読み込む
・CSSで全体のレイアウトを変更する方法

などのCSSを読み込む方法やCSSで全体のレイアウトを変更するなどについて解説していきます。

CSSを読み込んだりレイアウトを変更する方法は、手順さえ覚えればそれほど難しくありませんので、ぜひ覚えておきましょう。

スタイルシート(CSS)とは

CSS Cascading Style Sheet (カスケーディング・スタイルシート)とは、Webページのデザインをカスタマイズするときによく使用されます。

HTMLだけでは指定できないデザインでもCSSを使用することにより、細かく指定することができます。

そのため、Webページを制作するためには、HTMLとCSSはセットで使用するのが基本となっています。

CakePHPでは指定したCSSを読み込んだり、PHPプログラムの中でCSSを記述することが可能です。

なお、Webページを表示するときに使用するデフォルトのCSSは「Cake/webroot/css」に格納されています。

CSSファイルを読み込んでみよう!

ここではCakePHPでCSSファイルを読み込むために、CSSファイルの作成から、HTMLHelperを使用してCSSファイルを読み込む基本的な方法について、解説していきます!

CSSファイルを読み込むには

CSSファイルを読み込むにはHTMLHelperを使用して、以下のように記述します。

$this->Html->css(‘CSSファイル名’);

引数で指定するCSSファイルは、webroot/cssの直下であることが前提です。

また引数を"ディレクトリ名/CSSファイル名"とすることで、深い階層でCSSを読み込むことも可能です。

CSSファイルを読み込む方法

ここでは、実際にCakePHPからCSSファイルを読みこんでみましょう。

まずはwebroot/cssにCSSファイルを作成します。

sample1.css

body {
    font-size:30px;
    color:#800080;
}

h1 {
    font-size:30px;
    font-style:italic;
    background:#000000;
    color:white;


#header {
    font-size:9px;
    color:#666666;
    text-align:center;
}
#footer {
    font-size:12px;
    color:#777777;
    text-align:right;
    border:1px solid #999999;
    border-width:1px 0px 0px 0px;
    margin: 50px 0px 0px 0px;
}

CSSファイルには背景やフォントサイズ、ヘッダーやフッターなどさまざまなレイアウトの指定が可能です。

CSSファイルの詳しい作り方については、以下のページで解説されています。
http://orgel.boo.jp/technology/hplecture/lec_css.html

次にsrc/Controllerにphpファイルを作成します。

src/Controller/SampleController.php

<?php


namespace App\Controller;

use App\Controller\AppController;

class SampleController extends AppController
{

  public function index() {

  }
}

次にsrc/TemplateにViewファイルを作成します。

src/Template/Sample/index.ctp

<?php
echo $this->Html->css('sample1');
?>
<h1>CSSテスト</h2>

このプログラムを実行すると、CSSで指定したフォントやサイズでブラウザにタイトルが出力されます。
css_image1

ページのソースを確認すると、以下のようにCSSのリンクが作成されていることがわかりますね!

<link rel="stylesheet" href="/css/sample1.css"/><br><h1>CSSテスト</h2>

複数のCSSファイルを読み込む

複数のCSSファイルを同時に読み込む場合は、ファイル名を以下のように配列で指定することで読み込むことが可能です。

echo $this->Html->css(['sample1', 'sample2', 'sample3']);

実行すると、以下のように複数のCSSのリンクが作成されていることがわかりますね!

<link rel="stylesheet" href="/css/sample1.css"/>
<link rel="stylesheet" href="/css/sample2.css"/>
<link rel="stylesheet" href="/css/sample3.css"/>

レイアウト全体を変更する方法

先ほど紹介したCSSを読み込む方法は、Viewによる特定のページのみにCSSが反映される方法となります。

Webページ全体でレイアウトを統一したい場合は、「src/Template/Layout」にあるctpファイルをカスタマイズする方法があります。

CSSを統一するにはctpファイルに以下のようにHtmlHelperを使用して、CSSファイルを記述することでWebページ全体のデザインを変更することが可能です。

echo $this->Html->css(‘CSSファイル名’);

レイアウト全体を変更する方法の詳細については、以下の記事で詳しく解説していますので、ぜひ参考にしてくださいね!

まとめ

ここでは、CakePHPでCSSファイルを読み込む方法や、複数CSSファイルを読み込む方法、CSSファイルを指定してレイアウト全体を変更する方法などについて、解説しました。

WebページのデザインをカスタマイズするにはCSSファイルは必須となりますので、読み込む方法についてもしっかりと覚えておきましょう!

もしCSSファイルを読み込む方法を忘れてしまったら、この記事を思い出してくださいね!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

ヤマシタ

システムエンジニアとして10年勤務→フリーランスへ。現在は侍ブログ編集部としてこれまでに200記事以上の記事を執筆。
大規模システム開発からWebアプリ開発まで経験あり。最近ではPythonの機械学習に挑戦中。