Webサイトの作り方のまとめ!コーディングまで。

サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめました。
ここで言うコーディングとは、「HTMLで文書を書いて(マークアップして)、CSSで見栄えを整える(CSSコーディングする)」ことを指します。主に「Webデザイナー」と呼ばれる人たちが担う範囲のコーディングについて書いてます。

以下は目次です。クリックするとその項目へ移動します。

コーディングの下準備

前回までの記事で、デザインもできました!Web用の画像も書き出しました!けど、早速コーディング開始(htmlを書き始める)っていう訳ではありません。
コーディングの前に、ディレクトリ構造を整備しましょう。

ディレクトリの構造を考える

ディレクトリ」とは、ファイルを、種類や用途、ページやコンテンツ別に仕分けするための場所(空間)のこと。
サイトに必要なファイルを、種類や用途、ページやコンテンツごとに仕分けしておくことで、ファイルが煩雑にならず、管理しやすくなります。
WindowsやMac OSでは「フォルダ」と呼ばれている、それと同じです。「ディレクトリ≒フォルダ」大体同じ意味です。

番外編で作成した「サイト構成図」をもとにディレクトリ構造を考えます。
ディレクトリ構造を整備するために、一般的(?定かではない)には「ディレクトリマップ」というのを作ります。サイトの構造をしっかりとまとめた「管理表」みたいなものです。
Lopan cafeの場合、ディレクトリマップはこんな感じになります。

Lopan cafeのディレクトリマップ

例えば、Cafeメニューのページは、「cafe」というディレクトリの中の、「index.html」ですとか、画像ファイルは「img」というディレクトリの中に入れて管理します、とか。
つまりディレクトリマップとは、「サイトに必要なファイルを網羅した一覧表」になります。

今回の場合、とても小規模なサイトなので、ここまで用意する必要はないかもしれませんが、大きな企業サイトともなると、Webサイト制作はチームで動く事になります。
この表を作っておけば、ページに固有のIDを付けてチーム内でToDoを共有したり、進行具合や対応状況などをメモしたりと、プロジェクトの進行管理にも利用できます。
また、ページタイトルディスクリプション、サイト全体のレギュレーション命名規則などを克明に管理するのにも便利なのです。

目次に戻る

ディレクトリの設置

ディレクトリマップを元に、実際にローカル上で、フォルダを用意します。その際に、ベースとなるhtmlファイルcssファイルjsファイルも用意しておきます。
各ファイルを用意するには、わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービスというのがあるので、そちらを利用させていただきます。

15秒でHTML5サイトのテンプレートが作成できる「Initializr」
InitializrやH5BPを使えば、特別な知識やノウハウがなくてもクロスブラウザ対応でかつ高パフォーマンスなHTML5のWebサイトを作り始めることができる。また、Webサイト構築のための様々なノウハウが凝縮されているので、それを学習する目的でも活用できるだろう。

Initializrから一式をダウンロード

Initializr - Start an HTML5 Boilerplate project in 15 seconds!

上記サイトから、今回は「Classic H5BP」をクリック。「2 - Fine tuning」では下図のような設定にしました。「Download it!」でダウンロード、「What's inside?」でダウンロードするファイルの中身を確認できます。

Initializrのセッティング

ダウンロードしたzipファイルを解凍すると、下図のような構成になってます。

ファイル構成
  • cssには、「style.css」が入ってます。CSSリセットがされていたり、「.clearfix」が用意されていたり、「Print Style」というのも用意されてます。
  • imgはからっぽ。
  • jsには、「script.js」が入ってますが、内容はからっぽです。
    さらにlibsがあり、その中に「html5.js」と「jquery-1.7.2.min.js」が入ってます。
    html5.jsについてはこちらが参考になるかと。

Classic H5BPでは、HTML5 Boilerplateに準拠したテンプレートを用意してくれます。下記記事参照です。

「Initializr」でHTML5サイトのテンプレートを作成しよう
Intializrで生成可能なテンプレートは、H5BP (HTML5 Boilerplate)のサブセットとなっている。H5BPでは、HTML5を扱う上で便利な機能やベストプラクティスを組み合わせたテンプレートを提供している。

Lopan cafe用にカスタマイズ

カスタマイズと言っても、ディレクトリマップを元にディレクトリを足したり、faviconapple-touch-iconを作り直したりするだけです。
カスタマイズ後のディレクトリは下図な感じ。faviconapple-touch-iconimgに入れました。今のところpanとかcafeとか、下層ページのディレクトリの中はからっぽです。

Lopan cafeのディレクトリ

目次に戻る

Web開発環境について

さぁそろそろHTMLを書いていきますよ!→けど何で?→テキストエディタでです!
Web開発環境にはいろいろあると思いますが、とりあえず僕がいま利用しているテキストエディタについてまとめます。

CotEditorというテキストエディタ

CotEditor

僕はCotEditorという、Mac OS X用のプレーンテキストエディタを愛用してます。こちらの記事で一番上にあったので使いはじめたんですが、今ではその人柄(?)に愛着がわいて、ずっと使い続けてます。
アイコンかわいいし、無料だし。ファイルをテキストエリアにドラッグ&ドロップするだけでタグが書き出せる「ファイルドロップ(下図参照)という機能がとても便利なんですよ(他のエディタでもできるかも知れませんが)

ファイルドロップ

Mac用テキストエディタでは最高峰らしいですし:D。
2012年8月現在では、バージョン1.3.1が最新みたいです。ぜひみなさんも使ってみてください☆

目次に戻る

Zen-Codingという便利なプラグイン

コーディングの手助けをする「Zen-Coding」という便利なプラグインがあるので、導入方法など紹介しときます。
Zen-Codingを導入すれば、テキストエディタに、コーディングの手助けをする拡張機能を追加する事ができます。
CotEditor用のZen-Codingは下記からダウンロードできます。

踊るサボテン工房|Mac|zen-coding for CotEditor 0.7

Appscriptのインストール

Zen-Coding 0.7以降を動かすのに必要だというAppscriptのインストールは、ターミナルを使ってコマンド入力とかするので、取っ付きにくいかもですが、こちらを参考にやってみたらなんとなくできました:D(下図参照)

python -V Pythonのバージョンチェック
sudo sh setuptools-0.6c11-py2.5.egg セットアップツールのインストール
sudo easy_install appscript py-appscriptインストール手順

Zen-Codingのインストール

  1. CotEditorのメニューから「スクリプトフォルダを開く」でScriptMenuを開きます。

  2. そこへ、ダウンロード後解凍してできた「Zen-Coding」フォルダをコピペ。

  3. 「Expand Abbreviation.scpt」の拡張子の手前に「@~e」を、「Go to Next Edit Point.scpt」の拡張子の手前に「@~w」を付与。つまり…、
    「Expand Abbreviation.scpt」→「Expand Abbreviation.@~e.scpt」
    「Go to Next Edit Point.scpt」→「Go to Next Edit Point.@~w.scpt」とします。
    こうする事で、該当機能をキーボードショートカットで使えるようになります。
    ※「@~e」は「Expand」の頭文字から。「@~w」は単純に押しやすさだけを考えて、その隣の「w」にしました。

  4. メニューから「スクリプトメニューを更新」を実行。するとメニューに「Zen-Coding」が追加されます。

スクリプトフォルダへZen-Codingをコピペ

「@~e」とか「@~w」って何?→ファイル名に追記する事で、キーボードショートカットを設定する事ができるそうです。詳しくはCotEditorのヘルプから「スクリプト」で検索すると「CotEditor スクリプトのファイル名規則」という項目で紹介されてます(下図参照)

ショートカット設定
スクリプトメニューを更新

Zen-Codingの使い方

新しい行にZen-coding の略記(Abbreviation)を入力した後「optioncommandE」を同時押し。
たとえば「div#header」と入力した後「optioncommandE」を同時押しすると「<div id="header"></div>」に展開されます。
また、演算子とかも使うことができて、「ul#global>li*5>a」のように書くと、下図のように展開されます。

Zen-Codingの使い方

展開後の<##>プレイスホルダと言って、「optioncommandW」を同時押しすると、その箇所をフォーカスしてくれます。また、「optioncommandW」は、<##>以外の、ただの空要素もフォーカスしてくれます。

目次に戻る

その他のWeb開発環境

Web制作というと、「Adobe Dreamweaver」や「ホームページビルダー」が有名どころ。
こちらはいわゆる「Webオーサリングツール」という、実際にブラウザで表示される状態を確認しながらソースを編集(WYSIWYG)できるソフトウェアです。
ありとあらゆる便利機能が豊富に取り揃えられていて、使い方を覚えてしまえば、作業効率は飛躍的にアップすること請け合いです。

けど、そんなに大袈裟なもの使わずともコーディングはできるので(負け惜しみ)、テキストエディタでも充分です。
Windowsなら「秀丸」とか「TeraPad」、Macなら「Coda」が有名(僕でも知っている)です。
他にも探してみたら「Jedit X」とか「TextMate」とか「Tincta Text Editor」とかいっぱい出てきました(2012.8現在)。試しにいろいろ使ってみて、自分が使いやすいもの選ぶと良いです:)

目次に戻る

コーディング!まずはマークアップ(HTML)

いよいよコーディングを始めます。まずはHTMLから。

index.htmlの基本設定

マークアップを始める前に、Initializrでダウンロードした「index.html」の<head>内をちょちょっと直します。

no-jsとかは削除

  1. <!doctype html>
  2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  3. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
  4. <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
  5. <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  6. <html lang="ja">

<html>についてるclass="no-js"とかは、HTML5やCSS3の機能が利用できるかどうかを調査する、Modernizrのための記述なので、今回は削除しときます(グレーの部分)

HTML5 Boilerplate <html class="no-js"> - hi.
ページがロードされたときに JavaScript が使える環境であれば Modernizr が class="no-js" を class="js" に書き換えてくれるので、JavaScript が使えなかったときのフォールバックとしての CSS を書くときに使えばいい。

あと、Lopan cafeは日本語で制作するので、lang="en"を、lang="ja"に変えます。

titleまわりをLopan cafe用に

  1. <title></title>
  2. <meta name="description" content="">
  3. <meta name="author" content="">
  4. <title>カフェ&ベーカリー「Lopan cafe」</title>
  5. <meta name="description" content="手作りパンの香りがほっこりやさしい気持ちにしてくれる、あなたの街のパンカフェです。">
  6. <link rel="shortcut icon" href="/img/favicon.ico">

titlemeta name="description"を適宜編集。ここはディレクトリマップを作った時に用意しておいた内容をコピペします(全ページ違う内容を入れる事になります)
ファビコンは<link>で、rel="shortcut icon"href.icoファイルへのリンク先を指定します。
meta name="author"は著作者名を入れるための要素ですが、昨今入ってないサイトが多いので、倣って入れない事にします。

html5.jsを変更

  1. <!--[if lt IE 9]>
  2. <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  3. <script>window.html5 || document.write('<script src="js/libs/html5.js"></script>')</script>
  4. <![endif]-->
  5. <!--[if lt IE 9]>
  6. <script src="js/libs/html5shiv.js"></script>
  7. <![endif]-->

html5.jsがバージョンアップしたらしく、Google Codeの導入方法も変更になったとの事(下記記事参照です)

IE対応でよく利用するhtml5shivの使用方法変更について|Blog|Skyward Design
zipファイルをダウンロードし、自分のサーバーにホストした上で条件分岐コメントを利用してホストしたファイルを読み込むようにと使用法の解説が変更されています。

2012年8月現在、Initializrでダウンロードした「html5.js」は旧バージョン(HTML5 Shiv 3.4)なので、新しいのと入れ替えます。
こちらから新しくなった「html5shiv.js (HTML5 Shiv v3.6)」をダウンロードして「js/libs/」の中に入れます(「dist」は圧縮されてるjs、「src」は圧縮されてないjs。今回は圧縮されてる方を入れます)。「html5.js 」は削除です。

ついでにjQueryの読み込み方法も上記に揃えときます。jQueryはずっと下の方の、</body>の上あたりで読み込んでます。

  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  2. <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"></script>')</script>
  3. <script src="js/libs/jquery-1.7.2.min.js"></script>

目次に戻る

トップページの内容をマークアップ

コーディングし始める際、書いてく順番って人それぞれなのかと思いますが、僕はまずはHTMLをざっと組んじゃいます。
デザインを見ながら書いていきますが、ここで、psdを制作する際にイメージしておいたレイヤー構造が役に立つ訳です。

まずは大雑把な要素を用意する

トップページのレイヤー

まずはトップページのpsdを開いて、レイヤー構造を見てみます。
大きく以下の3つの要素に分けられるかと思います。

  • <header>
  • <div id="contents">
  • <footer>

<div id="contents">の中には、<div id="gallery"><div id="main"><div id="side">が入ってます。

※一番上のgridは、こちらを参考に960グリッドしてみた名残です。

上図を参考に(というかそのまま)、下記のようにindex.htmlを編集します(該当箇所のみ抜粋)

  1. <!-- 略 -->
  2. <div id="wrapper">
  3. <header>
  4. </header>
  5. <div id="contents">
  6. <div id="gallery">
  7. </div>
  8. <div id="main">
  9. </div>
  10. <div id="side">
  11. </div>
  12. <!-- /#contents --></div>
  13. <footer>
  14. </footer>
  15. <!-- /#wrapper --></div>
  16. <!-- 略 -->

<!-- /#contents -->」は、「ここで#contents(id="contents")は終わりですよー」っていう目印コメントです。こうしとくと後々コードが複雑になってきた時にも、見分ける手がかりになって便利です。
(※目印コメントを</div>の後に付ける人もいますが、僕は前派です。)

要素の中身を埋めていく

headerのレイヤー

次に、それぞれの要素の中身も見ていきます。
例えば<header>の中身は以下の2つの要素で構成されてます。

  • <h1 id="logo">
  • <nav>

<nav>の中のボタンは<ul><li>で組むと良さげです。

そしてそれを「index.html」に反映するとこんな感じ。リンク先も入れちゃいます(header部分のみ抜粋)

  1. <!-- 略 -->
  2. <header>
  3. <div class="inner">
  4. <h1 id="logo"><img src="img/logo.gif" alt="Lopan cafe" width="152" height="79"></h1>
  5. <nav>
  6. <ul>
  7. <li class="info"><a href="/info/">Lopan's info</a></li>
  8. <li class="pan"><a href="/pan/">Lopanのパン</a></li>
  9. <li class="cafe"><a href="/cafe/">Cafeメニュー</a></li>
  10. <li class="about"><a href="/about/">店舗について</a></li>
  11. <li class="blog"><a href="/blog/">パンカフェBlog</a></li>
  12. </ul>
  13. </nav>
  14. </div>
  15. </header>
  16. <!-- 略 -->

psdには無いですが、<header>の中身をさらに<div class="inner">で囲ってみました。
header部分のデザインのように「背景は画面いっぱい、だけどコンテンツは固定幅で中央揃え」といったレイアウトの時には、画面いっぱい用の枠横幅固定用の枠の、2重構造にする必要があります(他の方法を知らないだけかも知れないけど)。headerの場合は、<header>=画面いっぱい用、<div class="inner">=横幅固定用として組んでいます。詳しくはCSSの項を参照のこと。

同じ要領で、以下の要素もじゃんじゃか組んでいく

結果、下記のようになりました。とっても長いので折り畳んでます(↓ファイル名をクリックすると開きます)

index.html

  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>カフェ&ベーカリー「Lopan cafe」</title>
  7. <meta name="description" content="手作りパンの香りがほっこりやさしい気持ちにしてくれる、あなたの街のパンカフェです。">
  8. <meta name="viewport" content="width=device-width">
  9. <link rel="stylesheet" href="css/style.css">
  10. <!--[if lt IE 9]>
  11. <script src="js/libs/html5shiv.js"></script>
  12. <![endif]-->
  13. </head>
  14. <body id="index">
  15. <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  16. <div id="wrapper">
  17. <header>
  18. <div class="inner">
  19. <h1 id="logo"><img src="img/logo.gif" alt="Lopan cafe" width="152" height="79"></h1>
  20. <nav>
  21. <ul>
  22. <li class="info"><a href="/info/">Lopan's info</a></li>
  23. <li class="pan"><a href="/pan/">Lopanのパン</a></li>
  24. <li class="cafe"><a href="/cafe/">Cafeメニュー</a></li>
  25. <li class="about"><a href="/about/">店舗について</a></li>
  26. <li class="blog"><a href="/blog/">パンカフェBlog</a></li>
  27. </ul>
  28. </nav>
  29. </div>
  30. </header>
  31. <div id="contents">
  32. <div class="inner">
  33. <div id="gallery">
  34. <div class="inner">
  35. <div id="slider">
  36. <div class="slideFrame">
  37. <ul>
  38. <li><a href="#"><img src="img/gallery_dummy1.jpg" alt="gallery_dummy1" width="520" height="280"></a></li>
  39. <li><a href="#"><img src="img/gallery_dummy2.jpg" alt="gallery_dummy2" width="520" height="280"></a></li>
  40. <li><a href="#"><img src="img/gallery_dummy3.jpg" alt="gallery_dummy3" width="520" height="280"></a></li>
  41. </ul>
  42. </div>
  43. <ul class="nav">
  44. <li><a href="#"></a></li>
  45. <li><a href="#"></a></li>
  46. <li><a href="#"></a></li>
  47. </ul>
  48. <p class="prev"><a href="#"></a></p>
  49. <p class="next"><a href="#"></a></p>
  50. </div>
  51. </div>
  52. <!-- /#gallery --></div>
  53. <div id="main" role="main">
  54. <section id="info">
  55. <h2><img src="img/ttl_info.gif" alt="Lopan's info" width="96" height="29"></h2>
  56. <div class="frame">
  57. <dl class="articleList">
  58. <dt><i class="info">お知らせ</i><time>2011.7.20 Fri</time></dt>
  59. <dd class="img"><img src="img/img_dummy_s.jpg" alt="夏季休業日のご案内" width="80" height="80"></dd>
  60. <dd class="ttl"><a href="#">夏季休業日のご案内</a></dd>
  61. <dd>これはカンプ・ダミー用の文章です。書体、級数のサンプルとしてご覧ください。文章の内容はダミーとさせて...</dd>
  62. </dl>
  63. <dl class="articleList">
  64. <dt><i class="pan">パン教室</i><time>2011.7.20 Fri</time></dt>
  65. <dd class="img"><img src="img/img_dummy_s.jpg" alt="第3回 パン教室のご案内 「ブレッツェル」" width="80" height="80"></dd>
  66. <dd class="ttl"><a href="#">第3回 パン教室のご案内 「ブレッツェル」</a></dd>
  67. <dd>これはカンプ・ダミー用の文章です。書体、級数のサンプルとしてご覧ください。文章の内容はダミーとさせて...</dd>
  68. </dl>
  69. </div>
  70. <p class="btn"><a href="#">一覧ページへ</a></p>
  71. </section>
  72. <section id="twitter">
  73. <h2><img src="img/ttl_twitter.gif" alt="Lopan cafe on Twitter" width="139" height="29"></h2>
  74. <p class="btn"><a href="#">フォローする</a></p>
  75. </section>
  76. <section id="facebook">
  77. <h2><img src="img/ttl_facebook.gif" alt="Lopan cafe on Facebook" width="157" height="29"></h2>
  78. <div class="frame">
  79. </div>
  80. </section>
  81. <!-- /#main --></div>
  82. <div id="side">
  83. <ul class="contact">
  84. <li class="mail"><a href="/contacct/">メールでのお問い合わせ</a></li>
  85. <li class="phone"><a href="/contact/#phone">お電話でのお問い合わせ</a></li>
  86. </ul>
  87. <aside>
  88. <h2><img src="img/ttl_new.gif" alt="今月の新作パン!" width="114" height="29"></h2>
  89. <dl class="menuList">
  90. <dt>りんごパン</dt>
  91. <dd><img src="img/img_dummy_m.jpg" alt="りんごパン" width="180" height="130">
  92. <ul>
  93. <li><i class="yen">&yen;</i>180</li>
  94. </ul></dd>
  95. </dl>
  96. </aside>
  97. <aside>
  98. <h2><img src="img/ttl_recommend.gif" alt="おすすめパン!" width="92" height="29"></h2>
  99. <dl class="menuList">
  100. <dt>サクサクラスク</dt>
  101. <dd><img src="img/img_dummy_m.jpg" alt="サクサクラスク" width="180" height="130">
  102. <ul>
  103. <li><i class="yen">&yen;</i>180</li>
  104. <li><i class="set">袋詰め</i>6個入</li>
  105. </ul></dd>
  106. <dt>フレンチトースト</dt>
  107. <dd><img src="img/img_dummy_m.jpg" alt="フレンチトースト" width="180" height="130">
  108. <ul>
  109. <li><i class="yen">&yen;</i>240</li>
  110. </ul></dd>
  111. </dl>
  112. <p class="btn"><a href="#">すべてのパンを見る</a></p>
  113. </aside>
  114. <!-- /#side --></div>
  115. </div>
  116. <!-- /#contents --></div>
  117. <footer>
  118. <div class="inner">
  119. <div id="totop">
  120. <p><span>ページトップへ</span></p>
  121. </div>
  122. <ul>
  123. <li><a href="/privacy/">プライバシーポリシー</a></li>
  124. <li><a href="/sitemap/">サイトマップ</a></li>
  125. </ul>
  126. <p><small>Copyright &copy; 2012 Lopan cafe All Rights Reserved.</small></p>
  127. </div>
  128. </footer>
  129. <!-- /#wrapper --></div>
  130. <script src="js/libs/jquery-1.7.2.min.js"></script>
  131. <script src="js/script.js"></script>
  132. <script>
  133. var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  134. (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  135. g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  136. s.parentNode.insertBefore(g,s)}(document,'script'));
  137. </script>
  138. </body>
  139. </html>

mainの中の<div id="info"><div id="twitter"><div id="facebook"><section>タグに変えました。
<section>には、区分とかとかいう意味があって、ここではそれが当てはまるかなと思います。「Lopan's infoの欄」と「Twitterの欄」と「Facebookの欄」という感じです。

今月の新作パン!おすすめパン!<aside>に。
<div id="side">は他のページでもそのまま表示させるつもりですが、この部分は他のページのコンテンツとは関係ないものになるので、端から<aside>にする事にしました。

Lopan's infoのとこの組み方は<dl class="articleList">と固有のクラス名をつけました。
Lopan's infoのページでも同じようなレイアウトが出てくるので、このクラスを使い回せると思うんです。パンカフェBlogで使っても違和感ないようにarticleListとしました。

上と同じ理由で今月の新作パン!おすすめパン!のとこは<dl class="menuList">に。
ここの組み方はLopanのパンCafeメニューのページで使い回せると思います。

「一覧ページへ」とか「フォローする」ボタンにはclass="btn"というクラスを、すでに使い回し済みです。

<div id="gallery">の中身の組み方はJavascriptが絡んだりしてちょと複雑なので、後述する事にします。

目次に戻る

コーディング!レイアウトを整える(CSS)

index.htmlがひと通り書き上がったら、CSSでレイアウトの調整を行います。
CSSは「style.css」に書いていきます。index.htmlの<head>内で下記のように読み込んでるヤツです。

  1. <link rel="stylesheet" href="css/style.css">

CSSのポイントは、下記の2点だと思います。

  • プロパティの値は後に書いた値が優先される(後に書いた値で上書きされる)
  • セレクタをより詳しく書いたスタイルはもっと優先される

後にってのは下の行にということです。例えば、

  1. p.selector { margin: 20px; }
  2. p.selector { margin: 50px; }

この場合<p class="selector">のマージンは「50px」になります。

より詳しくってのはより多くということです。例えば、

  1. body p.selector { margin: 20px; }
  2. p.selector { margin: 50px; }

こうなると<p class="selector">のマージンは「20px」の方が優先されます。
このことが分かっていれば、無駄な記述がグンと減ると思います。たぶん。

style.cssの基本設定

style.cssの上の方で指定されている、サイト全体で使われる文字色とか背景色の指定を、Lopan cafeのデザインに合わせて、ちょちょっと直します。

フォントに関する指定

  1. html, button, input, select, textarea { font-family: sans-serif; color: #222; }
  2. body { margin: 0; font-size: 1em; line-height: 1.4; }
  3. html, button, input, select, textarea { font-family: sans-serif; color: #555; }
  4. body {
  5. margin: 0;
  6. background: url(../img/bg.png);
  7. font: 100%/160% "lucida grande", verdana, arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", Sans-Serif;
  8. }

普段のテキストは濃いめのグレーくらいがちょうど良さげ。
<body>には、ベースとなる背景画像の指定と、サイト全体のフォントに関する指定をします。フォントに関する指定は「font: font-size/line-height font-family;」 という形でまとめて書けます。
(※fontは他にもまとめて指定できるプロパティがあります。詳しくはこちらを参照のこと。)

テキストを選択したときの色

  1. ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
  2. ::selection { background: #fe57a1; color: #fff; text-shadow: none; }
  3. ::-moz-selection { background: #ffd959; }
  4. ::selection { background: #ffd959; }

背景色は変えるけど文字色は変えません。text-shadowは今後ともしないつもりなので、消してもいいです。

  1. a { color: #00e; }
  2. a:visited { color: #551a8b; }
  3. a:hover { color: #06e; }
  4. a:focus { outline: thin dotted; }
  5. a:hover, a:active { outline: 0; }
  6. a { color: #39a; }
  7. a:visited { }
  8. a:hover { text-decoration: none; }
  9. a:focus { outline: thin dotted; }
  10. a:hover, a:active { outline: 0; }

リンクテキストの色も、デザイン通りに青緑色に変えます。
a:visited(訪問済み)でも、a:hover(ロールオーバー)しても色は変えません。ただし、ロールオーバーした時に下線を消すようにしました。

その他の文字色

  1. ins { background: #ff9; color: #000; text-decoration: none; }
  2. mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
  3. ins { background: #ffd959; color: #6d4d38; text-decoration: none; }
  4. mark { background: #ffd959; color: #6d4d38; font-style: italic; font-weight: bold; }

<ins>タグは、追加された部分であることを示す際に使用<mark>タグは、文書内の該当テキストをハイライトして目立たせる際に使用します。
Lopan cafeで使うかどうか分かりませんが、念のため、テキストを選択したときと同じ色に変えときます。文字色も真っ黒よりは、焦げ茶の方が良さげです。

また追々変更するかもしれませんが、差し当たりここまでにしときます。

目次に戻る

トップページのレイアウトを整える

デザインと、index.htmlを見比べながら、CSSを記述していきます。

出だしが肝心

最初に下記みたく、必要な要素ごとにコメントで仕切りを作っておきます。こうする事で、最初にノルマを把握する事ができるし、「整理整頓して書くぞ」っていう決意表明してる気持ちになります。出だしが肝心です。

  1. /* -- 略 -- */
  2. /* ===== Primary Styles ========================================================
  3. Author:
  4. ========================================================================== */
  5. /* :::::: common :::::: */
  6. /* :::::: header :::::: */
  7. /* :::::: footer :::::: */
  8. /* :::::: gallery :::::: */
  9. /* :::::: main :::::: */
  10. /* :::::: side :::::: */
  11. /* -- 略 -- */

まずは大雑把なところを固める

HTMLを組んだ時同様、大きな要素からレイアウトを指定していきます。

大雑把なレイアウト

上図みたいになる事を想定して、下記のように指定します。

  1. /* :::::: common :::::: */
  2. #wrapper,
  3. header,
  4. #contents,
  5. #gallery,
  6. footer {
  7. width: 100%;
  8. }
  9. header .inner,
  10. #contents .inner,
  11. #gallery .inner,
  12. footer .inner {
  13. width: 940px;
  14. margin: 0 auto;
  15. }

headerfooterも、#galleryのところも「背景が画面いっぱいでコンテンツ幅は固定」というレイアウトは同じなので、上記のようにまとめちゃえば効率的です。
他にも、同じレイアウトだったり、同じデザインで汎用的なスタイルは、ここ(common)にまとめて書いていくようにします。

目次に戻る

基本的にはどこからやり始めてもいいです。やれそうな所から書いていきます。
僕はまずは<header><footer>から、固めていく事が多いです。

<header>

style.css - header

  1. /* :::::: header :::::: */
  2. header {
  3. position: relative;
  4. height: 124px;
  5. border-bottom: 5px #6d4d38 solid;;
  6. box-shadow: 0 0 3px rgba(0,0,0,0.2);
  7. background: white;
  8. z-index: 10;
  9. }
  10. header #logo {
  11. float: left;
  12. margin: 0;
  13. padding: 25px 34px 20px;
  14. }
  15. nav {
  16. float: right;
  17. }
  18. nav ul {
  19. border-left: 1px #eee solid;
  20. }
  21. nav ul li {
  22. float: left;
  23. padding: 43px 19px 27px 20px;
  24. border-right: 1px #eee solid;
  25. background: #eee url(../img2/bg_nav.gif) 0 0;
  26. cursor: pointer;
  27. }
  28. nav ul li:hover {
  29. background-color: #ffd959;
  30. }
  31. nav ul li a {
  32. display: block;
  33. width: 100px;
  34. height: 54px;
  35. background: url(../img2/nav.gif) 0 0;
  36. text-indent: -999em;
  37. }
  38. nav ul li.pan a { background-position: -100px 0; }
  39. nav ul li.cafe a { background-position: -200px 0; }
  40. nav ul li.about a { background-position: -300px 0; }
  41. nav ul li.blog a { background-position: -400px 0; }

ここまでで、下図のようになりました。

ヘッダー部分のキャプチャ(ボーダーが無い)

<ul>の左側に指定したグレーのボーダーborder-left: 1px #eee solid;が出ていません…。
これはfloatの仕業です。floatしたら(浮かせたら)解除するのがお約束だと覚えておきましょう。
floatを解除するには、いくつか方法がありますが、代表的な方法として

  • 次の要素にclear: both;を指定する。
  • floatしてる要素を直接囲っている要素にclearfixを施す。

というのがあります。
詳しくは以前clearfixについてまとめたサンプルがあるので、そちらを参照のこと。

clearfixさせる度にclass="clearfix"を書いてるとHTMLが煩雑しちゃうので、<header><nav>など、全ページ共通のものや汎用的な箇所でのclearfixは、そのタグ自身にclearfixのための指定をしちゃいます。
ここでは<nav>の中の<li>floatしているので、それを囲っている<ul>clearfixを施します。
もともとstyle.css内に用意されていたclearfixをコピペしてきて、.clearfixの箇所を該当のタグ名に変えるだけです。

  1. /* :::::: clearfix :::::: */
  2. .clearfix:before, .clearfix:after { content: ""; display: table; }
  3. .clearfix:after { clear: both; }
  4. .clearfix { *zoom: 1; }
  5. nav ul:before, nav ul:after { content: ""; display: table; }
  6. nav ul:after { clear: both; }
  7. nav ul { *zoom: 1; }

これで、左側のボーダーが表示されました。

ヘッダー部分のキャプチャ(ボーダーが出た)

あともう一箇所、floatしているところがあります。<h1 id="logo"><nav>です。見た目は特に変わった様子はないですが、「Firebug」で調査してみると、<div class="inner">だけ、要素の領域が表示されません(下図)。

要素の領域

見た目問題ないからギリギリOK?→いいえ、念のためclearfixしときます。
さっき追加した<ul>へのclearfixに書き足します。

  1. /* :::::: clearfix :::::: */
  2. nav ul:before, nav ul:after,
  3. .inner:before, .inner:after { content: ""; display: table; }
  4. nav ul:after,
  5. .inner:after { clear: both; }
  6. nav ul,
  7. .inner { *zoom: 1; }
領域が表示されました

目次に戻る

続いてfooter部分を整えます。

style.css - footer

  1. /* :::::: footer :::::: */
  2. footer {
  3. border-top: 5px #6d4d38 solid;
  4. background: url(../img2/bg_nuno.png) center top repeat-x;
  5. box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
  6. }
  7. footer .inner {
  8. position: relative;
  9. }
  10. footer ul,
  11. footer p {
  12. padding: 25px 0 20px;
  13. font-size: 12px;
  14. line-height: 1;
  15. }
  16. footer ul,
  17. footer ul li {
  18. float: left;
  19. }
  20. footer ul li {
  21. margin-right: 20px;
  22. }
  23. footer ul li a {
  24. padding-left: 18px;
  25. color: #6d4d38;
  26. background: url(../img2/ico_arrow.gif) left center no-repeat;
  27. text-decoration: none;
  28. }
  29. footer ul li a:hover {
  30. text-decoration: underline;
  31. }
  32. footer p {
  33. float: right;
  34. margin: 0;
  35. color: #6d4d38;
  36. }
  37. #totop {
  38. position: absolute;
  39. top: -2em;
  40. right: 0;
  41. text-align: right;
  42. }
  43. #totop p {
  44. display: inline-block;
  45. margin: 0;
  46. padding: 0.8em 23px 0.8em;
  47. border-radius: 5px 5px 0 0;
  48. background: #6d4d38;
  49. font-size: 12px;
  50. line-height: 1;
  51. cursor: pointer;
  52. }
  53. #totop p:hover {
  54. opacity: 0.8;
  55. }
  56. #totop p span {
  57. padding-left: 18px;
  58. color: white;
  59. background: url(../img2/ico_arrow_totop.gif) left center no-repeat;
  60. }

ここまでで、下図のようになります。が、なんか変です。

フッター部分のキャプチャ(なんか変)

リンクのところに妙な黒チョボがありますが、これはlist-style-typedisc(黒丸)が表示されてるからです。style.cssの上の方の基本設定の、下記箇所をちょちょっと直します。

  1. ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
  2. dd { margin: 0 0 0 40px; }
  3. nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
  4. dd { margin: 0 0 0 40px; }
  5. ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

<ul><ol>に指定してるmarginpaddingは削除しときます。
list-styleは、<nav>の中の<ul>だけ表示しないようになってたんですが、<nav>に限らず、<ul>は全てlist-styleを表示しないように変えます。

あと、コピーライトがやけに小さいです。font-size: 12px;にしたはずなのに。
これも、上の方の基本設定で<small>への指定がありました。下記のように直します。

  1. small { font-size: 85%; }
  2. small { font-size: 100%; }

これでちゃんとなりました。

フッター部分のキャプチャ(ちゃんとなった)

ここの<small>は、小さくしたい訳じゃなくて、著作権を表します。

<small>タグは、免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用します。 その箇所が重要であるという意味や強調する役割、反対に重要性を弱める意味などはありません。

こんな要領で、その他の要素もじゃんじゃか整えていく

結果、下記のようになりました。これもとっても長いので折り畳んでます(↓ファイル名をクリックすると開きます)

style.css

  1. /* =============================================================================
  2. HTML5 Boilerplate CSS: h5bp.com/css
  3. ========================================================================== */
  4. article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  5. audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  6. audio:not([controls]) { display: none; }
  7. [hidden] { display: none; }
  8. html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  9. html, button, input, select, textarea { font-family: sans-serif; color: #555; }
  10. body {
  11. margin: 0;
  12. background: url(../img_/bg.png);
  13. font: 100%/160% "lucida grande", verdana, arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", Sans-Serif;
  14. }
  15. ::-moz-selection { background: #ffd959; text-shadow: none; }
  16. ::selection { background: #ffd959; text-shadow: none; }
  17. a { color: #39a; }
  18. a:visited { }
  19. a:hover { text-decoration: none; }
  20. a:focus { outline: thin dotted; }
  21. a:hover, a:active { outline: 0; }
  22. abbr[title] { border-bottom: 1px dotted; }
  23. b, strong { font-weight: bold; }
  24. blockquote { margin: 1em 40px; }
  25. dfn { font-style: italic; }
  26. hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  27. ins { background: #ffd959; color: #6d4d38; text-decoration: none; }
  28. mark { background: #ffd959; color: #6d4d38; font-style: italic; font-weight: bold; }
  29. pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
  30. pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
  31. q { quotes: none; }
  32. q:before, q:after { content: ""; content: none; }
  33. small { font-size: 100%; }
  34. sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  35. sup { top: -0.5em; }
  36. sub { bottom: -0.25em; }
  37. dd { margin: 0 0 0 40px; }
  38. ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
  39. img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
  40. svg:not(:root) { overflow: hidden; }
  41. figure { margin: 0; }
  42. form { margin: 0; }
  43. fieldset { border: 0; margin: 0; padding: 0; }
  44. label { cursor: pointer; }
  45. legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
  46. button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
  47. button, input { line-height: normal; }
  48. button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
  49. button[disabled], input[disabled] { cursor: default; }
  50. input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
  51. input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  52. input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
  53. button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  54. textarea { overflow: auto; vertical-align: top; resize: vertical; }
  55. input:valid, textarea:valid { }
  56. input:invalid, textarea:invalid { background-color: #f0dddd; }
  57. table { border-collapse: collapse; border-spacing: 0; }
  58. td { vertical-align: top; }
  59. .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
  60. /* ===== Primary Styles ========================================================
  61. Author:
  62. ========================================================================== */
  63. /* :::::: common :::::: */
  64. #wrapper,
  65. header,
  66. #contents,
  67. #gallery,
  68. footer {
  69. width: 100%;
  70. }
  71. header .inner,
  72. #contents .inner,
  73. #gallery .inner,
  74. footer .inner {
  75. width: 940px;
  76. margin: 0 auto;
  77. }
  78. /* :::::: header :::::: */
  79. header {
  80. position: relative;
  81. height: 124px;
  82. border-bottom: 5px #6d4d38 solid;;
  83. box-shadow: 0 0 3px rgba(0,0,0,0.2);
  84. background: white;
  85. z-index: 10;
  86. }
  87. header #logo {
  88. float: left;
  89. margin: 0;
  90. padding: 25px 34px 20px;
  91. }
  92. nav {
  93. float: right;
  94. }
  95. nav ul {
  96. border-left: 1px #eee solid;
  97. }
  98. ul.contact {
  99. margin-bottom: 20px;
  100. border-top: 1px #eee solid;
  101. }
  102. nav ul li,
  103. ul.contact li {
  104. background: #eee url(../img_/bg_nav.gif) 0 0;
  105. cursor: pointer;
  106. }
  107. nav ul li {
  108. float: left;
  109. padding: 43px 19px 27px 20px;
  110. border-right: 1px #eee solid;
  111. }
  112. ul.contact li {
  113. padding: 20px;
  114. border-bottom: 1px #eee solid;
  115. cursor: pointer;
  116. }
  117. nav ul li:hover,
  118. ul.contact li:hover {
  119. background-color: #ffd959;
  120. }
  121. nav ul li a,
  122. ul.contact li a {
  123. display: block;
  124. width: 100px;
  125. height: 54px;
  126. background: url(../img_/nav.gif) 0 0;
  127. text-indent: -999em;
  128. }
  129. ul.contact li a {
  130. width: 170px;
  131. }
  132. nav ul li.pan a { background-position: -100px 0; }
  133. nav ul li.cafe a { background-position: -200px 0; }
  134. nav ul li.about a { background-position: -300px 0; }
  135. nav ul li.blog a { background-position: -400px 0; }
  136. ul.contact li.mail a { height: 18px; background-position: 0 -70px; }
  137. ul.contact li.phone a { height: 59px; background-position: -200px -70px; }
  138. /* :::::: footer :::::: */
  139. footer {
  140. border-top: 5px #6d4d38 solid;
  141. background: url(../img_/bg_nuno.png) center top repeat-x;
  142. box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
  143. }
  144. footer .inner {
  145. position: relative;
  146. }
  147. footer ul,
  148. footer p {
  149. padding: 20px 0;
  150. font-size: 12px;
  151. line-height: 1;
  152. }
  153. footer ul,
  154. footer ul li {
  155. float: left;
  156. }
  157. footer ul li {
  158. margin-right: 20px;
  159. }
  160. footer ul li a {
  161. padding-left: 18px;
  162. color: #6d4d38;
  163. background: url(../img_/ico_arrow.gif) left center no-repeat;
  164. text-decoration: none;
  165. }
  166. footer ul li a:hover {
  167. text-decoration: underline;
  168. }
  169. footer p {
  170. float: right;
  171. margin: 0;
  172. color: #6d4d38;
  173. }
  174. #totop {
  175. position: absolute;
  176. top: -2em;
  177. right: 0;
  178. text-align: right;
  179. }
  180. #totop p {
  181. display: inline-block;
  182. margin: 0;
  183. padding: 0.8em 23px 0.8em;
  184. border-radius: 5px 5px 0 0;
  185. background: #6d4d38;
  186. font-size: 12px;
  187. line-height: 1;
  188. cursor: pointer;
  189. }
  190. #totop p:hover {
  191. opacity: 0.8;
  192. }
  193. #totop p span {
  194. padding-left: 18px;
  195. color: white;
  196. background: url(../img_/ico_arrow_totop.gif) left center no-repeat;
  197. }
  198. /* :::::: contents :::::: */
  199. #contents h2 {
  200. margin: 0 0 10px;
  201. padding: 5px 20px;
  202. background: url(../img_/bg_ttl.gif) 0 0;
  203. }
  204. .btn {
  205. display: inline-block;
  206. float: right;
  207. margin: 0;
  208. padding: 10px 23px;
  209. border-radius: 5px;
  210. background: #6d4d38;
  211. font-size: 12px;
  212. line-height: 1;
  213. cursor: pointer;
  214. }
  215. .btn:hover {
  216. opacity: 0.8;
  217. }
  218. #side .btn {
  219. display: block;
  220. float: none;
  221. margin: 0 20px;
  222. text-align: center;
  223. }
  224. .btn a {
  225. padding-left: 18px;
  226. color: white;
  227. background: url(../img_/ico_arrow_btn.gif) left center no-repeat;
  228. text-decoration: none;
  229. }
  230. /* :::::: icon :::::: */
  231. i {
  232. display: inline-block;
  233. margin-right: 3px;
  234. text-indent: -999em;
  235. }
  236. .articleList i {
  237. width: 18px;
  238. height: 18px;
  239. background: url(../img_/ico_info.gif);
  240. }
  241. .articleList i.pan { background-position: -20px 0; }
  242. .articleList i.cafe { background-position: -40px 0; }
  243. .articleList i.about { background-position: -60px 0; }
  244. .articleList i.blog { background-position: -80px 0; }
  245. .menuList i {
  246. width: 14px;
  247. height: 14px;
  248. background: url(../img_/ico_pan.gif);
  249. }
  250. .menuList i.yen { background-position: -25px 0; }
  251. .menuList i.time { background-position: -25px -20px; }
  252. .menuList i.set { background-position: -25px -40px; }
  253. /* :::::: gallery :::::: */
  254. #gallery {
  255. position: absolute;
  256. top: 119px;
  257. left: 0;
  258. background: url(../img_/bg_nuno.png) center top;
  259. box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
  260. }
  261. #slider {
  262. float: right;
  263. position: relative;
  264. width: 700px;
  265. margin: 30px 0 20px;
  266. padding: 10px 0;
  267. background: url(../img_/bg_gallery.jpg);
  268. }
  269. #slider .slideFrame {
  270. position: relative;
  271. height: 280px;
  272. overflow: hidden;
  273. margin-bottom: 10px;
  274. }
  275. /* slide images */
  276. #slider .slideFrame ul {
  277. position: absolute;
  278. top: 0;
  279. left: 0;
  280. width: 1620px;
  281. margin: 0;
  282. }
  283. #slider .slideFrame ul li {
  284. float: left;
  285. width: 520px;
  286. margin-right: 20px;
  287. }
  288. #slider .slideFrame ul li:last-child {
  289. margin-right: 0;
  290. }
  291. #slider .slideFrame ul li a {
  292. background: none;
  293. }
  294. /* slider items */
  295. #slider ul li,
  296. #slider ul li a,
  297. #slider p,
  298. #slider p a {
  299. background: url(../img_/gallery_item.png);
  300. }
  301. /* gallery list button */
  302. #slider ul.nav {
  303. width: 62px;
  304. margin: 0 auto;
  305. padding: 0;
  306. }
  307. #slider ul.nav li {
  308. float: left;
  309. margin-right: 16px;
  310. background-position: -260px 0;
  311. }
  312. #slider ul.nav li:last-child {
  313. margin-right: 0;
  314. }
  315. #slider ul.nav li a {
  316. display: block;
  317. width: 10px;
  318. height: 10px;
  319. background-position: -260px -20px;
  320. }
  321. #slider ul.nav li a:hover { opacity: 0; }
  322. /* slider arrow button */
  323. #slider p {
  324. position: absolute;
  325. top: 0;
  326. margin: 0;
  327. width: 110px;
  328. height: 320px;
  329. cursor: pointer;
  330. }
  331. #slider p.prev {
  332. left: 0;
  333. }
  334. #slider p.next {
  335. right: 0;
  336. background-position: -110px 0;
  337. }
  338. #slider p a {
  339. display: block;
  340. width: 26px;
  341. height: 26px;
  342. margin: 140px 0 0 40px;
  343. background-position: -230px 0;
  344. }
  345. #slider p:hover a {
  346. margin: 140px 0 0 32px;
  347. }
  348. #slider p.next a {
  349. margin-left: 44px;
  350. background-position: -230px -30px;
  351. }
  352. #slider p.next:hover a {
  353. margin-left: 52px;
  354. }
  355. /* :::::: main :::::: */
  356. #main {
  357. float: right;
  358. width: 690px;
  359. margin-top: 380px;
  360. }
  361. section#info,
  362. section#twitter {
  363. float: left;
  364. width: 330px;
  365. margin-bottom: 30px;
  366. }
  367. section#twitter {
  368. float: right;
  369. }
  370. #info .frame,
  371. #twitter .twtr-widget {
  372. margin-bottom: 10px;
  373. }
  374. #main #info .frame {
  375. height: 200px;
  376. overflow: hidden;
  377. }
  378. /* twitter widget */
  379. /* facebook like box */
  380. section#facebook {
  381. clear: both;
  382. }
  383. #facebook .frame {
  384. overflow: hidden;
  385. width: 680px;
  386. height: 180px;
  387. margin: 0 5px;
  388. }
  389. /* :::::: article list :::::: */
  390. dl.articleList {
  391. margin: 0 0 10px;
  392. padding: 0 10px 12px;
  393. border-bottom: 1px #eee solid;
  394. }
  395. dl.articleList dt {
  396. margin-bottom: 5px;
  397. color: #aaa;
  398. font-size: 12px;
  399. line-height: 1.5;
  400. }
  401. dl.articleList dd {
  402. margin: 0;
  403. font-size: 12px;
  404. line-height: 140%;
  405. }
  406. dl.articleList dd.img {
  407. float: left;
  408. margin-right: 12px;
  409. }
  410. dl.articleList dd.ttl {
  411. height: 1.6em;
  412. overflow: hidden;
  413. text-overflow: ellipsis;
  414. -webkit-text-overflow: ellipsis;
  415. -o-text-overflow: ellipsis;
  416. margin-bottom: 3px;
  417. }
  418. dl.articleList dd.ttl a {
  419. padding-left: 18px;
  420. font-size: 14px;
  421. background: url(../img_/ico_arrow_link.gif) left center no-repeat;
  422. }
  423. /* :::::: side :::::: */
  424. #side {
  425. float: left;
  426. position: relative;
  427. width: 220px;
  428. padding: 20px 0;
  429. box-shadow: 0 0 3px rgba(0,0,0,0.2);
  430. background: white url(../img_/bg_side_top.gif) repeat-x;
  431. }
  432. #side h2 {
  433. margin-bottom: 15px;
  434. }
  435. /* :::::: menu list :::::: */
  436. dl.menuList {
  437. margin: 0 20px 20px 20px;
  438. color: #6d4d38;
  439. font-size: 14px;
  440. font-weight: bold;
  441. line-height: 1;
  442. }
  443. dl.menuList dt {
  444. margin: 0 0 10px;
  445. padding-left: 18px;
  446. background: url(../img_/list.gif) left center no-repeat;
  447. }
  448. #side dl.menuList dt {
  449. background-image: url(../img_/list_pickup.gif);
  450. }
  451. dl.menuList dd {
  452. position: relative;
  453. margin: 0 0 20px;
  454. }
  455. dl.menuList dd ul {
  456. position: absolute;
  457. right: 0;
  458. bottom: 0;
  459. }
  460. dl.menuList dd ul li {
  461. float: left;
  462. margin-right: 1px;
  463. padding: 4px 8px;
  464. background: url(../img_/bg_alpha_white.png);
  465. }
  466. dl.menuList dd ul li:last-child {
  467. margin-right: 0;
  468. }
  469. /* :::::: clearfix :::::: */
  470. header .inner:before, header .inner:after,
  471. footer .inner:before, footer .inner:after,
  472. #contents .inner:before, #contents .inner:after,
  473. nav ul:before, nav ul:after,
  474. #gallery:before, #gallery:after,
  475. dl.articleList:before, dl.articleList:after {
  476. content: ""; display: table;
  477. }
  478. header .inner:after,
  479. footer .inner:after,
  480. #contents .inner:after,
  481. nav ul:after,
  482. #gallery:after,
  483. dl.articleList:after {
  484. clear: both;
  485. }
  486. header .inner,
  487. footer .inner,
  488. #contents .inner,
  489. nav ul,
  490. #gallery,
  491. dl.articleList {
  492. *zoom: 1;
  493. }
  494. /* 以下略(以下は編集してません) */

ひと通り完成!ですが、まだここから、いろんなブラウザ(特にIE8以下!)で表示確認したり、必要であれば出力(プリントアウト)のチェックもしないと行けません。gallery部分の動き(Javascript)の実装もまだですし、TwitterFacebookもまだ入れてないですもんね…。

しかしそれ以前に、でっかい不具合を発見してしまいましたー!

目次に戻る

画面を縮めると変

途切れた背景

画面を縮めた時に背景が途中で途切れてしまいます。
これは、width: 100%;に指定した<header><div id="gallery"><footer>に背景を指定したためです。不具合具合はこちらから実際にご確認いただけます:(
width: 100%;とはブラウザ幅に準拠してるようで(?定かではない)width: 100%;と指定すると下図のような感じで、ブラウザの幅分しか領域がなくなってしまいます。

要するにこんな感じ

.innerにも指定してみる

.innerの領域

<div class="inner">は、端っこまでちゃんと領域があるので、<div class="inner">にも、同じ太さのボーダー同じ背景画像を指定してみればどうかと思い、下記のように指定してみました。

  1. header .inner {
  2. margin-bottom: -5px;
  3. border-bottom: 5px #6d4d38 solid;
  4. box-shadow: 0 0 3px rgba(0,0,0,0.2);
  5. }
  1. footer .inner {
  2. position: relative;
  3. margin-top: -5px;
  4. border-top: 5px #6d4d38 solid;
  5. background: url(../img_/bg_nuno.png) center top repeat-x;
  6. box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
  7. }
  1. #gallery .inner {
  2. background: url(../img_/bg_nuno.png) center top;
  3. }

が、要素の内側に影を付けてる<div id="gallery">に、<div class="inner">の背景画像が被って、微妙な感じになっちゃいました。<div class="inner">にも影を指定すると、これまた変な風になっちゃいます(下図)

途切れる影

別の構想

影さえなければ!影をbox-shadowで指定してさえいなければ…!
けどやっぱり影は欲しいので、別の対策をとる事にしました。下図をご覧ください。

当初の予定はこう。極力画像を使わない方針で、ボーダーも影もCSSでなんとかしてました。

当初の予定

修正案はこうします。もうボーダーも影も画像にしてしまいます。そもそもheader .innerのボーダーをheaderのボーダーと重ねるためにmargin-bottom: -5px;としているのもちょっと頂けないなと感じてたんです。あと、<div id="gallery">position: absolute;で絶対配置しているのもちょっと強引だなと感じてたので、ついでにそこも修正しようと思います。

修正案

目次に戻る

背景画像を作り直し

上図にもあるように、<header>用の「bg_header.gif」と、<div id="contents"><footer>用の「bg_nuno.png」を用意します。
あと、<header>も画像にするため<div id="side">に落ちていた影がなくなっちゃいます。なので<div id="side">には、意図的に「bg_side.gif(影の画像)」を敷いて影が落ちてるっぽくします。

背景用画像の仕組み

HTMLを修正

<div id="gallery"><div id="main">の中に入れて、背景とは分離します。これで無理のない作りになったんじゃないでしょうか。概要は下記な感じです。

  1. <body>
  2. <div id="wrapper">
  3. <header>
  4. </header>
  5. <div id="contents">
  6. <div id="main">
  7. <div id="gallery"></div>
  8. <section id="info"></section>
  9. <section id="twitter"></section>
  10. <section id="facebook"></section>
  11. </div>
  12. <div id="side">
  13. </div>
  14. <!-- /#contents --></div>
  15. <footer>
  16. </footer>
  17. <!-- /#wrapper --></div>
  18. </body>

CSSを修正

基本的にはボーダーと影を削除し、背景画像にすることです。
commonのところも、こう変わります。

  1. #wrapper,
  2. header,
  3. #contents,
  4. #gallery,
  5. footer {
  6. width: 100%;
  7. }
  8. #wrapper,
  9. header,
  10. #contents,
  11. footer {
  12. width: 100%;
  13. }
  1. header .inner,
  2. #contents .inner,
  3. #gallery .inner,
  4. footer .inner {
  5. width: 940px;
  6. margin: 0 auto;
  7. }
  8. header .inner,
  9. #contents .inner,
  10. footer .inner {
  11. width: 940px;
  12. margin: 0 auto;
  13. }
header

影を<div id="side">とかに落とすためにz-indexで要素を手前に出してたんですが、もはや必要ありません。position: relative;は、z-indexを有効にするための記述なのでこれも削除。
要素の高さは、ボーダーがなくなった分5pxプラスです。

  1. header {
  2. position: relative;
  3. height: 124px;
  4. border-bottom: 5px #6d4d38 solid;
  5. box-shadow: 0 0 3px rgba(0,0,0,0.2);
  6. background: white;
  7. z-index: 10;
  8. }
  9. header,
  10. header .inner {
  11. height: 129px;
  12. background: url(../img/bg_header.gif) repeat-x;
  13. }
footer

ボーダーと影の削除のみですね。

  1. footer {
  2. border-top: 5px #6d4d38 solid;
  3. background: url(../img_/bg_nuno.png) center top repeat-x;
  4. box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
  5. }
  6. footer,
  7. footer .inner {
  8. background: url(../img/bg_nuno.png) center top repeat-x;
  9. }
#contents

背景画像の指定を新規追加です。bg_nuno.pngにはfooterの事を考えて上辺に5pxのボーダーが含まれています。ここではボーダーを含まないよう、y方向に-5px(上方向に5px)ズラシて配置します。

  1. body#index #contents,
  2. body#index #contents .inner {
  3. background: url(../img/bg_nuno.png) center -5px repeat-x;
  4. }
#gallery

width: 100%;でなくなった事により、もともと#slideで担っていた役割を#galleryに移します。

  1. #gallery {
  2. position: absolute;
  3. top: 119px;
  4. left: 0;
  5. background: url(../img_/bg_nuno.png) center top;
  6. box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
  7. }
  8. #gallery {
  9. float: right;
  10. width: 700px;
  11. height: 320px;
  12. margin: 20px 0 40px;
  13. background: url(../img/bg_gallery.jpg);
  14. }
  1. #slider {
  2. float: right;
  3. position: relative;
  4. width: 700px;
  5. margin: 30px 0 20px;
  6. padding: 10px 0;
  7. background: url(../img_/bg_gallery.jpg);
  8. }
  9. #slider {
  10. position: relative;
  11. padding: 10px 0;
  12. }

これで今度こそひと通り完成です!

最終的なHTMLとCSS

index.html

  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>カフェ&ベーカリー「Lopan cafe」</title>
  7. <meta name="description" content="手作りパンの香りがほっこりやさしい気持ちにしてくれる、あなたの街のパンカフェです。">
  8. <link rel="shortcut icon" href="/img/favicon.ico">
  9. <meta name="viewport" content="width=device-width">
  10. <link rel="stylesheet" href="css/style.css">
  11. <!--[if lt IE 9]>
  12. <script src="js/libs/html5shiv.js"></script>
  13. <![endif]-->
  14. </head>
  15. <body id="index">
  16. <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  17. <div id="wrapper">
  18. <header>
  19. <div class="inner">
  20. <h1 id="logo"><img src="img/logo.gif" alt="Lopan cafe" width="152" height="79"></h1>
  21. <nav>
  22. <ul>
  23. <li class="info"><a href="/info/">Lopan's info</a></li>
  24. <li class="pan"><a href="/pan/">Lopanのパン</a></li>
  25. <li class="cafe"><a href="/cafe/">Cafeメニュー</a></li>
  26. <li class="about"><a href="/about/">店舗について</a></li>
  27. <li class="blog"><a href="/blog/">パンカフェBlog</a></li>
  28. </ul>
  29. </nav>
  30. </div>
  31. </header>
  32. <div id="contents">
  33. <div class="inner">
  34. <div id="main" role="main">
  35. <div id="gallery">
  36. <div id="slider">
  37. <div class="slideFrame">
  38. <ul>
  39. <li><a href="#"><img src="img/gallery_dummy1.jpg" alt="gallery_dummy1" width="520" height="280"></a></li>
  40. <li><a href="#"><img src="img/gallery_dummy2.jpg" alt="gallery_dummy2" width="520" height="280"></a></li>
  41. <li><a href="#"><img src="img/gallery_dummy3.jpg" alt="gallery_dummy3" width="520" height="280"></a></li>
  42. </ul>
  43. </div>
  44. <ul class="nav">
  45. <li><a href="#"></a></li>
  46. <li><a href="#"></a></li>
  47. <li><a href="#"></a></li>
  48. </ul>
  49. <p class="prev"><a href="#"></a></p>
  50. <p class="next"><a href="#"></a></p>
  51. </div>
  52. <!-- /#gallery --></div>
  53. <section id="info">
  54. <h2><img src="img/ttl_info.gif" alt="Lopan's info" width="96" height="29"></h2>
  55. <div class="frame">
  56. <dl class="articleList">
  57. <dt><i class="info">お知らせ</i><time>2011.7.20 Fri</time></dt>
  58. <dd class="img"><img src="img/img_dummy_s.jpg" alt="夏季休業日のご案内" width="80" height="80"></dd>
  59. <dd class="ttl"><a href="#">夏季休業日のご案内</a></dd>
  60. <dd>これはカンプ・ダミー用の文章です。書体、級数のサンプルとしてご覧ください。文章の内容はダミーとさせて...</dd>
  61. </dl>
  62. <dl class="articleList">
  63. <dt><i class="pan">パン教室</i><time>2011.7.20 Fri</time></dt>
  64. <dd class="img"><img src="img/img_dummy_s.jpg" alt="第3回 パン教室のご案内 「ブレッツェル」" width="80" height="80"></dd>
  65. <dd class="ttl"><a href="#">第3回 パン教室のご案内 「ブレッツェル」</a></dd>
  66. <dd>これはカンプ・ダミー用の文章です。書体、級数のサンプルとしてご覧ください。文章の内容はダミーとさせて...</dd>
  67. </dl>
  68. </div>
  69. <p class="btn"><a href="#">一覧ページへ</a></p>
  70. </section>
  71. <section id="twitter">
  72. <h2><img src="img/ttl_twitter.gif" alt="Lopan cafe on Twitter" width="139" height="29"></h2>
  73. <p class="btn"><a href="#">フォローする</a></p>
  74. </section>
  75. <section id="facebook">
  76. <h2><img src="img/ttl_facebook.gif" alt="Lopan cafe on Facebook" width="157" height="29"></h2>
  77. <div class="frame">
  78. </div>
  79. </section>
  80. <!-- /#main --></div>
  81. <div id="side">
  82. <ul class="contact">
  83. <li class="mail"><a href="/contacct/">メールでのお問い合わせ</a></li>
  84. <li class="phone"><a href="/contact/#phone">お電話でのお問い合わせ</a></li>
  85. </ul>
  86. <aside>
  87. <h2><img src="img/ttl_new.gif" alt="今月の新作パン!" width="114" height="29"></h2>
  88. <dl class="menuList">
  89. <dt>りんごパン</dt>
  90. <dd><img src="img/img_dummy_m.jpg" alt="りんごパン" width="180" height="130">
  91. <ul>
  92. <li><i class="yen">¥</i>180</li>
  93. </ul></dd>
  94. </dl>
  95. </aside>
  96. <aside>
  97. <h2><img src="img/ttl_recommend.gif" alt="おすすめパン!" width="92" height="29"></h2>
  98. <dl class="menuList">
  99. <dt>サクサクラスク</dt>
  100. <dd><img src="img/img_dummy_m.jpg" alt="サクサクラスク" width="180" height="130">
  101. <ul>
  102. <li><i class="yen">¥</i>180</li>
  103. <li><i class="set">袋詰め</i>6個入</li>
  104. </ul></dd>
  105. <dt>フレンチトースト</dt>
  106. <dd><img src="img/img_dummy_m.jpg" alt="フレンチトースト" width="180" height="130">
  107. <ul>
  108. <li><i class="yen">¥</i>240</li>
  109. </ul></dd>
  110. </dl>
  111. <p class="btn"><a href="#">すべてのパンを見る</a></p>
  112. </aside>
  113. <!-- /#side --></div>
  114. </div>
  115. <!-- /#contents --></div>
  116. <footer>
  117. <div class="inner">
  118. <div id="totop">
  119. <p><span>ページトップへ</span></p>
  120. </div>
  121. <ul>
  122. <li><a href="/privacy/">プライバシーポリシー</a></li>
  123. <li><a href="/sitemap/">サイトマップ</a></li>
  124. </ul>
  125. <p><small>Copyright © 2012 Lopan cafe All Rights Reserved.</small></p>
  126. </div>
  127. </footer>
  128. <!-- /#wrapper --></div>
  129. <script src="js/libs/jquery-1.7.2.min.js"></script>
  130. <script src="js/script.js"></script>
  131. <script>
  132. var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  133. (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  134. g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  135. s.parentNode.insertBefore(g,s)}(document,'script'));
  136. </script>
  137. </body>
  138. </html>

style.css

  1. /* =============================================================================
  2. HTML5 Boilerplate CSS: h5bp.com/css
  3. ========================================================================== */
  4. article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  5. audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  6. audio:not([controls]) { display: none; }
  7. [hidden] { display: none; }
  8. html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  9. html, button, input, select, textarea { font-family: sans-serif; color: #555; }
  10. body {
  11. margin: 0;
  12. background: url(../img/bg.png);
  13. font: 100%/160% "lucida grande", verdana, arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", Sans-Serif;
  14. }
  15. ::-moz-selection { background: #ffd959; text-shadow: none; }
  16. ::selection { background: #ffd959; text-shadow: none; }
  17. a { color: #39a; }
  18. a:visited { }
  19. a:hover { text-decoration: none; }
  20. a:focus { outline: thin dotted; }
  21. a:hover, a:active { outline: 0; }
  22. abbr[title] { border-bottom: 1px dotted; }
  23. b, strong { font-weight: bold; }
  24. blockquote { margin: 1em 40px; }
  25. dfn { font-style: italic; }
  26. hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  27. ins { background: #ffd959; color: #6d4d38; text-decoration: none; }
  28. mark { background: #ffd959; color: #6d4d38; font-style: italic; font-weight: bold; }
  29. pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
  30. pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
  31. q { quotes: none; }
  32. q:before, q:after { content: ""; content: none; }
  33. small { font-size: 100%; }
  34. sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  35. sup { top: -0.5em; }
  36. sub { bottom: -0.25em; }
  37. dd { margin: 0 0 0 40px; }
  38. ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
  39. img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
  40. svg:not(:root) { overflow: hidden; }
  41. figure { margin: 0; }
  42. form { margin: 0; }
  43. fieldset { border: 0; margin: 0; padding: 0; }
  44. label { cursor: pointer; }
  45. legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
  46. button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
  47. button, input { line-height: normal; }
  48. button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
  49. button[disabled], input[disabled] { cursor: default; }
  50. input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
  51. input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  52. input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
  53. button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  54. textarea { overflow: auto; vertical-align: top; resize: vertical; }
  55. input:valid, textarea:valid { }
  56. input:invalid, textarea:invalid { background-color: #f0dddd; }
  57. table { border-collapse: collapse; border-spacing: 0; }
  58. td { vertical-align: top; }
  59. .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
  60. /* ===== Primary Styles ========================================================
  61. Author:
  62. ========================================================================== */
  63. /* :::::: common ::::::
  64. * 大雑把な指定や、汎用的な指定。
  65. */
  66. #wrapper,
  67. header,
  68. #contents,
  69. footer {
  70. width: 100%;
  71. }
  72. header .inner,
  73. #contents .inner,
  74. footer .inner {
  75. width: 940px;
  76. margin: 0 auto;
  77. }
  78. /* :::::: header ::::::
  79. * header内の指定。
  80. */
  81. header,
  82. header .inner {
  83. height: 129px;
  84. background: url(../img/bg_header.gif) repeat-x;
  85. }
  86. header #logo {
  87. float: left;
  88. margin: 0;
  89. padding: 25px 34px 20px;
  90. }
  91. /* メールでのお問い合わせ、お電話でのお問い合わせのボタンも
  92. * グローバルナビとデザインが一緒なので、一緒に指定しちゃっとく。
  93. */
  94. nav {
  95. float: right;
  96. }
  97. nav ul {
  98. border-left: 1px #eee solid;
  99. }
  100. ul.contact {
  101. margin-bottom: 20px;
  102. border-top: 1px #eee solid;
  103. }
  104. nav ul li,
  105. ul.contact li {
  106. background: #eee url(../img/bg_nav.gif) 0 0;
  107. cursor: pointer;
  108. }
  109. nav ul li {
  110. float: left;
  111. padding: 43px 19px 27px 20px;
  112. border-right: 1px #eee solid;
  113. }
  114. ul.contact li {
  115. padding: 20px;
  116. border-bottom: 1px #eee solid;
  117. cursor: pointer;
  118. }
  119. nav ul li:hover,
  120. ul.contact li:hover {
  121. background-color: #ffd959;
  122. }
  123. nav ul li a,
  124. ul.contact li a {
  125. display: block;
  126. width: 100px;
  127. height: 54px;
  128. background: url(../img/nav.gif) 0 0;
  129. text-indent: -999em;
  130. }
  131. ul.contact li a {
  132. width: 170px;
  133. }
  134. nav ul li.pan a { background-position: -100px 0; }
  135. nav ul li.cafe a { background-position: -200px 0; }
  136. nav ul li.about a { background-position: -300px 0; }
  137. nav ul li.blog a { background-position: -400px 0; }
  138. ul.contact li.mail a { height: 18px; background-position: 0 -70px; }
  139. ul.contact li.phone a { height: 59px; background-position: -200px -70px; }
  140. /* :::::: footer ::::::
  141. * footer内の指定。
  142. */
  143. footer,
  144. footer .inner {
  145. background: url(../img/bg_nuno.png) center top repeat-x;
  146. }
  147. footer .inner {
  148. position: relative;
  149. }
  150. footer ul,
  151. footer p {
  152. padding: 25px 0 20px;
  153. font-size: 12px;
  154. line-height: 1;
  155. }
  156. footer ul,
  157. footer ul li {
  158. float: left;
  159. }
  160. footer ul li {
  161. margin-right: 20px;
  162. }
  163. footer ul li a {
  164. padding-left: 18px;
  165. color: #6d4d38;
  166. background: url(../img/ico_arrow.gif) left center no-repeat;
  167. text-decoration: none;
  168. }
  169. footer ul li a:hover {
  170. text-decoration: underline;
  171. }
  172. footer p {
  173. float: right;
  174. margin: 0;
  175. color: #6d4d38;
  176. }
  177. /* totop */
  178. #totop {
  179. position: absolute;
  180. top: -1.75em;
  181. right: 0;
  182. padding: 0;
  183. text-align: right;
  184. }
  185. #totop p {
  186. display: inline-block;
  187. margin: 0;
  188. padding: 0.8em 23px 0.7em;
  189. border-radius: 5px 5px 0 0;
  190. background: #6d4d38;
  191. font-size: 12px;
  192. line-height: 1;
  193. cursor: pointer;
  194. }
  195. #totop p:hover {
  196. opacity: 0.8;
  197. }
  198. #totop p span {
  199. padding-left: 18px;
  200. color: white;
  201. background: url(../img_/ico_arrow_totop.gif) left center no-repeat;
  202. }
  203. /* :::::: contents ::::::
  204. * #contentsに関わる指定。
  205. */
  206. body#index #contents,
  207. body#index #contents .inner {
  208. background: url(../img/bg_nuno.png) center -5px repeat-x;
  209. }
  210. #contents {
  211. position: relative;
  212. }
  213. #contents h2 {
  214. margin: 0 0 10px;
  215. padding: 5px 20px;
  216. background: url(../img/bg_ttl.gif) 0 0;
  217. }
  218. .btn {
  219. display: inline-block;
  220. float: right;
  221. margin: 0;
  222. padding: 10px 23px;
  223. border-radius: 5px;
  224. background: #6d4d38;
  225. font-size: 12px;
  226. line-height: 1;
  227. cursor: pointer;
  228. }
  229. .btn:hover {
  230. opacity: 0.8;
  231. }
  232. #side .btn {
  233. display: block;
  234. float: none;
  235. margin: 0 20px;
  236. text-align: center;
  237. }
  238. .btn a {
  239. padding-left: 18px;
  240. color: white;
  241. background: url(../img/ico_arrow_btn.gif) left center no-repeat;
  242. text-decoration: none;
  243. }
  244. /* :::::: icon ::::::
  245. * アイコンに関わる指定
  246. */
  247. i {
  248. display: inline-block;
  249. margin-right: 3px;
  250. text-indent: -999em;
  251. }
  252. *+html i {
  253. float: left;
  254. display: block;
  255. }
  256. .articleList i {
  257. width: 18px;
  258. height: 18px;
  259. background: url(../img/ico_info.gif);
  260. }
  261. .articleList i.pan { background-position: -20px 0; }
  262. .articleList i.cafe { background-position: -40px 0; }
  263. .articleList i.about { background-position: -60px 0; }
  264. .articleList i.blog { background-position: -80px 0; }
  265. .menuList i {
  266. width: 14px;
  267. height: 14px;
  268. background: url(../img/ico_pan.gif);
  269. }
  270. .menuList i.yen { background-position: -25px 0; }
  271. .menuList i.time { background-position: -25px -20px; }
  272. .menuList i.set { background-position: -25px -40px; }
  273. /* :::::: gallery ::::::
  274. * #gallery内の指定
  275. */
  276. #gallery {
  277. float: right;
  278. width: 700px;
  279. height: 320px;
  280. margin: 20px 0 40px;
  281. background: url(../img/bg_gallery.jpg);
  282. }
  283. #slider {
  284. position: relative;
  285. padding: 10px 0;
  286. }
  287. #slider .slideFrame {
  288. position: relative;
  289. height: 280px;
  290. overflow: hidden;
  291. margin-bottom: 10px;
  292. }
  293. /* slide images */
  294. #slider .slideFrame ul {
  295. position: absolute;
  296. top: 0;
  297. left: 0;
  298. width: 1620px;
  299. margin: 0;
  300. }
  301. #slider .slideFrame ul li {
  302. float: left;
  303. width: 520px;
  304. margin-right: 20px;
  305. }
  306. #slider .slideFrame ul li:last-child {
  307. margin-right: 0;
  308. }
  309. #slider .slideFrame ul li a {
  310. background: none;
  311. }
  312. /* slider items */
  313. #slider ul li,
  314. #slider ul li a,
  315. #slider p,
  316. #slider p a {
  317. background: url(../img/gallery_item.png);
  318. }
  319. /* gallery list button */
  320. #slider ul.nav {
  321. width: 62px;
  322. margin: 0 auto;
  323. padding: 0;
  324. }
  325. #slider ul.nav li {
  326. float: left;
  327. margin-right: 16px;
  328. background-position: -260px 0;
  329. }
  330. #slider ul.nav li:last-child {
  331. margin-right: 0;
  332. }
  333. #slider ul.nav li a {
  334. display: block;
  335. width: 10px;
  336. height: 10px;
  337. background-position: -260px -20px;
  338. }
  339. #slider ul.nav li a:hover { opacity: 0; }
  340. /* slider arrow button */
  341. #slider p {
  342. position: absolute;
  343. top: 0;
  344. margin: 0;
  345. width: 110px;
  346. height: 320px;
  347. cursor: pointer;
  348. }
  349. #slider p.prev {
  350. left: 0;
  351. }
  352. #slider p.next {
  353. right: 0;
  354. background-position: -110px 0;
  355. }
  356. #slider p a {
  357. display: block;
  358. width: 26px;
  359. height: 26px;
  360. margin: 140px 0 0 40px;
  361. background-position: -230px 0;
  362. }
  363. #slider p:hover a {
  364. margin: 140px 0 0 32px;
  365. }
  366. #slider p.next a {
  367. margin-left: 44px;
  368. background-position: -230px -30px;
  369. }
  370. #slider p.next:hover a {
  371. margin-left: 52px;
  372. }
  373. /* :::::: main ::::::
  374. * main内の指定。
  375. */
  376. #main {
  377. float: right;
  378. width: 690px;
  379. }
  380. section#info,
  381. section#twitter {
  382. float: left;
  383. width: 330px;
  384. margin-bottom: 30px;
  385. }
  386. section#twitter {
  387. float: right;
  388. }
  389. #info .frame,
  390. #twitter .twtr-widget {
  391. margin-bottom: 10px;
  392. }
  393. #main #info .frame {
  394. height: 200px;
  395. overflow: hidden;
  396. }
  397. /* twitter widget */
  398. /* facebook like box */
  399. section#facebook {
  400. clear: both;
  401. }
  402. #facebook .frame {
  403. overflow: hidden;
  404. width: 680px;
  405. height: 180px;
  406. margin: 0 5px;
  407. }
  408. /* :::::: article list ::::::
  409. * 日付+サムネイル+タイトル+概要文のフォーマット。
  410. */
  411. dl.articleList {
  412. margin: 0 0 10px;
  413. padding: 0 10px 12px;
  414. border-bottom: 1px #eee solid;
  415. }
  416. dl.articleList dt {
  417. margin-bottom: 5px;
  418. color: #aaa;
  419. font-size: 12px;
  420. line-height: 1.5;
  421. }
  422. dl.articleList dd {
  423. margin: 0;
  424. font-size: 12px;
  425. line-height: 140%;
  426. }
  427. dl.articleList dd.img {
  428. float: left;
  429. margin-right: 12px;
  430. }
  431. dl.articleList dd.ttl {
  432. height: 1.6em;
  433. overflow: hidden;
  434. text-overflow: ellipsis;
  435. -webkit-text-overflow: ellipsis;
  436. -o-text-overflow: ellipsis;
  437. margin-bottom: 3px;
  438. }
  439. dl.articleList dd.ttl a {
  440. padding-left: 18px;
  441. font-size: 14px;
  442. background: url(../img/ico_arrow_link.gif) left center no-repeat;
  443. }
  444. /* :::::: side ::::::
  445. * #side内の指定。
  446. */
  447. #side {
  448. float: left;
  449. width: 220px;
  450. padding: 20px 0;
  451. box-shadow: 0 0 3px rgba(0,0,0,0.2);
  452. background: white url(../img/bg_side_top.gif) repeat-x;
  453. }
  454. #side h2 {
  455. margin-bottom: 15px;
  456. }
  457. /* :::::: menu list ::::::
  458. * パン名+パン画像+パン情報(値段とか)のフォーマット。
  459. */
  460. dl.menuList {
  461. margin: 0 20px 20px 20px;
  462. color: #6d4d38;
  463. font-size: 14px;
  464. font-weight: bold;
  465. line-height: 1;
  466. }
  467. dl.menuList dt {
  468. margin: 0 0 10px;
  469. padding-left: 18px;
  470. background: url(../img/list.gif) left center no-repeat;
  471. }
  472. #side dl.menuList dt {
  473. background-image: url(../img/list_pickup.gif);
  474. }
  475. dl.menuList dd {
  476. position: relative;
  477. margin: 0 0 20px;
  478. }
  479. dl.menuList dd ul {
  480. position: absolute;
  481. right: 0;
  482. bottom: 0;
  483. }
  484. dl.menuList dd ul li {
  485. float: left;
  486. margin-right: 1px;
  487. padding: 4px 8px;
  488. background: url(../img/bg_alpha_white.png);
  489. }
  490. dl.menuList dd ul li:last-child {
  491. margin-right: 0;
  492. }
  493. /* :::::: clearfix ::::::
  494. * デフォルトclearfix群。
  495. */
  496. header .inner:before, header .inner:after,
  497. footer .inner:before, footer .inner:after,
  498. #contents .inner:before, #contents .inner:after,
  499. nav ul:before, nav ul:after,
  500. #slider ul:before, #slider ul:after,
  501. dl.articleList:before, dl.articleList:after,
  502. dl.menuList dd ul:before, dl.menuList dd ul:after {
  503. content: ""; display: table;
  504. }
  505. header .inner:after,
  506. footer .inner:after,
  507. #contents .inner:after,
  508. nav ul:after,
  509. #slider ul:after,
  510. dl.articleList:after,
  511. dl.menuList dd ul:after {
  512. clear: both;
  513. }
  514. header .inner,
  515. footer .inner,
  516. #contents .inner,
  517. nav ul,
  518. #slider ul,
  519. dl.articleList,
  520. dl.menuList dd ul {
  521. *zoom: 1;
  522. }

このように、CSSを書いてはブラウザで表示確認をして、時にはCSSの都合に合わせてHTMLや画像を作り直したりしながら、ちょっとずつ仕上げていきます。
このあとブラウザチェックして、Javascriptで動的な処理を加えて、Twitterいれて、Facebookを入れれば、本格的に完成なんですが、その話はまた今度。X)

目次に戻る

あとがき

最後まで読んでいただき、ありがとうございます!
アレもコレもと書いていったら、すんごく長ったらしくなってしまいました…。なのでここではあくまでHTML+CSSのみの記事にして、完成は次回に持ち越します。すみません。
一応、「Lopan cafe」のサイトはここにあります。ご存知の通りまだトップページのみで、他のディレクトリはからっぽです。時々書き足したり直したりして、日々進化していくつもりなので、たまに覗いてやってください。

前回同様、ここで紹介したのは、僕の個人的なやり方なので、たぶん世の中にはもっと賢く、効率的な制作手順や、テクニックがあるはずです。
「こうすればそんな面倒な事しなくてもいいのに」とか「それは普通こうするよ」というのがありましたら、ぜひ教えてください!

続きはこちら→「Webサイトの作り方のまとめ!トップページ完成まで。

Comment & Pingback

6 Comments! for Webサイトの作り方のまとめ!コーディングまで。

  1. ぷい

    デザインをやっていて、コーディングができないwebデザイナーです。
    独学でやってきたので、お恥ずかしながらコーディングのルールをあまり理解しないまま作っていました。。(;´Д`)
    「なんでデザイン通りにコーディングしてくれないんだろう?」と思ったりもしましたが、自分の整理されていないデザインがコーダー泣かせだったことに気づきました・・・苦笑
    特にPSDの階層をhtmlにあてはめていくプロセスには目からウロコでした。
    コードが書けなくても、これなら自分にもできる!と思いました!
    サイト制作の一連の流れがとてもわかりやすく、ディレクターやコーダーがどんな事を考えて作っているのかよくわかりました!
    こちらのサイトにたどり着けてよかったです!
    これからも楽しみに読ませていただきます★

    Reply

    • _watercolor

      > ぷいさん
      コメントありがとうございます!
      お役に立てていただけて嬉しいですー;D。

      たしかに、コーディングのことが分かってるのと分かってないのとでは
      デザインの仕方が変わってきちゃいますよね。
      なるべく統一しちゃいたいのがコーダーさんのデザインかもしれません。

      ちょっとズラしてみたり、敢えてバランスを崩してみたりっていうのも、
      こだわりがあってそうしてるのであれば、
      コーダーさんに伝えれば、ちゃんとその通りにコーディングしてくれると思いますよ;)!

      Webデザイン、楽しくがんばりましょーねー:D。

      Reply

  2. RUSIE

    とても見やすく、かつ理に適っていて参考、いやそれ以上に影響されました。
    顰に倣って活用させて頂きます、これからも更新楽しみにしております!

    Reply

    • _watercolor

      ありがとうございます、非常に嬉しいです!なんだか自信がつきましたXD。
      「Lopan cafe」完成まで見守っていただけたら嬉しいです。
      今後ともお楽しみに!

      Reply

  3. ゆう

    早速ありがとうございます!読みごたえ十分ですね。
    前記事とあわせ、あとからじっくり拝見させていただきます。

    Reply

    • _watercolor

      ありがとうございます!
      「まとめ」と言いながら全然まとまってなくてすみません…X(。
      独りよがりの記事になっちゃってるのであまり汎用的でないかもしれませんが、
      「Lopan cafeができるまで」というニュアンスで読んでいただけると嬉しいですX)。

      Reply

コメントを残す