CSS 実用サンプル

カスタム検索

CSS 実用サンプル

スタイルシートCSS を用いた実用的なサンプルや、CSS テクニックをご紹介します。

CSS 実用サンプル

（難易度）

記録付きフォトギャラリー★★☆☆☆
シンプルなスライド式フォトギャラリー★★★☆☆
スクロール式フォトギャラリー★★★★☆
dl 要素を使ってテーブル（表）スタイルにする。★☆☆☆☆
フォーム部品 fieldset、legend のようなラベル付き枠をつくる。★☆☆☆☆

シンプルなスライド式フォトギャラリー

たくさんの CSS のサンプルを掲載している海外（UK）サイト、「 CSSplay 」のフォトギャラリーを参考にしたシンプルなスライド式ギャラリーの例をご紹介します。

シンプルスライド式の表示例

画像をそのまま並べているので、初期表示は少し遅れます。ソースは、「表示」→「ソース」で参照してください。

CSS デモサイト CSSplay

このサイトは、ナビゲーションボタン、フォトギャラリー、吹き出しなどたくさんのCSS テクニックを駆使したサンプルを掲載しています。JavaScript を使用したような動きのあるものなど、「CSS でこんなことまでできるのか！」と驚きです。高度な CSS テクニックだけでなくデザインセンスも参考になります。英語のページですが、デモのタイトルで内容が分かりますので一度ご覧になってください。ほとんどのものは許可なしで利用できますが、一部は連絡が必要なものもあります。

HTML

<div id="gallery">
<ul>
<li><a href="#nogo"><img src="./img/eyes0345.jpg" alt="オオムラサキ"></a></li>
<li><a href="#nogo"><img src="./img/eyes0270.jpg" alt="梅"></a></li>
             以下、画像を並べます。（省略）
</ul>
</div>

上記のように画像をリストタグで並べアンカータグの、href="#nogo"という行き先のない URI を指定しています。 href="#"に指定すると、ブラウザによってはページのトップに戻る動作をしますが、しないのもありそこに着目されたようです。文法的にはどうなのかな？と思いますが、W3C からもリンクされているようですから問題ないのでしょう。CSS を高度に使いこなすには、ブラウザのレンダリングの知識も必要なのかもしれません。

あとは、CSS で元の画像をそのままサイズダウンした画像を並べてスライドしながら元の画像を表示できるように擬似クラスのリンク設定をしています。

このサンプルはシンプルなので、主要なブラウザ IE6～8、Firefox、Opera 、Safari、Google Chrome で問題ないようです。動作は、JavaScript の onMouseOver イベントハンドラーと同じなので JavaScript でも同様にできます。下記は同じものを JavaScript にした例です。CSS も簡単なものです。

JavaScript に書き換えた HTML

<div id="gallery">
<div id="thumbs">
<img src="サムネイル-1" onMouseOver="document.BigPhoto.src='元の画像-1'">
<img src="サムネイル-2" onMouseOver="document.BigPhoto.src='元の画像-2'">
             以下、画像を並べます。（省略）
</div>
<p><img class="waku" src="表紙画像" name="BigPhoto"></p>

-->>JavaScript の作成例を表示

Top↑

スクロール式フォトギャラリー

前記の例と同じように CSSplay サイトのフォトギャラリーを参考にしたもので、多くの画像を配置でき、タイトル、コメントを付けられるスクロール式の例をご紹介します。

スクロール式の表示例

サムネイル画像なので、画像が多くても初期表示は速いです。ソースは、「表示」→「ソース」で参照してください。

HTML

<div id="holder">
<div id="scrollbox">
<div id="thumbs">
<a class="gallery slide1" href="#nogo"><span><img src="元の画像">
　　　　　　                             <br>タイトル<br>コメント</span></a>
　　　　　　
　　　　　　以下、同じように画像を並べます。（省略）
</div>
</div>
</div>

前記、フォトギャラリーと基本的に同じですが、縮小サムネイル画像を準備してスクロールボックスに背景画像として並べてスライドしながら元の画像を表示するように、同一タグに複数のクラスを記述し、インライン要素 <span>タグでサムネイル画像と元の画像をそれぞれ分けてスタイルを設定して巧みに擬似クラスでリンクしています。

このサンプルは、ブラウザにより異なる動作をしますから使用する場合はご注意ください。

JavaScript に書き換えた例

CSS で作成した例の場合は、ブラウザの挙動が一致していない特殊なテクニックで行なっているため難しいところもありますが、 JavaScript ならば私のような初心者でも作成できるもので CSS も複雑にはなりません。JavaScript を使用できる環境ならば主要ブラウザで正常に表示します。

画像のタイトルやコメントの表示は、innerHTML プロパティで HTML タグ内から取得してdocument.write（"コメント"）で表示しています。

-->>JavaScript の作成例を表示

Top↑

dl 要素を使ってテーブル（表）スタイルにする

定義リスト dl 要素を使ってテーブル表示のようにする例です。dt、dd 内の文字サイズが大きくなるとボックスサイズも大きくなり崩れるので固定サイズ（px）にします。また、文字数が多くなると行幅は広がりますが、テーブルのように隣接する行幅も同時に広がらないのでその行には<br>と、改行しない半角空白（Non break space） を追加すれば行幅を広げられます。（下記の下の例）

Internet Explorer: Microsoft 社で開発されたブラウザ
Mozilla Firefox: オープンソース環境で開発されたブラウザ
Opera: ヨーロッパの Opera 社が開発したブラウザ

【文字数が多くなった場合】

Internet Explorer: Microsoft 社で開発されたブラウザ
Mozilla Firefox: オープンソース環境で開発されたブラウザ。W3C の規格に最も準拠していると評価されているブラウザ。
Opera: ヨーロッパの Opera 社が開発したブラウザ

テーブルを使えば簡単なのに、「何のメリットがあるのか？」と思われがちですが、HTML がシンプルになるのと、定義リストなので HTML 文章の論理構造が保たれます。

HTML

<dl class="tbl">
  <dt>Internet Explorer</dt><dd>Microsoft 社で開発されたブラウザ</dd>
  <dt>Mozilla Firefox</dt><dd>オープンソース環境で開発されたブラウザ</dd>
  <dt>Opera</dt><dd>ヨーロッパの Opera社が開発したブラウザ</dd>
</dl>

※隣接行の文字数が多くなり行幅が広がった場合は、次のように行末に<br>  を追加して空白を入れ隣接行の行幅に揃えます。

<dt>Mozilla Firefox<br> </dt>

CSS

.tbl {
  font-family: sans-serif;
  color: #333333;
  font-size: 14px; /*文字サイズは崩れないようにするため固定にします。*/
}
.tbl dt {
  clear: left;
  float: left;
  width: 150px;
  margin: 0;
  padding: 3px 5px;
  font-weight: bold;
  background-color: #ff99ff;
  border-bottom: 1px solid #ffffff;
}
.tbl dd {
  float: left;
  width: 350px;
  margin: 0;
  padding: 3px 5px;
  background-color: #ffdddd;
  border-bottom: 1px solid #ffffff;
}

Top↑

フォーム部品 fieldset、legend のようなラベル付き枠をつくる

入力フォーム部品をグループ化してラベル付き枠を表示する、fieldset、legend のようなボックス表示を CSS で行なう例です。 fieldset タグを本来のフォーム以外に使用すると、非視覚系ブラウザでは混乱することになり好ましくありません。それで CSS で試みた例です。

コメント欄

【 fieldset、legend 使用例】

<fieldset><legend>コメント欄</legend>
<form method="POST" action="xyz.cgi">
<textarea name="msg" cols="25" rows="4">
ここにメッセージをどうぞ
</textarea>
<input type=submit value="送信">
<input type=reset value="クリア">
</form>
</fieldset>

このようなラベル付き角丸（IE の場合）ボックス表示を、IE では IE9 から対応している CSS3 プロパティで行なった例です。さまざまなところで使えて便利ですよ。

【表示例】

こんな感じの文字でも画像でも入れられるボックス表示になります。

HTML

<div class="box_f">
<h4>【 表示例 】</h4>
<p>こんな感じの文字でも画像でも入れられるボックス表示になります。</p>
</div>

CSS

ラベル部分は h4 タグを使用していますが、文章構造に合わせて h1～h6 を使用します。表示位置や外枠線とのパディングなどは調整してください。

.box_f {
  border: solid 1px #cccccc;
  position: relative;        /* 子要素が position を指定する時は親要素にも */
                             /* position 指定し、基準点を親要素にします。  */
  border-radius: 8px;        /* CSS3 のプロパティ、 8pxは角丸の半径　*/
  -moz-border-radius: 8px;   /* Firefox */
  -webkit-border-radius: 8px;/* Safari,Chrome */
  margin-top: 1em;        
  padding: 0.5em;
  
}
.box_f h4 {
  position: absolute;
  top: -0.5em;
  left: 1em;                 /* ラベル文字の表示位置を調整します。*/
  margin: 0;
  padding: 0 0.5em;
  color: #0055bb;
  font-weight: normal;
  background-color: #ffffff;
}

Next >>2カラムCSSレイアウト例 >>Top↑

ホームページ作成 Note