Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]

HTML/CSSワークショップ#1 パンくずリストを作ろう　前半

製作者 @north

Concept

Webサイトを基本パーツの組み合わせと捉え、基本パーツのそれぞれを実際に作れるようになることでHTML/CSSの基礎を身に付ける。1つのパーツから多くの事項を学べるよう設計。また応用の幅も広くとる。→たくさん作って習得

TimeAbout 30min / 1 part

Preparation

好きなエディタがある方 -> 好きにお使い下さい

初めての方 -> Sublime Textがおすすめ

「パンくずリスト」#とは

「パンくずリスト」#とは

TO DO

パンくずリスト　基本編

パンくずリストとユーザビリティ

パンくずリスト　応用編 (次回)

パンくずリスト　基本編

最悪こう書けば良い

<p><a href=“/“>ホーム</a> > <a href=“/pc”>パソコン</a>

> <a href=“/pc/monitor”>液晶モニタ・液晶ディスプレイ</a>

> <a href=“/pc/monitor/iodata”>IODATA(アイ・オー・データ)</a> > LCD-MF234XNR [23インチブラック] </p>

* [>]はhtmlで打つときは>とするほうが良い。

* 見づらい

アイディア

<ul> <li><a href=“/“>ホーム</a> > </li>

<li><a href=“/pc”>パソコン</a> > </li>

<li><a href=“/pc/monitor”>液晶モニタ・液晶ディスプレイ</a> > </li>

<li><a href=“/pc/monitor/iodata”>IODATA(アイ・オー・データ)</a> ></li>

<li>LCD-MF234XNR [23インチブラック] </li>

</ul>

コッチのほうが見やすい。

目標

ホーム > パソコン > 液晶モニタ・液晶ディスプレイ > IODATA(アイ・オー・データ) > LCD-MF234XNR [23インチブラック]

現実

• ホーム >

• パソコン >

• 液晶モニタ・液晶ディスプレイ >

• IODATA(アイ・オー・データ) >

• LCD-MF234XNR [23インチブラック]

残念

目標

• ホーム >

• パソコン >

• 液晶モニタ・液晶ディスプレイ >

• IODATA(アイ・オー・データ) >

• LCD-MF234XNR [23インチブラック]

ホーム > パソコン > 液晶モニタ・液晶ディスプレイ > IODATA(アイ・オー・データ) > LCD-MF234XNR [23インチブラック]

▼ CSS

Steps

Step1　行頭の●を消す

Step2　一列にする

Step3　スペースを整える

Step4　最後だけ太字

Step5　変なスペースを消す・その後にパラグラフを入力

Step1　行頭の●を消す

body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; }

Step2　一列にする

body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; } !li{ float: left; }

Step3　スペースを整える

body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; } !li{ float: left; margin-right: 10px; }

Step4　最後だけ太字

body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; } !li{ float: left; margin-right: 10px; } !li:last-child{ font-weight: bold; }


body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; margin: 0; padding: 0; } !li{ float: left; margin-right: 10px; } !li:last-child{ font-weight: bold; }


body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; margin: 0; padding: 0; } !li{ float: left; margin-right: 10px; } !li:last-child{ font-weight: bold; }

<!doctype html> … パンくずリストのテスト</h1>

!<p>…</p> !<ul> … </ul> !<p>ここにいろいろ書いてみる</p>

CSS HTML


body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; margin: 0; padding: 0; } !li{ float: left; margin-right: 10px; } !li:last-child{ font-weight: bold; } !.clear{ clear: both; }

<!doctype html> … パンくずリストのテスト</h1>

!<p>…</p> !<ul> … </ul> !<div class="clear"></div> <p>ここにいろいろ書いてみる</p>

CSS HTML


［パス］そのページにどういう経路でたどり着いたのか

［階層］そのページがウェブサイトの階層構造のどこに位置しているか

［属性］そのページがどんな属性で分類されているか

パンくずリストは何のために存在する？

→ユーザビリティ（情報の整理性）の向上


表現できるのは垂直方向の関係のみで、水平方向は表現できない

何でもかんでも使えばいいってもんじゃない

フォルダA

フォルダB

フォルダC フォルダD

フォルダA > フォルダB > フォルダCフォルダD（水平）との関係は表現できない


ちなみに水平方向の表現例ーカテゴリ


表現できるのは垂直方向の関係のみで、水平方向は表現できない

何でもかんでも使えばいいってもんじゃない

フォルダA

フォルダB

フォルダC フォルダD

フォルダA > フォルダB > フォルダCフォルダD（水平）との関係は表現できない


身近にやっちまってる例


これから勉強するパーツは「何のために」あるのかを勉強し

適切かどうか考えてWebページ制作をしていくことが重要。

今日やったこと

モノを横に並べる　→　ul,li要素でfloatを使う

liの各リストはmarginで間隔を調整できる

最後の要素　→　li:last-child

floatはclearしないと継続する、clearタグをつくっておく。

これを使えばユーザビリティの向上となる万能薬ではない

重要なこと

ulのインデントはpadding,margin: 0で消える

細かいこと

次回　パンくずリスト応用編

次回　パンくずリスト応用編

引用したページなど

LCD-MF234XNR [23インチブラック] 価格比較ー価格.com (アクセス日：2015/02/16)

http://kakaku.com/item/K0000313430/

!嘱託員募集-熊本市ホームページ　(アクセス日：2015/02/16)

http://www.city.kumamoto.jp/hpkiji/pub/detail.aspx?c_id=5&type=top&id=7986

!LIG BLOG-LIG株式会社　(アクセス日：2015/02/16)

http://liginc.co.jp/

!FM-JAGA-株式会社エフエム帯広　(アクセス日：2015/02/16)

http://jaga.fm/

スクリーンショット

パンくずリスト-Wikipedia　(アクセス日：2015/02/16)

http://ja.wikipedia.org/wiki/パンくずリスト

参考文献とか

http://kakaku.com/item/K0000313430/

http://liginc.co.jp/

http://jaga.fm/

http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88

Design

Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]