タグ : CSS

CakePHPでCSSのlink タグをヘッダ内に表示する

/app/webroot/css ディレクトリ以下に置いたCSSファイルを表示するには、

viewファイルに以下のように記載します。


echo $this->Html->css('forms');

すると以下の様に表示されます。

ページごとに使用したいCSSを変えたい場合、

個別のviewファイルにCSSを書きます。

このときに、headタグ内にCSSに追加する方法です。

HtmlHelperのCSSメソッドは、以下のような定義になっています。


HtmlHelper::css(mixed $path, string $rel = null, array $options = array())

この$optionsパラメーターのキー‘inline’を「false」に設定すると

CSSのlinkタグはHTML内のheadタグ内にあるcssブロックに追加されます。

以下のようにします。


echo $this->Html->css('forms', null, array('inline'=>false));

CakePHPで、CSSとJavascriptのタグを表示する方法

CakePHPで、CSSファイル、Javascriptファイルのタグを表示する方法です。

Javascriptのタグを忘れやすいのでメモ。

まず、app/webroot/css/以下にCSSファイルを、

app/webroot/js/以下にJavascriptファイルを置きます。

Viewファイル(ここではapp/View/Layouts/default.ctp)に

以下のように記載します。


echo $this->Html->css('import');
echo $this->Html->script('jquery');

すると以下のようにタグが表示されます。


また、複数のCSS、Javascriptを同時に指定したい場合は、

引数に配列を使用します。


echo $this->Html->css(array('import', 'jquery.bxslider'));
echo $this->Html->script(array('jquery', 'jquery.bxslider.min'));

これで以下のように複数のタグが表示されます。



CSSでグラデーションを設定する方法

CSSでグラデーション効果を出したいということがあり調べたのでメモ。

グラデーションサンプル

CSSを以下のように設定します。

.gradient {
  background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* FireFox */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* webkit */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE5.5+ */
}

IEにも対応ということなのですが、IE10では表示できませんでした。
ブラウザモードをIE9、IE8にしたところ表示されましたので、IE10のみ未対応ということのようです。

以下のサイトを参考にさせて頂きました。
KOJIKA 17IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット

div要素の中で下揃えしたい

div要素の中で、ボタンを配置する際に、下揃えしたいということがあり調べたのでメモ。

まず親となるdivに、heightとposition: relative;を指定します。

下揃えしたい部品(今回の場合はボタン)にposition: absolute;およびbottom:0;を指定します。

bottom:0;は、数値を変えれば下からの位置を調整できます。

以下のサイトを参考にさせて頂きました。
CSSブログ – div内で下揃え

ヘッダーのスクロールを固定したい

ヘッダー部分のスクロールを固定して、常にヘッダーが表示されているようにしたいという案件があったのでメモ。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="sample.css" media="all" type="text/css" />
</head>

<body>

<div id="header">
  ヘッダーです
</div>

<div id="contents">
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
</div>

<div id="footer">
  フッターです
</div>

</body>
</html>

CSS

#header{
  position: fixed !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #4E9ABE;
  color: #FFF;
  z-index: 11;
}

#contents{
  margin-top: 110px;
  width: 100%;
  height: 1000px;
}
* html div#contents {
  height: 100%;
  overflow: auto;
}

#footer{
  width:100%;
  height: 50px;
  background-color: #4E9ABE;
  color: #FFF;
}

ヘッダにposition: fixed !important;を指定します。
スクロールした際に、コンテンツ部分が上に来てしまうため、ヘッダーにz-index: 11;を指定しました。