JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
ベビー服を送ろう！
�お祝いにベビー服を！ お祝に喜ばれる物はなんでしょうか？ 赤ちゃんの出産祝いには何が喜ばれるのでしょうか？ 出産祝いには何を送ればいいのか。 その中でも最近、関心が高いのは気になる出産祝い。 というのも、出産祝いには何を贈っていいか困りますよね。 色んな出産祝いがあるかとは思います。 その中でもベビー服なんかはとても気になります。 ベビー服には色んな種類がありますが、個人的に気になるのは 動物の形をした着ぐるみ。 あの着ぐるみを着てチョコチョコ動いているだけでとても可愛いく感じるのですよね！ ヌイグルミみたいな風合いと可愛らしい着ぐるみが思わず、後ろから抱きしめたくなります。 出産祝いは色んな物がありすぎて困りますが、やはり定番の商品は強いのではないかと感じます。 ベビー服、候補の中に入れてみてはいかがでしょうか？ ベビー服には男性、女性用と色んな商品がありますが、色を中性的な色にしたら
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
二段組レイアウトを三段組にする / カスタマイズ
カスタマイズ（10） 二段組レイアウトを、三段組にする方法について書きます。「わたし、二段なんかじゃ、満足できない！出来ないんだかんね!」という人はご覧ください。 お話は、次の順番で進みます。 ▲ページの先頭に戻る 段組レイアウトを変更にする前に考えること 段組レイアウトを変更するのは、けっこう面倒です。やり方を知っていても、テンプレートによっては、IEのバグなどで苦戦する可能性があります。 段組レイアウトを変更する作業に入る前に、立ち止まって考えてみてください。本当に必要でしょうか？ 検索してみたら、実は三段組レイアウトのものもあったなんてことはありませんか？ テンプレート制作者に問合せてみた方が、早くはないですか？ 他の三段組レイアウトで、背景画などを変更した方が早くないですか？ よく検討した上で、カスタマイズに取り組みましょう。だって、時間がもったいないから。 ▲ページの先頭に戻る
floatは「回り込み」ではない:てんぽ
てんぽ: floatは「回り込み」ではない CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど 「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた（float:left）なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FC2総合インフォメーション
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark