カテゴリー : CSS

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;を指定しました。