HTML5とCSS3でレスポンシブ制作するサンプルコード
Date：2014/02/07 | 
Category：HTML5での制作、これだけは外せない！
今年中旬には、正式勧告予定のHTML5。
先月には日本で認定資格が配信開始されましたし、HTML5を使ったサイトや、レスポンシブテンプレートもどんどん増えています。
そこで「ちょっと今さら人に聞けないかな」と思われる、レスポンシブWEBを制作する場合に、必要最小限となるHTML5のソースを紹介します。
画像をli(リスト)タグで並べたときの余白を消すCSS記述。
画像同士に隙間が！そんなときの処方箋。
画像を<ul>・<li>タグで並べて、いざブラウザで表示したら、左記のような隙間ができてしまった！
<ul>や<li>にも<img>にも、margin:0;とpadding:0;を効かせているし、念のため、<li>と<img>のheightも同じにしたのに、おかしい。
こんな場合に、CSSに記述すべきプロパティと値は、何なのでしょうか?
プロパティの記述順序：CSSコーディングガイドライン
さあ、今すぐルールを作ろう！
CSSプロパティの記述順序に、厳格なルールはありません。
ですが、ある程度ガイドラインを決めておいた方が、共有やメンテナンスがしやすくなります。
今日は、私が日々のタスクで使用している、ガイドライン(※CSS3は除く)を紹介しますので、ご参考ください。
CSSのテキストインデントで2行目以降の行頭を字下げする方法
例えば、
「※注意書きホニャララ・・・」
といった記述に対して、右の画像みたいに2行目以降を自動的に字下げしたいケースってありませんか？
今日は このようなケースを、text-indentプロパティを上手く使って、実現する方法を紹介したいと思います。
セレクタ/プロパティ/疑似クラス/疑似要素 CSSの基本を整理！
サイトやブログの制作に関わる方なら、普段当たりまえのように記述しているCSS(カスケードスタイルシート)。
今さら感もありますが、私自身の復習も兼ね、セレクタ・プロパティ・疑似クラス・疑似要素といった言葉の意味、その役割を整理しましょう。
※このコンテンツは、CSS2の基礎レベルのみで作成しました。CSS3関連には触れていませんのでご了承ください。
【注意】CSSのclassやidを数字始まりや数字のみで命名してしまうと、
CSSを記述しても効かない時、もしかするとclass名やid名に問題があるのかもしれません。
まず、classやidの値はアルファベットで始めなければなりません。
なので、数字から始まる（数字のみで）命名を行うと、そのスタイルは無効になります。
class=”3colmuns”といった値って、うっかり付けてしまうことがありますので ご注意を。
CSS3のbox-shadowで画像がめくれた様な影を！
↑上記↑のような画像がめくれているような影、良く見かけると思います。
さて、今日はこのようなエフェクトを作る、CSS3のbox-shadowプロパティを紹介します。
IE6 7 8でCSS3風の角丸を実現するjQuery.corner
角丸を表現するCSS3プロパティのborder-radiusは、ご存知のとおりIE8以下では使用できません。
で、IEにおいて角丸を表現する一般的な方法にPIE.htcファイルの使用があります。
しかし、これが導入しても、なかなか上手く効かない。
(※読み込みパスの指定方法や.htaccessの設定に問題があることが多いのですが・・・)
そんな時におすすめなのが、紹介するjQuery.cornerというプラグインです。
