CSSの小技の最近のブログ記事

新着情報の日付とテキストに同一のアンカーをつける方法

2011年1月15日 11:38 |

新着情報やニュースリリースなどのコンテンツは、tableタグやdlタグを利用するのが、一般的です。

定義リストを横並びにする - CSSデザインノート

ただし、以下のようなレイアウトにしようとすると、tableタグやdlタグではうまく実装できません。

問題は、日付とテキストに同一のアンカーをつけなければならないということです。

tableタグのtd要素やdlタグのdd要素はブロック要素であり、アンカーはインライン要素です。インライン要素であるアンカーの中に、ブロック要素であるtd要素やdd要素を入れることはできません。

そのため、文字の部分のみにアンカーをつけようとすると、tableタグやdlタグを使用するのはふさわしくないということになります。

もうひとつの問題は、テキスト部分が長くなったら、日付の下にテキストが回りこまずに、テキスト部分の頭をそろえないといけないということです。

ひとつの例ですが、以下のような方法があります。

(X)HTMLコード

<div id="information">
   <h2>新着情報</h2>
   <ul">
      <li><a href="index.html"><span>2011/01/20</span>新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/10</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/03</span>新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/01</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>
   </ul>
</div>

CSSコード

#information h2 {
   padding:3px;
   background:#ddd;
}

#information ul {
   margin:0;
   padding:0;
   list-style:none;
}

#information li {
   padding:15px 0 15px 7em;
   text-indent: -7em;
   border-bottom:1px solid #ddd;
}

#information li span {
   display:inline-block;
   width:7em;
   text-indent:0;
}

#information li a {
   text-decoration:none;
   color:#000;
}

#information li a:hover {
   text-decoration:underline;
   color:#AB0404;

}

ポイントとしては、text-indentを駆使することと、spanにwidthを適用するためにdisplayをinline-blockにすることです。

spanは、インライン要素なのですが、インライン要素はwidthやpadding、marginといったものを指定しても有効になりません。そこで、CSSにてdisplayプロパティの値を、文法的にはインラインでありながらも、ブロック要素的な振る舞いもできるinline-blockに変更します。

hrタグで1pxの線を引く方法

2011年1月 2日 22:09 |

hrタグは、デフォルトで使用するとデザイン的に味気ないですよね。画像を使用するのが一番見栄えのよいものになりますが、少しだけスタイリッシュにしたい場合などCSSを使用すると便利です。ここでは、1pxの線を引く方法を紹介します。

単純に、borderを使って、上線だけ1pxの線を表示すればよいのですが、IE6ではうまくいかないので、「height:1px」と「clear:both」を追加します。

CSSコード

hr {
   border:solid #000;
   border-width:1px 0 0 0;
   height:1px;/* for IE6 */
   clear:both;/* for IE6 */
}

主要のブラウザで縦スクロールバーを出す方法

2010年5月 5日 18:22 |

コンテンツ量が少なくても常に縦スクロールバーを出す方法は、昔に以下の記事を書きました。

Firefoxで常にスクロールバーを出す - CSSデザインノート

FirefoxでもOperaでもスクロールバーを出す - CSSデザインノート

これらの記事を書いてから約2年が経ち、ブラウザの実装状況も変わってきました。

2010年5月現在は、主要の最新ブラウザで、以下の記述で、コンテンツ量が少なくても常に縦スクロールバーを出すことができます。

CSSコード

html {
   overflow-y:scroll;
}

最新のブラウザならCSS3の草案を取り入れているようですね。

また、以前は有効であったhtmlの高さを100%にし、マージンを1px空けて、縦スクロールバーを出す方法はFirefox3.6.3では効かなくなっていたので注意です。今のところ他のブラウザ（safari、Opera、Chome）には有効のようです。

CSSコード

html {
   height:100%;
   margin-bottom:1px;
}

word-breakプロパティとword-wrapプロパティの違い

2010年5月 5日 15:20 |

前回の記事で改行の方法を指定する「word-wrapプロパティ」について述べました。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

もうひとつ、改行の方法を指定するプロパティに「word-breakプロパティ」というのがあります。

word-breakプロパティとは？

word-breakプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。例えば、表示範囲に合わせて改行するか、あるいは単語の切れ目で改行するかなどです。

値には、narmal、keep-all、break-allの３種類があり、意味は以下のとおりです。

normal
日本語は表示範囲で単語の途中でも改行されるが、英語は単語の切れ目で改行される。
keep-all
全ての言語で単語の途中で改行せず、単語の切れ目で改行される。
break-all
全ての言語で単語の途中でも改行される。

ただ、各ブラウザで動作が若干異なります。例えば、keep-allは、IE6や7では、そのとおりの動作をするのですが、他のブラウザでは日本語は表示範囲に合わせて単語の途中でも改行されます。

word-breakプロパティの実装状況

サンプル

各ブラウザで確認してみてください。

表にしてみました。

ブラウザ/値narmalkeep-allbreak-all
Firefox 3.6.3○××
Safari 4.0.5○○○
Google Chome 4.1○○○
Opera 10.51○××
IE6○○○
IE7○○○
IE8○××

基本的に、値がnarmalの場合はどのブラウザでも同じ動作をします。

しかし、値がkeep-allの場合、Safari、Chomeは、日本語は表示範囲に合わせて単語の途中でも改行され、英語は単語の切れ目で改行されます。一方、IE6と7は、日本語も英語も単語の切れ目で改行されます。

また、値がkeep-allの場合、Safari、Chomeは禁則処理が無効になるのに対し、IE6と7では禁則処理は有効のままです。禁則処理に関しては、以下の記事で説明しています。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

また、IE6、7で使えたword-breakプロパティがIE8で使えなくなっているのは、改行の方法をword-wrapプロパティのみにしたということでしょうか？

word-breakプロパティとword-wrapプロパティの「break-all」の違い

word-breakプロパティにもword-wrapプロパティにも「break-all」という強制的に改行する値を指定できるのですが、この違いは何なのでしょうか。

IEやSafari、Google Chomeはどちらのプロパティの「break-all」も使えるのですが、その差を見てみると、日本語に違いはありませんが、英語のショートセンテンスにおいて、 word-breakプロパティは単語の途中でも強制的に改行してしまいますが、word-wrapプロパティは単語の後の半角スペースで改行してくれるようです。

word-wrapプロパティは最新のブラウザならほどんど使える事、また、英単語の途中で強制的に改行しないことを考えると、word-wrapプロパティを使うのが望ましいと言う事ですね。

それにしても、似たようなプロパティがあるというのもとても変ですね。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効

2010年5月 5日 10:42 |

最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker

という記事を見て、おお！全てのブラウザでword-wrap:break-word;が有効なのか！と嬉々としました。特に、お問い合わせフォームなどで、英数字が強制改行されないとレイアウトが崩れる原因になって、よくプログラム側で制御していたので、これは嬉しい。

word-wrapプロパティとは？

まず、word-wrapプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。単語の途中で改行するかどうかを指定します。

word-wrapプロパティは確かIEが独自先行で実装してたと思ったのですが、CSS3で草案されていて、主要の最新のブラウザで実装されているようですね。

値には、narmal、break-allの２種類があり、意味は以下のとおりです。

normal
英単語の途中で改行しない。表示範囲をはみ出す場合は表示範囲を拡張する。日本語は表示範囲に合わせて強制的に単語の途中でも改行する。
break-all
日本語も英語も表示範囲からはみ出す場合は強制的に単語の途中でも改行する。

サンプル

朝起きると体がだるく感じた。とりあえず起きてみたものの、段々気分が悪くなってきた。熱を測ってみると39度7分もあった。「Oh, my God!」と僕はふざけて天を仰いだ。今日はどうしても外せない用事があるのだ。 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789@com.abcdefghijklmnopqrstuvwxyz0123456789@com. abcdefghijklmnopqrstuvw-xyz0123-456789@com.abcdefghijklmnop/qrst/uvwxyz0123456789@com.abcdefghijklm_nopqrstuvwxyz0123456789@com.

ハイフンとかスラッシュがある場合は、場所によってはそこで強制的に改行するみたいです。

禁則処理

文字のレイアウトで重要なのは、禁則処理です。禁則処理とは、例えば日本語で言えば、句読点が行頭にこないなど、作文を書くときによく注意された、文章を書く上での決まりごとですね。

ブラウザによってもこの禁則処理に若干の違いがあります。Safari、Chome、Operaでは、一般的な禁則処理は行われます。

しかし、firefoxでは、｢段々｣などの｢々｣が行頭にきてしまうことがあります。また、IEでは小さい｢っ｣が行頭にきてしまうことがあります。

あと、似たようなのに、word-breakプロパティというのもあります。これも同様に改行方法を指定するものなのですが、ブラウザで実装状況が異なるようです。詳しくは別の機会に。

決定版！？Clearfixのソースコードはここまで短くなった

2010年4月 5日 13:04 |

マルチカラム構造にしたときなど、ブロック要素の回り込みを解除するのに、Clearfixと呼ばれるテクニックを使用するのが便利です。ブラウザの移り変わりにより、動作対象とする古いブラウザを考慮しなくなってもよくなってきたこの頃ですので、Clearfixのソースコードも以下のようにここまでスリムになりました。

CSSコード

element{
   ⁄zoom:1;
}

element:after {
   content:'';
   display:block;
   clear:both;
}

これはNetScapeとMacのIEを考慮していないソースコードになります。｢/zoom:1;｣のようにプロパティの前にスラッシュをつけるとIE6と7だけに適用されるようです。今まで知りませんでした。

このclearfixを使う他に、単純に回り込みを解除させたい要素に｢overflow:hidden｣を適用すればよいというのもあります。印刷時に問題があるらしいのですが、印刷用のCSSを用意する場合は｢overflow:auto;｣などとしておけばよいので、結構使える技ではあります。

参考

いまどき ? いまさら ? clear fix のコード | ヨモツネット

CSS3のアニメーション機能を利用してメニューを彩る

2010年3月 6日 14:30 |

小技の効いたサイトを発見しました。

せせらぎダイニング

このサイトで、左のメニューにカーソルを合わせると英語表記のところがゆっくりと色が変化していくのがわかると思います。トランジション効果と言えばよいのでしょうか、アニメーション処理がしてあります。

このサイトの場合は、画像のロールオーバー時に、JavaScriptでアニメーション処理をしていると思うのですが、今回画像なしで似たような動作をやってみます。CSS3とそれに対応しているブラウザを使用します。残念ながら現在はSafari4.0とGoogle Chomeしか動作しないようです。

サンプル

サンプルはこちらから

動作確認

Google Chrome 4.0、Safari 4.0.4 for Windows XPです。

CSS3はまだ正式勧告されていないので、使用する場合にはプロパティの前にベンダープリフィックスと呼ばれる接頭辞をつける必要があります。SafariおよびChomeは｢-webkit-｣です。

(X)HTMLコード

<ul>
<li><a href="concept.html">コンセプト<span><br />CONCEPT</span></a></li>
<li><a href="menu1.html">メニュー<span><br />MENU</span></a></li>
<li><a href="">新着・お得情報<br /><span>NEW&EVENTS</span></a></li>
<li><a href="">お問合せ・ご予約<br /><span>CONTACT</span></a></li>
<li><a href="info.html">店舗情報・地図<br /><span>INFORMATION</span></a></li>
</ul>

CSSコード

ul {
   width:200px;
   background:#735D4A;
   margin:0;
   padding:0 10px;
}

li {
   list-style:none;
   border-bottom:#524139 1px solid;
}

li:last-child {
   border-bottom:none;
}

li a {
   display:block;
   padding:15px 0 15px 30px;
   font-family:"ＭＳ 明朝",serif;
   color:#F7F3EF;
   font-size:14px;
   text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   -moz-text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   -webkit-text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   line-height:1.4;
   letter-spacing:1px;
   background:url("bg_list.gif") 10px 50% no-repeat;
   text-decoration:none;
   outline: none;
}

li a span {
   color:#080808;
   font-family: "arial",sans-serif;
   font-size:10px;
   text-shadow:none;
   -moz-text-shadow:none;
   -webkit-text-shadow:none;
   -webkit-transition-duration:0.4s;
}

li a:hover span {
   color:#F79239;
}

｢-webkit-transition-duration:0.4s｣というのがアニメーション部分の指定になります。メニューをマウスオーバーしたときに、英語表記の部分だけが0.4秒かけて色がゆっくりと変わります。

また、CSS3のテキストにシャドーをつけれる｢text-shadow｣、親子関係の最後の子要素だけに適用する｢:last-child｣も併せて使用しています。

コンテンツ量が少なくてもデザインくずれを起こさないようにフッターを固定する

2010年2月27日 08:18 |

ホームページのデザインによっては、コンテンツ部分が少ないとフッターの下に余白ができてかっこ悪くなる場合があります。 そのような場合には、フッターを固定する事でデザインのくずれを防ぐことができます。

ポイントは｢フッター以外の要素を囲むブロック要素｣と｢フッターを囲む要素｣を作る事です。このブロック要素にpading-bottomで、フッター分の余白を設け、フッターをposition:relativeで位置を決めます。ここで重要な事はフッターの縦の大きさは固定でなければならないということです。

サンプル

当サイトで配布しているCSSテンプレート｢pub002｣をフッター固定にしてみました。

サンプルはこちらから

動作確認

Firefox3.5.8、Google Chrome 4.0、Safari 4.0.4、Opera 10.10、IE6 for Windows XPです。

(X)HTMLコード

<div id="top">
   <div id="header"></div><!-- header end -->
   <div id="contents">
      <div id="main"></div><!-- main end -->
      <div id="sub"></div><!-- sub end -->
   </div><!-- contents end -->
</div><!-- top end -->
<div id="footerWrap">
   <div id="footer">
      <div id="totop"></div>
      <div id="footerMenu"></div><!-- footerMenu end -->
   </div><!-- footer end -->
</div><!-- footerWrap end -->

CSSコード

/* ========FOOTER FIX======== */
* {
   margin:0;
}

html,
   body,
   div#top {
   height:100%;
}

body > div#top {
   height: auto;
   min-height: 100%;
}

div#contents {
   padding-bottom:150px;/* フッターの高さと同じ値にする */
}

div#footerWrap {
   position:relative;
   margin-top:-150px;/* フッターの高さと同じ値にする */
   height:150px;/* フッターの高さを指定 */
}

カーソルを合わせたメニューを強調する

2010年1月20日 22:41 |

CSS HappyLifeの平澤さんが新しいサイト「CSS HappyLife ZERO」をオープンされたのですが、そのメニュー部分がとても素敵だったので、参考に同じようなものを作ってみました。

ちなみに全くソースコードは拝見していませんので、同じようには作られてはいないと思います。

前回の記事「アクセシビリティの高いCSSロールオーバーメニュー」を参考にすれば、比較的簡単に作れそうです。

サンプル

サンプルはこちらから

動作確認

Firefox3.5.7、Google Chrome 3.0、Safari 4.0.4 for Windows XPです。IE6はhoverに対応していませんので、強調する効果は得られませんが、不具合なく表示する事はできます。Opera 10.10は正常に動作しません。なぜでしょう。「ul#menu li a」に「display:inline-block;」を追加するとちゃんと動作しました。

(X)HTMLコード

<ul id="menu">
   <li class="menu1"><a href="#" class="current"><img src="images/menu1.gif" alt="menu1" /></a></li>
   <li class="menu2"><a href="#"><img src="images/menu2.gif" alt="menu2" /></a></li>
   <li class="menu3"><a href="#"><img src="images/menu3.gif" alt="menu3" /></a></li>
   <li class="menu4"><a href="#"><img src="images/menu4.gif" alt="menu4" /></a></li>
   <li class="menu5"><a href="#"><img src="images/menu5.gif" alt="menu5" /></a></li>
</ul>

CSSコード

img {
   border:0;
}

ul#menu {
   float:left;
   margin:0;
   padding:0;
}

ul#menu:hover {
   background: url(images/bg_menu_hover.gif) no-repeat;
}

ul#menu li {
   float:left;
   margin:0;
   padding:0;
   list-style:none;
}

ul#menu li a {
   display:block;
   display:inline-block;
   width:100px;
   height:30px;
}

ul#menu li a:hover,
ul#menu li a.current {
   background-image:url(images/bg_menu_on.gif);
}

ul#menu li.menu1 a:hover,
ul#menu li.menu1 a.current {
   background-position:0 0;
}

ul#menu li.menu2 a:hover,
ul#menu li.menu2 a.current {
   background-position:-100px 0;
}

ul#menu li.menu3 a:hover,
ul#menu li.menu3 a.current {
   background-position:-200px 0;
}

ul#menu li.menu4 a:hover,
ul#menu li.menu4 a.current {
   background-position:-300px 0;
}

ul#menu li.menu5 a:hover,
ul#menu li.menu5 a.current {
   background-position:-400px 0;
}

ul#menu li img {
   position:relative;
   z-index:-1;
}

考え方としては、リスト（ul）の背景に目立たない用のリスト画像を指定し、特定のメニューにカーソルがあったときはそのメニューだけオンマウス用の画像に切り替え、他のメニューはリストの一番下に回りこませてることにより目立たない用のリスト画像が表示されるというわけです。

また、現在表示しているページのメニューも目立たせたい場合は、a要素にcurrentというクラス名をつけて、CSSのほうで個別にスタイルを指定するとよいと思います。

基本的な縦型リストの作り方

2009年12月30日 10:29 |

基本のHTMLソースコードは以下のとおりです。divでリストを囲まなくてもよいですが、メニュー部分ということがわかりやすいですし、デザインに幅が広がります。 class名は｢section｣でなくて、｢menu｣や｢submenu｣などでもよいです。

(X)HTMLコード

<div class="section">
<h2>メニュー</h2>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">最新情報</a></li>
<li><a href="#">事業内容</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /section -->

デザイン案１

ではデザインです。まずは基本ということで、リストマークを画像化、テキスト部分がアンカーになっているデザインにします。

サンプル

CSSコード

div.section {
   width:200px;
   padding:3px;
   background:#E7E7E7;
}

div.section h2 {
   margin:0;
   font-size:12px;
   color:#fff;
   line-height:3.0;
   padding:2px 5px 0px 5px;
   background:#3C3C3C;
}

div.section ul{
   margin:5px 0 0 0;
   padding:0;
   list-style:none;
}

div.section li{
   margin:0 0 0 5px;
   padding-left:10px;
   font-size:12px;
   line-height:2.0;
   border-bottom:1px solid #fff;
   background:url(bg_list.gif) 0 50% no-repeat;
}

div.section a {
   color:#5A5D00;
   text-decoration:none;
}

div.section a:hover {
   color:#7B8200;
   border-bottom:1px solid #7B8200;
}

リストマークを画像化するためには、ulでlist-style(-type)をnoneにし、liの背景画像でリストを表示するのが一般的です。リストの位置は、background-posionで指定（今回は一括指定しています。）、リストとテキストの余白はliのpadding-leftで調整します。

デザイン案２

上記の場合、アンカー領域がテキスト部分のみなので、人によってはクリックしにくい場合もあるかもしれません。そういう場合は、リスト部分をアンカー領域にしてクリックしやすくします。

サンプル

CSSコード

div.section {
   width:200px;
   padding:3px;
   background:#E7E7E7;
}

div.section h2 {
   margin:0;
   font-size:12px;
   text-align:center;
   background:#295DAD url(bg_h2.gif) 0 0;
   line-height:3.0;
   color:#fff;
}

div.section ul {
   margin:0;
   padding:0;
   list-style-type:none;
}

div.section li {
   margin:0;
   padding:0;
   font-size:12px;
   color:#333;
   padding-bottom:1px;
   background:#fff url(bg_dotline.gif) 0 100% repeat-x;
}

div.section li a {
   display:block;
   color:#7C9C2D;
   padding:10px 0 10px 20px;
   background:#fff url(bg_list.gif) 5px 50% no-repeat;
}

div.section li a:hover {
   color:#9CC23D;
   background:#fff url(bg_list.gif) 5px 50% no-repeat;
}

ポイントは、a要素を｢display:block;｣でブロック要素にすることです。そして、リストの画像をli要素ではなくa要素に指定する事です。こうすることで、リストマークのところまでクリックできるようになります。

« CSSの基本 | メインページ | アーカイブ | ヘルプ »

検索

最近のブログ記事