教材通りに進めると今日は「デザインカンプからの画像書き出し」という勉強なんですが、まだあまり画像編集ソフトなどを詳しく勉強していないため、読み進めてみたもののピンと来ない点が多く、またWEB製作で有効なソフトとして「PHOTO SHOP」「Dreamweaver」を挙げていて説明しているのですが、今使っているPCにそれらのソフトも無いのでこの部分は飛ばして次の項の勉強を先に進めようと思います。画像加工ソフトに関しては、「GINP」というフリーソフトが高性能で使えるようなので、とりあえずはそれを勉強しておきたいと思います。
div要素によるコンテンツのブロック化
●さまざまなレイアウトパターンに対応する為のブロック化
XHTMLで定義されている要素で指定しきれないまとまりをグループ化することは、Webページの構造をよりわかりやすく伝える手助けになる。
汎用的な（いわばなんにでも使える）div要素にIDやクラスを与えておくことで、その範囲を手がかりに特定の場所だけスタイルを適用できるようになる。
たとえば上から下に積み上げるようにコンテンツが並ぶシンプルなデザインだったとして、そういう場合でも構造をグループかしておくことによって、あらゆるレイアウトに対応（ひとつのXHTMLを簡単に3カラムや2カラム、１カラムレイアウトへ切替えることも）できるようになる。
特にブログでは、トップページで「2カラムで、サイドバーには最新記事一覧を置くレイアウト」を、個別記事ページでは「記事本文に集中できるよう段組みなしで1カラムのレイアウトを」というように、ひとつのサイトのなかで柔軟なレイアウト変更が求められることがある。どのようなサイトでも設計の際には常に構造のグループ化を意識しておく。
CSS2.1においては、ひとつの要素に対して複数の背景画像を指定することができない。ボックスを角丸にしたい場合、ひとつの背景画像では内容量やフォントサイズの変更による高さの拡張に対応できない。複数の背景画像を組み合わせることになり、新たな要素が必要になる。
幅固定の角丸デザインを実現する場合、見出しとコンテンツのまとまりをdiv要素でまとめて背景を水色で塗りつぶし、h2要素の角丸上端を含む見出し画像を含め、ul要素に角丸下端用の背景画像を設置することで角丸ボックスを実現。
XHTML
<html>
<head>
<title>角丸例</title>
<link rel="stylesheet" type="text/css" href="kadomaru.css" />
</head>
<body>
<div class="section">
<h2><p>Contents</p></h2>
<ul>
<li><a href="">会社概要</a></li>
<li><a href="">ブログ</a></li>
<li><a href="">ラボ</a></li>
<li><a href="">お問い合わせ</a></li>
</ul>
</div>
</body>
</html>
CSS
div.section {
color:#4682B4;
background-color:#c0d5df;
width: 200px;
}
div.section li{
list-styｌe: none;
list-style-image: url(mark.png);
}
div.section li a {
font-weight: bold;
color: #4682B4;
}
div.section ul {
background: url(list.png) no-repeat left bottom;
padding: 0 0 1em 2em;
}
div.section h2 {
font-size: large;
background: url(list1.png) no-repeat left top;
}
div.section h2 p {
padding: 8px 0 8px 55px;
border-bottom:dotted 2px white;
}
幅を可変にするには、左上、右上、左下、右下の四隅の丸角画像が必要になるため、div要素を追加する必要がでてくる（あるいは、角丸用javascriptライブラリを利用して実現することも可能）。
なお、Safari 3やGoogle Chrome、Firefox 3では、CSS3で追加予定の border-radiusプロパティ（角丸）を先行実装している。
Safari 3とGoogle Chromeでは「-webkit-border-radius:8px;」、Firefox 3では「-moz-border-radius:8px;」と指定することで、ボックスの四隅が半径8pxの丸角になる。
 |
| Firefoxのデベロッパーツールで「-moz-border-radius: 8px;」を入力して角丸確認 |
他のブラウザでは丸角にならないのと、このようなCSS3追加予定のプロパティを利用すると、CSSのバリデーションを行ったときエラーになるため、気をつける。
今日はここまで。
0 件のコメント:
コメントを投稿