calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

見栄えが良くなった!CSSやHTML5の役立つ総まとめ

free_tutorials_on_css

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

定番まとめ
1.勉強になるテクニック/サンプルまとめ

基本知識
2.セレクタ
3.メディア クエリ
4.コーディング規約
5.フォント
6.CSSスプライト
7.アニメーション
8.正確なHTML使用方法
9.CSSハック
10.書き方/読み方

定番まとめ

1.勉強になるテクニック/サンプルまとめ

technique_sample_excel

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

基本知識

2.セレクタ

selector_excel

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

3.メディア クエリ

media_queries_excel

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

4.コーディング規約

coding_excel

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

5.フォント

font_css

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

6.CSSスプライト

css_sprite_css

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

7.アニメーション

animation_css

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

8.正確なHTML使用方法

exact_html_css

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

9.CSSハック

css_hack_css

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

10.書き方/読み方

writing_reading_css

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

  1. […] 9. Webサイト制作:見栄えが良くなった!CSSやHTML5の役立つ総まとめ […]

Leave a Comment

コメントする