見栄えが良くなった！CSSやHTML５の役立つ総まとめ

• 作成：2013/10/15
• 更新：2014/11/01
• Web制作 >

先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

定番まとめ
１．勉強になるテクニック／サンプルまとめ

基本知識
２．セレクタ
３．メディア クエリ
４．コーディング規約
５．フォント
６．CSSスプライト
７．アニメーション
８．正確なHTML使用方法
９．CSSハック
１０．書き方／読み方

定番まとめ

１．勉強になるテクニック／サンプルまとめ

レイアウトを見栄え良くしたり、使いやすくするうえで使用頻度が高かったものを中心にまとめました。今までphpで処理していたことをCSSで代用出来るものもあったので非常に助かりました。

• 見出しの装飾／H1一つでここまで出来る…SQUEEZE
• 線の装飾／hr要素のデザインサンプル 12 | NxWorld
• 拡大・縮小、移動、回転／CSS3 変形処理を行う transform…CSS Lecture
• ツールチップ／CSS3を使ったオンマウスで吹き出しが現れるサンプル
• 吹き出し／CSSだけで簡単に吹き出しを作成する方法4つ！ : アシアルブログ
• マウスオーバー／ボタン画像のマウスオーバーイベント 10+ | NxWorld
• Webフォント／指定するには？ - @font-faceの解説 - CSS3リファレンス
• 改行消し／レスポンシブWebデザインでの改行位置の変更方法 | CodePlus
• 横並びにする／CSS3のフレキシブルボックスで横組みレイアウト
• 余分な文字をカット／領域からはみ出た場合に「...」を表示する - TAG index
• 背景色を交互につける／:nth-childの使い方 | CSSPRO
• テーブル／table周りで便利なスニペットやプラグイン | NxWorld
• 画像トリミング／アニメーションサンプル作ってみた | バシャログ。
• 画像リサイズ／CSSだけで画像の縦横比を維持したサムネイルを表示- Qiita
• 画像を重ね合わせる／表示するインラインスタイルシートの記述方法
• 画像半透明／Design Plus | CSSだけでマウスホバー時の画像を半透明にする小ワザ
• 角丸／デザイン時に注意したい角丸の使いかた | Design Color
• 行間／行間が詰まりすぎているからではないか？見て歩く者 by 鷹野凌
• フロート／floatを解除する手法のclearfix｜Web Design KOJIKA17
• フォントサイズ／タブレット向けサイトの文字サイズは16px-Web担Forum
• リンク／いい加減、…と書くのはやめましょう - DQNEO起業日記
• リンク装飾／CSS3の効果でテキストリンクを装飾する小技 | Webクリエイターボックス
• 折り返し／長い英単語を途中で折り返したいとき: Days on the Moon
• clearfix の指定方法／ ( CSS ) | monopocket blog
• アコーディオンメニュー／クリックで開閉するアコーディオンメニュー｜Webpark

基本知識

２．セレクタ

命令文を適用させる選択部分(対象)をセレクタと呼びます。知らないのが結構ありました。色々細かく設定できるので必見。以下はセレクタの色々なパターン。

• 意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
• 簡単便利！CSSセレクタ厳選8個まとめ ｜ Kana-Lier　カナリエ
• もうCSS3で悩まない チートシート/リファレンス系サイトまとめ | 56docブログ
• ご存知、ないのですか？CSSの優先順位

３．メディア クエリ

メディアクエリーとはiPadやスマートフォンなどでも閲覧しやすいようにユーザーの閲覧しているメディアに合わせて、スタイルシート（css）内に適用する条件を細かく指定すること。以下、フレームワークやコードの書き方、スマートフォンに対応させるときに気をつけることなど。

• Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ | コリス
• レスポンシブ・ウェブデザインでの CSS コードの書き方
• CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

４．コーディング規約

コーディング規約とはコードの書き方に関するルールです。以下、Googleの最新CSSガイドライン。変なクセがついていたので見返し、インデントに半角スペース使うということでエディターのタブ設定なども半角を使うよう変更したり。CAの記事ではなぜこのようなルールがあるのかを丁寧に解説してあります。

• 「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN
• メンテナブルCSS | 株式会社サイバーエージェント
• コーディング規約を作ろう | Webクリエイターボックス

５．フォント

font-familyはあえて設定しない方法もありますが、以下フォントに関する指定方法など。もう一つはOS別にブラウザがサポートしている標準フォントを画像で表示してくれています。

• 標準の日本語フォント / もうパンツはかない
• フラットデザインに即採用！美しい日本語フォント。しかも無料。 |
• 俺好みのfont-family指定が最強に読みやすくてオススメ！ | DevAchieve
• CSS の小数点以下の数値を各ブラウザはどのように解釈するか | Unformed Building
• CSS3の「rem」でフォントサイズ指定 | Tips Note

６．CSSスプライト

筆者の会社も高速化のために、CSSスプライトを使ったりしてますが、どれだけ早くなったのか検証できてません。こちらはCSSスプライトに関して、かなり細かく説明してあるものを抜粋。CSSスプライトについてのデメリット・メリット、検証結果、具体的な作成方法など。もう一つはCSSスプライトを一発で作成してくれるWebサービスの解説。

• CSSスプライトについてあれこれ。
• Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」 | OZPAの表4

７．アニメーション

スタイルシートだけでアニメーションを付けられます。アニメーションの敷居が低くなってますので試してみましょう。以下は上下移動や回転をする吹き出しサンプル、ボタンホバーのサンプルも。

• 脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）：CSS3アニメーションの基本 (1/3) - ＠IT
• オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ｜Webpark
• CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト | コリス
• CSS3アニメーションで心地良いモーションを作る｜1 pixel｜サイバーエージェント公式クリエイターズブログ

８．正確なHTML使用方法

推奨されないhtml使い方ってエラーが出ないので、普通に使っていたら分からないですよね。Web標準を守って検索エンジンにも良いサイトを目指せるようにメモです。

• 犯してはいけないHTMLタグの過ち10個｜Webpark
• ,は要らない？Googleが推奨するHTMLファイルの記法 - Qiita [キータ]
• IE対応でよく利用するhtml5shivの使用方法変更について｜Blog｜Skyward Design
• HTML5 Reset Stylesheet | HTML5 Doctor

９．CSSハック

互換性の維持って大変ですね。IE7、8、9もバグがあるのでバージョンチェックやIE対策をひと通りまとめました。レスポンシブ対策にも良いです。

• 【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
• 【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 ｜ Developers.IO
• HTML5で組んでるならこの魔法のjsも入れておけっていう話 | [M] mbdb
• IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい | コリス

１０．書き方／読み方

最後はCSSの書き方やコメントアウト記法、プロパティの読み方です。以下のサイトを見て基礎から勉強し直しです。

• CSS の書き方についてのメモ | Unformed Building
• 今さら聞けない！読みづらいCSSプロパティの正しい読み方 | クリエイティブメモメモ
• コメントアウト記法まとめ/楽