2014-10-05

無料素材

定義

例
授業内５時間で画像制作からコーディングまで
全体は、#conatiner幅「980px」
ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する
横幅「140px」ピクセルのナビゲーションボタンを7個作成
高さは「50px」
「トップページ TOPPAGE」「ソリューション SOLUTION」「実績紹介 ACHIEVEMENT」「パートナー PARTNERS」「カスタマー CUSTOMERS」「会社概要 COMPANY」「お問い合わせ CONTACT」
キャッチコピー「あなたにとって最高のパートナーであるために。」
色彩計画「基調色、強調色、アソートカラー」の３色は、事前に決定する
大見出し、中見出しは画像にする
ページ遷移のための「矢印アイコン」は作成する
フッター部にもグローバルナビと同様のテキストリンクを作成する
テキストリンクは、すべて擬似クラスを設定する

見出し、ナビボタン、ロゴなどはオリジナルに変更可
ナビボタン以外は、以下の画像を利用可

サンプルスタイルシートカンパニー

    トップページ
    ソリューション
    実績紹介
    パートナー
    カスタマー
    会社概要
    お問い合わせ

あなたにとっての最高のパートナーであるために
弊社について
スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。

サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。

ソリューションへ
ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。

100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。

実績紹介へ
ニュースリリース

2014年9月16日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2014年9月16日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2014年9月16日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2014年9月16日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2014年9月16日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。

Copyright © Sample Stylesheet Company All Rights Reserved.

フレーム指定

id名は、レイアウト
class名は、記事のまとまり
ビルボード画像は、h2の背景で読み込むため、h2も含めた#contentを設定しました

<body>
<divid="container">

<divid="header">

<ulid="nav">

</ul>
</div><!-- /#header -->

<divid="content">

<divid="wrapper">

<divid="about">

<divclass="section">

</div><!-- /.section -->
<divclass="section">

</div><!-- /.section -->
</div><!-- /#about -->

<divid="sidebar">
<divid="news">

</div><!-- /#news -->
</div><!-- /#sidebar -->

</div><!-- /#wrapper -->

</div><!-- /#content -->

</div><!-- /#cotainer -->

<divid="footer">

</div><!-- /#footer -->

</body>

ボタンを作る

横幅800pxピクセルのナビゲーションボタンを作成するので、幅960pxを設定

ピクセルプレビュー

ピクセルプレビューにチェック

長方形を描画

CS6・CCの場合

線の位置を内側にする（書き出しが、800pxからずれない）

グラデーションを適用

文字を入力

プロポーショナルメトリクスにチェックをし、文字を詰める

文字を160pxの長方形の中央に中央揃えで配置する
160pxずつ移動コピーを作る

このコピーの文字の部分のみを、800px位置にそろえて配置する

文字を打ち変える

左端に重ねて１pxの線を描き、160pxずつ移動コピーする

a:hover用の画像を作る

間を10px空けるため、70px移動コピー

長方形を上に描き、それぞれ色を変更する

Web用に保存

アートサイズでクリップのチェックを外す

アートボードに必要なものだけある場合
グラデーションが含まれるので、JPEGで保存

Photoshopで確認する

幅800px、高さ130pxであれば完成

文書構造

body内のツリー構造を明示化する
今回は、複雑にならないように背景画像はh2のみとしている

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>課題：企業系サイト</title>
<linkrel="stylesheet"href="css/style.css">
<body>
<divid="container">

<divid="header">
<h1id="logo"><imgsrc="img/logo.png"alt="サンプルスタイルシートカンパニー"></h1>
<ulid="nav">
<liid="top"><ahref="#"class="this">トップページ</a></li>
<liid="sol"><ahref="#">ソリューション</a></li>
<liid="ach"><ahref="#">実績紹介</a></li>
<liid="par"><ahref="#">パートナー</a></li>
<liid="cus"><ahref="#">カスタマー</a></li>
<liid="com"><ahref="#">会社概要</a></li>
<liid="con"><ahref="#">お問い合わせ</a></li>
</ul>
</div><!-- /#header -->

<divid="content">
<h2id="billbord">あなたにとって 最高のパートナー であるために。</h2>

<divid="wrapper">

<divid="about">
<h3><imgsrc="img/h2a.png"alt="弊社について"></h3>
<divclass="section">
<h4><imgsrc="img/h3a.png"alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。"></h4>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<pclass="link"><ahref="#">ソリューションへ</a></p>
</div><!-- /.section -->
<divclass="section">
<h4><imgsrc="img/h3b.png"alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。"></h4>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<pclass="link"><ahref="#">実績紹介へ</a></p>
</div><!-- /.section -->
</div><!-- /#about -->

<divid="sidebar">
<divid="news">
<h3><imgsrc="img/h2b.png"alt="ニュースリリース"></h3>
<dl>
<dt><ahref="#">2014年7月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><ahref="#">2014年7月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><ahref="#">2014年7月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><ahref="#">2014年7月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><ahref="#">2014年7月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</div><!-- /#news -->
</div><!-- /#sidebar -->

</div><!-- /#wrapper -->

</div><!-- /#content -->

</div><!-- /#cotainer -->

<divid="footer">
<p>Copyright &copy; Sample Stylesheet Company All Rights Reserved.</p>
<ulclass="nav">
<li><ahref="#">トップページ</a></li>
<li><ahref="#">ソリューション</a></li>
<li><ahref="#">実績紹介</a></li>
<li><ahref="#">パートナー</a></li>
<li><ahref="#">カスタマー</a></li>
<li><ahref="#">会社概要</a></li>
<liclass="last"><ahref="#">お問い合わせ</a></li>
</ul>
</div><!-- /#footer -->

</body>
</html>

CSSの考え方記述の手順

ブラウザの持っている値をなしにする
特に文字がもつ上下の空きを、０にする
リストの黒丸を消してレイアウトしやすくする
リンク要素である、a要素はブラウザがもつ「青色の文字とアンダーライン」を別の指定に置き換える

リセット

/* reset 
---------------------------------------------*/
html, body, div, h1, h2, h3, h4, p, ul, li, dl, dt,  dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style-type: none;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  color: #039;
  text-decoration: none;
}
a:visited {
  color: #333;
}
a:hover {
  color: #06C;
}

ボディ全体の共通項

/* body 
---------------------------------------------*/
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  line-height: 1.5;
  color: #333;
  background: #E5EDF6 url(../img/headbg.png) repeat-x left top;
}

レイアウトの設定

overflow: hidden;を記述する場所に注意が必要
できる限り無駄をそぎ落とすこと

/* layout 
---------------------------------------------*/
#container {
  width: 980px;
  margin: 0 auto;
  background: #FFF;
  overflow: hidden; /* #headerの設定をせずにposition: relativeを設定してあるため */
  position: relative;
}
#wrapper {
  width: 940px;
  padding: 20px;
  overflow: hidden;/* #aboutと#sidebarにfloatが設定してあるため */
}
#about {
  width: 610px;
  float: left;
}
#sidebar {
  width: 290px;
  float: right;
  padding: 0 0 0 20px;
  border-left: 1px dotted #999;
}
#news {
  width: 288px;
  padding-left: 1px;
}
#footer {
  height: 120px;
  color: #FFF;
  padding: 20px;
  background: #333;
}

各パーツ

ロゴ

/* logo
---------------------------------------------*/
#logo {
  position: absolute;
  left: 17px;
  top: 18px;
}

ナビゲーションボタン

/* nav
---------------------------------------------*/
#nav {
  width: 980px;
  height: 60px;
  margin-top: 73px;
}
#nav li {
  float: left;
}
#nav li a {
  width: 140px;
  height: 60px;
  display: block;
  background: #FFF url(../img/btn.png) no-repeat left top ;
  text-indent: -999em;
}
#nav li#top a:link {
  background-position: left top;
}
#nav li#top a:hover {
  background-position: left -60px;
}
#nav li#sol a:link {
  background-position: -140px top;
}
#nav li#sol a:hover {
  background-position: -140px -60px;
}
#nav li#ach a:link {
  background-position: -280px top;
}
#nav li#ach a:hover {
  background-position: -280px -60px;
}
#nav li#par a:link {
  background-position: -420px top;
}
#nav li#par a:hover {
  background-position: -420px -60px;
}
#nav li#cus a:link {
  background-position: -560px top;
}
#nav li#cus a:hover {
  background-position: -560px -60px;
}
#nav li#com a:link {
  background-position: -700px top;
}
#nav li#com a:hover {
  background-position: -700px -60px;
}
#nav li#con a:link {
  background-position: -840px top;
}
#nav li#con a:hover {
  background-position: -840px -60px;
}

コンテンツ囲み

/* content
---------------------------------------------*/
#content h2#billbord {
  width: 940px;
  height: 320px;
  margin: 10px auto 0 auto;
  background: url(../img/bill.png) no-repeat;
  text-indent: -999em;
}

弊社について（about）

/* about & news
---------------------------------------------*/
#about h3, #news h3 {
  color: #FFF;
  background: #006EB3 url(../img/h2bg.png) repeat-x left top;
}
#about .section {
  margin: 16px 18px 0 18px;
  border-bottom: 1px solid #CCC;
}
#about .section p {
  font-size: 0.9em;
  line-height: 1.5;
  margin: 10px 0;
}
#about .section p.link {
  background: url(../img/arrow.png) no-repeat left 4px ;
  padding-left: 20px;
}
#about .section .link a:link, #about .section .link a:visited {
  color: #0060FF;
}

サイドバー（news）

/* sidebar
---------------------------------------------*/
#news dl {
  margin: 16px 18px 0 18px;
}
#news dt {
  font-size: 0.875em;
  font-weight: bold;
  margin: 14px 0 6px 0;
}
#news dd {
  font-size: 0.8em;
  line-height: 1.5;
  margin: 0 0 0 1em;
}
#news dt a:link {
  color: #B42907;
}
#news dt a:visited {
  color: #C97B36;
}
#news dt a:hover {
  color: #4675B4;
}

フッター

/* footer
---------------------------------------------*/
#footer p {
  color: #CCC;
  font-size: 0.75em;
  text-align: center;
}
#footer ul.nav {
  width: 960px;
  margin: 20px auto;
  font-size: 0.8em;
  text-align: center;
}
#footer ul.nav li {
  display: inline; /* １行として横に並べる */
}
#footer ul.nav li a:link, #footer ul.nav li a:visited {
  color: #FFF;
  padding: 0 8px;
  border-right: 1px solid #FFF;
}
#footer ul.nav li.last a:link {
  border-right: none;
}
#footer ul.nav li a:hover {
  color: #FC0;
}

まとめ

@charset "UTF-8";

/* reset 
---------------------------------------------*/
html, body, div, h1, h2, h3, h4, p, ul, li, dl, dt,  dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style-type: none;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  color: #039;
  text-decoration: none;
}
a:visited {
  color: #333;
}
a:hover {
  color: #06C;
}

/* body 
---------------------------------------------*/
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  line-height: 1.5;
  color: #333;
  background: #E5EDF6 url(../img/headbg.png) repeat-x left top;
}

/* layout 
---------------------------------------------*/
#container {
  width: 980px;
  margin: 0 auto;
  background: #FFF;
  overflow: hidden; /* #headerの設定をせずにposition: relativeを設定してあるため */
  position: relative;
}
#wrapper {
  width: 940px;
  padding: 20px;
  overflow: hidden;/* #aboutと#sidebarにfloatが設定してあるため */
}
#about {
  width: 610px;
  float: left;
}
#sidebar {
  width: 290px;
  float: right;
  padding: 0 0 0 20px;
  border-left: 1px dotted #999;
}
#news {
  width: 288px;
  padding-left: 1px;
}
#footer {
  height: 120px;
  color: #FFF;
  padding: 20px;
  background: #333;
}

/* logo
---------------------------------------------*/
#logo {
  position: absolute;
  left: 17px;
  top: 18px;
}

/* nav
---------------------------------------------*/
#nav {
  width: 980px;
  height: 60px;
  margin-top: 73px;
}
#nav li {
  float: left;
}
#nav li a {
  width: 140px;
  height: 60px;
  display: block;
  background: #FFF url(../img/btn.png) no-repeat left top ;
  text-indent: -999em;
}
#nav li#top a:link {
  background-position: left top;
}
#nav li#top a:hover {
  background-position: left -60px;
}
#nav li#sol a:link {
  background-position: -140px top;
}
#nav li#sol a:hover {
  background-position: -140px -60px;
}
#nav li#ach a:link {
  background-position: -280px top;
}
#nav li#ach a:hover {
  background-position: -280px -60px;
}
#nav li#par a:link {
  background-position: -420px top;
}
#nav li#par a:hover {
  background-position: -420px -60px;
}
#nav li#cus a:link {
  background-position: -560px top;
}
#nav li#cus a:hover {
  background-position: -560px -60px;
}
#nav li#com a:link {
  background-position: -700px top;
}
#nav li#com a:hover {
  background-position: -700px -60px;
}
#nav li#con a:link {
  background-position: -840px top;
}
#nav li#con a:hover {
  background-position: -840px -60px;
}

/* content
---------------------------------------------*/
#content h2#billbord {
  width: 940px;
  height: 320px;
  margin: 10px auto 0 auto;
  background: url(../img/bill.png) no-repeat;
  text-indent: -999em;
}

/* about & news
---------------------------------------------*/
#about h3, #news h3 {
  color: #FFF;
  background: #006EB3 url(../img/h2bg.png) repeat-x left top;
}
#about .section {
  margin: 16px 18px 0 18px;
  border-bottom: 1px solid #CCC;
}
#about .section p {
  font-size: 0.9em;
  line-height: 1.5;
  margin: 10px 0;
}
#about .section p.link {
  background: url(../img/arrow.png) no-repeat left 4px ;
  padding-left: 20px;
}
#about .section .link a:link, #about .section .link a:visited {
  color: #0060FF;
}

/* sidebar
---------------------------------------------*/
#news dl {
  margin: 16px 18px 0 18px;
}
#news dt {
  font-size: 0.875em;
  font-weight: bold;
  margin: 14px 0 6px 0;
}
#news dd {
  font-size: 0.8em;
  line-height: 1.5;
  margin: 0 0 0 1em;
}
#news dt a:link {
  color: #B42907;
}
#news dt a:visited {
  color: #C97B36;
}
#news dt a:hover {
  color: #4675B4;
}

/* footer
---------------------------------------------*/
#footer p {
  color: #CCC;
  font-size: 0.75em;
  text-align: center;
}
#footer ul.nav {
  width: 960px;
  margin: 20px auto;
  font-size: 0.8em;
  text-align: center;
}
#footer ul.nav li {
  display: inline; /* １行として横に並べる */
}
#footer ul.nav li a:link, #footer ul.nav li a:visited {
  color: #FFF;
  padding: 0 8px;
  border-right: 1px solid #FFF;
}
#footer ul.nav li.last a:link {
  border-right: none;
}
#footer ul.nav li a:hover {
  color: #FC0;
}

２カラムレイアウト例（2）

以下のように表示されるよう記述しなさい

建築散歩

フンデルトヴァッサー・ハウス

ウィーンの市営住宅はこんなに元気だ！

旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。

ウィーンの旧市街を取り囲むリングシュトラッセ（環状道路）のやや外側、18～19世紀に建てられた古風で静かな街並の中を歩いて行くと、この建物が現れます。まず目に飛び込んでくるのは、赤・黄・青・白の鮮やかな色で塗り分けられた外壁。その塗り分け方は、子供の落書きのようにぐにゃぐにゃと曲がっています。窓の大きさは不揃いで、しかも屋上には金色のネギ坊主のようなタワーが生えています。
どこから見てもびっくりするような建物ですが、不思議と周囲の街並に溶け込んでいるのは、壁を覆うツタや、建物から直接生え出したように見える樹々のせいかもしれません。呆気に取られ、なんだか楽しくなってくるこの建物、実はウィーンの市営住宅なのです。

この建物を作ったのは、ウィーンの画家・建築家フンデルト・ヴァッサー（1923-2000）。親日家で、作品に「百水（hudert wasser）」「豊和」と号することもあります。西欧近代の人工的な環境の在り方に疑問を呈し、「自然は全て曲線であり、直線に神は宿らない」と唱えて、建築物や絵画における直線を否定しました。
1986年に完成したフンデルトヴァッサー・ハウスは、その理念を実現させたもので、彼にとっての最初の建築作品です。

フンデルトヴァッサー・ハウスは市営住宅なので内部の見学はできませんが、向かいのビル内にショップがあります。また、近くには彼の作品などを展示したクンスト・ハウス・ウィーンがあります。
こちらもヴァッサーによって改装された建物です。日本国内では、大阪市扇町公園に隣接するキッズプラザ大阪や、大阪市環境事業局舞洲工場（ゴミ処理場）で彼の建築物を見ることができます。

    ホーム
    バックナンバー

© The Architecture

素材

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>フンデルトヴァッサー・ハウス | 建築散歩</title>
<linkrel="stylesheet"href="css/style.css">
</head>
<body>
<divid="container">
<divid="header">
<h1>フンデルトヴァッサー・ハウス</h1>
<pclass="catch">ウィーンの市営住宅はこんなに元気だ！</p>
</div><!-- /#header -->
<divid="wrapper">
<divid="content">
<p><imgsrc="img/ph01.jpg"width="180"height="125"alt="フンデルトヴァッサー・ハウスの近景">旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。</p>
<p>ウィーンの旧市街を取り囲むリングシュトラッセ（環状道路）のやや外側、18～19世紀に建てられた古風で静かな街並の中を歩いて行くと、この建物が現れます。まず目に飛び込んでくるのは、赤・黄・青・白の鮮やかな色で塗り分けられた外壁。その塗り分け方は、子供の落書きのようにぐにゃぐにゃと曲がっています。窓の大きさは不揃いで、しかも屋上には金色のネギ坊主のようなタワーが生えています。<br>どこから見てもびっくりするような建物ですが、不思議と周囲の街並に溶け込んでいるのは、壁を覆うツタや、建物から直接生え出したように見える樹々のせいかもしれません。呆気に取られ、なんだか楽しくなってくるこの建物、実はウィーンの市営住宅なのです。</p>
<p>この建物を作ったのは、ウィーンの画家・建築家フンデルト・ヴァッサー（1923-2000）。親日家で、作品に「百水（hudert wasser）」「豊和」と号することもあります。西欧近代の人工的な環境の在り方に疑問を呈し、「自然は全て曲線であり、直線に神は宿らない」と唱えて、建築物や絵画における直線を否定しました。<br>1986年に完成したフンデルトヴァッサー・ハウスは、その理念を実現させたもので、彼にとっての最初の建築作品です。</p>
<p>フンデルトヴァッサー・ハウスは市営住宅なので内部の見学はできませんが、向かいのビル内にショップがあります。また、近くには彼の作品などを展示したクンスト・ハウス・ウィーンがあります。<br>こちらもヴァッサーによって改装された建物です。日本国内では、大阪市扇町公園に隣接するキッズプラザ大阪や、大阪市環境事業局舞洲工場（ゴミ処理場）で彼の建築物を見ることができます。</p>
</div><!-- /#content -->
<divid="nav">
<ul>
<li><ahref="#">ホーム</a></li>
<li><ahref="#">バックナンバー</a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#wrapper -->
<divid="footer">
<p><small>&copy; The Architecture</small></p>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

@charset "UTF-8";

body, div, h1, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

body {
  font-size: 15px;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.6;
  background: #FFF url(../img/bg-image.jpg) no-repeat left top;
}
#container {
  width: 630px;
  background: url(../img/bg-point.jpg) no-repeat right bottom;
}
#header {
  margin: 70px 0 0 220px;
}
#wrapper {
  width: 630px;
  overflow: hidden;
}
#content {
  float: right;
  width: 470px;
}
#nav {
  width: 140px;
  margin: 160px 0 0 20px;
}
#footer {
  clear: both;
  height: 70px;
  color: #999; 
  text-align: center;
  border-top: 1px dotted #999;
  margin-left: 150px;
}
h1 {
  font-size: 24px;
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
  font-weight: bold;
  letter-spacing: -1px;
  color: #6F3E37;
}
p.catch {
  font-size: 18px;
  color: #AD8D33;
}
p {
  line-height: 1.6;
  margin-bottom: 16px;
}
#content img {
  float: right;
  margin-left: 10px;
}
#nav li {
  line-height: 1.8;
  margin-left: 10px;
}
#nav li a {
  color: #1B92F0;
  text-decoration: underline;
}

企業系サイト：トップページ

無料素材

定義

フレーム指定

ボタンを作る

ピクセルプレビュー

長方形を描画

CS6・CCの場合

グラデーションを適用

文字を入力

a:hover用の画像を作る

Web用に保存

アートサイズでクリップのチェックを外す

Photoshopで確認する

文書構造

CSSの考え方記述の手順

リセット

ボディ全体の共通項

レイアウトの設定

各パーツ

まとめ

２カラムレイアウト例（2）