July 20181 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

デザイン | マークアップその2

JUGEMテーマ:写真


【WEBデザイン】

続きまして、メインエリアのマークアップです。

この段階でのページを見るとサイトの全容が見えてきます。
ホームページが見栄え良くするためにはここから
CSSで装飾に映っていくのですが、
実際本当に読んでもらいたいものというのは
この内容のみという事もわかるかと思います。

今回はヘッダー領域の下にくるコンテンツ部分のマークアップです。

<div id="wrapper">
<div class="content">
<img src="images/top_l_img.jpg" width="117" height="400" alt="写真が大好きで立ち上げたサイトです。「写真」の「家」という意味でつけた名前。ゆったりまったり更新していきますので、よかったら楽しんでくださいね。" />
<img src="diary/images/2011-02/18.jpg" width="650" height="400" alt="" />
</div>
<!--END content-->
<div class="content">
<div class="content_l">
<h2><img src="images/top_h_site.jpg" width="435" height="40" alt="サイトマップ" title="サイトマップ" /></h2>
<ul>
<li>■<a href="index.html">TOP</a>…トップページへ</li>
<li>■<a href="about/index.html">About</a>…サイト、管理人の紹介</li>
<li>■<a href="diary/index.html">Diary&amp;Blog</a>…日々の日記</li>
<li>■<a href="photo/index.html">Photoraph</a>…写真</li>
<li>■<a href="life_hobby/index.html">Life&Hobby</a>…趣味と生活</li>
</ul>
<img src="images/top_img_site.jpg" width="248" height="108" alt="" />
</div>
<!--END content_l-->
<div class="content_r">
<h2><img src="images/top_h_news.jpg" width="291" height="40" alt="最新情報" title="最新情報" /></h2>
<ul>
<li>2011.05.01 ホームページリニューアルしました。</li>
<li>2011.05.01 ホームページリニューアルしました。</li>
<li>2011.05.01 ホームページリニューアルしました。</li>
<li>2011.05.01 ホームページリニューアルしました。</li>
<li>2011.05.01 ホームページリニューアルしました。</li>
</ul>
</div>
<!--END content_r-->
</div>
<!--END content-->
</div>
<!--END wrapper-->

まずは「wrapper」で全体を囲みます。
その後は、メインの部分になる「content」。
さらにはcontentを左右に分ける領域「content_l、content_r」。

この段階で、すでにどのようにCSSで装飾をするのか
考えながら組み立てていきます。

名前の前にあるidclass

idはページ内に1つのみしか名前をつけられず、
classは何個でもつけられます。

初心者の頃はこの違いの意味がよくわからず
なんでもclassつければいいや〜とか
idとか適当につけちゃえ〜っと制作しておりました(汗

実はこの2つはとっても大切な要素で、最初の組み立てを考えて
つけてあげれば、後にCSSを修整する際にとても便利です。

idはページに1個しかつけられないので
CSSでidwrapperのなかにあるliタグの色を「ピンク(#F9C)」にしたいですよ。
っと言ってあげると↓

#wrapper li { color: #F9C;}

上記のサイトマップと最新情報の文字の部分が一気に「ピンク(#F9C)」に変身!
でも、下の記事で書いているグローバルナビの中のliは色が変わらず
クールに元の色を保っていられるわけです。

逆に全部のliをピンクにしたかったら


li { color: #F9C;}

こんな風にliタグにCSSをつけてあげます。

classはページによく出てくるBOXの基本はつけてあげて
idはページに一度しか出てこないBOXにつけるようにすれば
CSSで装飾するのに、部分ごと設定できるのでマークアップを
よく考えてというのも、頷いて貰えるかな〜っと思います。

続いて…

ヘッダーの部分で見出しの1(h1)をつけているので
こちらにはh2をつけます。
こちらもh1同様にtitleも記述しています。
本家サイトを見て頂けると分かるのですが、実際の見出しは英語で
記述していますが、SEOやアクセシビリティを考えてaltとtitleは日本語で書いています。
ちなみにもっとSEOを考える場合は、画像の見出しではなく
背景でデザイン要素を入れても文字はテキストベースで行います。

実際にSEOで効果のあるといわれる「サイトマップ」については
別のページで設ける事が仕事では多いのですが、今回は
趣味サイトというのもあるので、トップページにもってきました。
サイトマップへのリンクがヘッダー部分にあると、サイトのいたる所を
ロボットが行ってくれるようになるので良いと言われてはいますが
そのあたりも、微妙です(汗

そんなこんなで、ある程度のマークアップが出来たら必ず
文書のチェックとして「HTML_lint」を通して「よくできました」マークが
出るまで修正をかけます。
WEBデザイナーとして仕事をしている人もこれで最後まで
チェックをしていないという方も多いです(汗
根本的な間違いでお客様に納品は申し訳ないですし
チェッカーに通すと自分自身が勉強になるので
ぜひ、皆さんに試して頂きたいです。

**********

現在本家サイトリニューアル中↓


■micchi
静岡在住のwebデザイナー。
他にAtelier*Spoonにて写真教室など
しております。
コーギーのアフロと幸せな
毎日を送っております。
■好きな物
・お菓子作り
・写真撮影
・STUDIO M'の食器
・MATEUSの食器

selected entries

categories

archives

recent comment

link

search this site.

others