m-School (エムスクール)は、駿河台学園グループが運営する
法人向け研修トレーニングセンター、およびレンタル教室・会議室です。

2009年04月22日

CSSでドロップキャップ:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:CSSでドロップキャップ(先頭文字を大きくする)


今回は、CSSでドロップキャップを実現する方法がテーマです。

ドロップキャップとは、段落の先頭文字を大きく数行分にわたって表示し、アイキャッチ効果をねらうレイアウト手法のことをいいます。
CSSでドロップキャップ
こういうやつですね。

この先頭文字のみ、というのがポイントです。CSSではこの先頭の文字を非常に簡単に指定することができます。疑似要素first-letterを使います。これはブロック要素と併用することで、そのブロック要素の先頭の1文字目を指定することができます。
たとえば、
p:first-letter {
font-size: 3em;
}

こうすると、p要素の先頭の文字が3em、つまり3文字文のサイズになります。

あとは、先頭の文字以降が回り込んでくれればドロップキャップ完成です。回り込み、ということは、floatです。そして行の高さや2文字目との間隔、下段との間隔を微調整します。
<p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>


p {
width: 500px;
font-family: Georgia, "Times New Roman", Times, serif;
}
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}

CSSでドロップキャップ
するとこのような表示になります。ドロップキャップは古くからあるテクニックで、イメージとしては英語の書籍や新聞という感じでしょうか?なのでフォントはセリフ体がつかわれることが多いような気がします。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 10:53
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年04月13日

CSSでリストを横並びのメニューにする:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:CSSでリストを横並びのメニューにする


前回に続き、今回もリスト、<ul>と<li>を扱っていきます。

リストは項目毎に改行されます。したがって、縦方向に伸びていきます。「箇条書きなんだからあったり前じゃん」という感じかもしれませんが、これにはしっかりとしたワケがあります。

XHTMLの要素はブロック要素インライン要素に大きく分けることができ、<ul>と<li>はブロック要素に分別されます。ブロック要素は名前の通りブロック=カタマリのようなもので、文書構造を構成する役割を持っています。代表的な要素としては見出しの<h1>〜<h6>や段落の<p>がブロック要素にあたります。

そして、このブロック要素は、「前後が改行されて表示される」という大きな特徴があります。リストが項目毎に改行されるのはこのためです。

今回はこれを横並びに変えて、Webサイトのメニュー(ナビゲーション)として使おうというのが目的です。

わざわざリストを使わずに、
<div id="nav">
<a href="#">top</a>
<a href="#">info</a>
<a href="#">link</a>
</div>

これでいい…ような気もしますが、Webサイトのメニューということは、そのサイトの中身の一覧=リストということになるので、文書構造を考えると、やはり<ul>と<li>でマークアップした方がしっくりきます。
<div id="nav">
<ul>
<li><a href="#">top</a></li>
<li><a href="#">info</a></li>
<li><a href="#">link</a></li>
</ul>
</div>

この方がよいでしょう。ですがこのままでは項目毎に改行されてしまいます。デザイン上横並びで表示したい場合には不都合です。

そこで、CSSをつかってブロック要素をインライン要素に変えちゃおう!というのが今回のポイントです。(実際に変化するわけではなく表示上です。)
displayプロパティを使うと、要素の表示形式をカンタンに切り替えることができます。
#nav ul li{
display: inline;
}

たったこれだけです。すると、
displayプロパティをinlineにする
こうなります。

項目の間隔がつまりすぎていたりしますので、微調整します。
#nav {
background-color: #444;
padding: 3px;
}
#nav ul {
padding: 0px;
margin: 0px;
}
#nav ul li {
display: inline;
margin-right: 1em;
}
#nav ul li a {
font-family: "Trebuchet MS", sans-serif;
text-decoration: none;
color: #fff;

}
#nav ul li a:hover{
border-bottom: dotted 1px #fff;
}

displayプロパティをinlineにする
即席デザインですが、結果こんな感じです。

この<ul>と<li>は非常によく使われる要素で、たとえばYahoo!Japanなどでもそこら中がリストになっています。
Yahoo!Japanでリストが使われている場所
ハイライトした部分はリストが使われています。ぱっと見ただけでこれくらいあるので、もっとあると思います。たかがリスト、されどリストってかんじですね。

このdisplayプロパティを使う以外にも方法はありますが、多分この方法がわかりやすくて手っ取り早いのではないかと思います。講座では他の方法もご紹介しています。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 10:48
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年04月07日

CSSでリストをデザインする:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」を新しく連載していきます。

タイトルの通り、このコーナーでは数分でできる「ちょっとした工夫」がメインテーマです。たかが「ちょっとした工夫」でも、知っているといないとでは効率やクオリティにも大きな違いがでたりするものです。また、知ってる人にとっては定番テクニックも初心者の人には役に立つかも?ということであまりネタの選別にこだわらず、幅広く紹介していきます。

はじまりはじまり。

今回のテーマ:CSSでリストをデザインする


リスト、<ul>は箇条書きのための要素です。大きな特徴として、各リスト項目の前にブレット(マーク)がつきます。今回はこのブレットをデザインしていきます!

CSSでは、このブレットを画像にできるプロパティが用意されています。それが、list-style-imageです。

こんな風に使います。

ul li{
list-style-image: url(../list.gif);
}

この例では、各ブラウザーのデフォルトのブレットがlist.gifに置き換わります。この方法、何の間違いもない普通の方法なのですが、ちょっと不便な点があります。リスト項目の中身の文字サイズなどによっては、表示がずれてしまうことがあるのです。
list-style-imageを使った場合
こんな感じ。

そこで、list-style-imageではなく、background-imageを使っちゃおう!というのが今回のポイントです。background-imageであれば、background-positionとpaddingで自由に位置調整ができます。

ul li{
/*ブレットは邪魔なので消す*/
list-style-type: none;

/*背景画像で指定する*/
background-image: url(../list.gif);
background-positon: left center;
background-repeat: no-repeat;
padding-left: 20px;
}

background-imageを使った場合
結果こんな感じ。
ちょっとわかりづらいサンプルになってしまいましたが、中心線の位置とリストの画像の位置が先ほどよりそろっているのがわかると思います。

小技ですが、知ってるとリストがぐっと扱いやすくなるハズです。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 10:17
連載:CSS 3分コーディング | コメント(0) | トラックバック(1)