Programming主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。ブログを移転しました。Tecuration.comこのサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。この広告は、90日以上更新していないブログに表示しています。HTMLすっかり春らしくなってきた今日この頃。何らかのきっかけでHTML/CSSを使うことになった人もいるのではなかろうか。今日は初心者の方向けに覚えておきたい基本ルールを5つ紹介する。これを知らないとその内ハマることになると思う。Google社内で推奨されているHTML/CSSのコーディングルールが記された記事があったため、そちらも紹介する。ここら辺は変なクセが付く前に知っておきたいところ。後に書いたほうが優先される以下のHTMLがある。<h3>Hello</h3>このHTMLへ以下のスタイルを適用する。}この場合優先されるのは後に書いたほうであり、h3要素は青文字になる。Helloある程度の規模のサイトを作ろうとすると複数のスタイルシートを組み込むことがある。その時にこのスタイルの上書きを理解して使えば便利なのだが、理解せずに使ってしまうと思ったとおりのスタイルが適用されないという罠に陥ることになる。classよりidが優先される以下のHTMLがある。id="criticalMessage">Hello</h3>このHTMLへ以下のスタイルを適用する。}この場合優先されるのはid指定のほうであり、h3要素は青文字になる。Helloidとclassを一つのタグ内に書くときは要注意。CSSセレクタを駆使し、そもそもidやclassに頼らないという選択肢もある。詳細に指定したほうが優先される以下のHTMLがある。<h3>Hello</h3></div>このHTMLへ以下のスタイルを適用する。}この場合優先されるのはセレクタを詳細に記述したほうであり、h3要素は青文字になる。HTMLタグに書くstyle属性はCSSのstyleより優先される。以下のHTMLがある。blue;">Hello</h3>このHTMLへ以下のスタイルを適用する。}この場合優先されるのはHTMLタグで指定したスタイル属性であり、h3要素は青文字になる。!import"は何よりも優先される以下のHTMLがある。blue;">Hello</h3>このHTMLへ以下のスタイルを適用する。}この場合優先されるのは"!important"が指定されたスタイルであり、h3要素は赤文字になる。Hello以上が基本ルール5つ。どれも簡単な内容なのだが、スタイルシートが膨大かつ、複数人で管理していると意外にミスしてしまったりもするので注意。Google社のHTML/CSSコーディングルールここからはGoogle社内で推奨されているHTML/CSSのコーディングルール。以下の記事を読ませていただいた。いくつかこれは!というルールがあったので抜粋する。Developersに記載されてるjQueryとかのscriptタグってプロトコル付いてない。試してみたら、ん?これ僕の環境ではできないのだが。プロトコルはつけようと思う。インデントは半角スペース2つ複数人でコーディングしていく時は、こういうルールも作らなくてはいけないのだろう。僕も半角スペース2つ派。type属性は省略このtype属性、前から何の意味があるのだろうと思っていた。HTML5以前ではcss、javascriptはデフォルトの言語でなかったから書く必要があった?まぁよくわからないが、今までどおり省略する。idとclass名には意味のある名前を使うこと命名センスが問われるところであり、いつも悩まされる。idやclass名だけでなく、javascriptやPHPの変数名とかも含めて。何か良い命名方法があったりするのだろうか。idとclass名にタイプセレクタを記述しないへぇー。不要な子孫セレクタはパフォーマンスを落とすようだ。CSSセレクタはしっかり学んだほうがよい。(過去記事:CSSセレクタ多すぎ覚えられない!CSS3対応セレクタリストを作ってみた)別々のセレクタとプロパティは改行して書くことプロパティはわかるが、セレクタまでも。最後に「一貫性を持ちましょう」これは本当にその通りだね。複数人で開発する時に一貫性が崩れたコーディングをされるとストレスになる。1人で開発を行っているときから一貫性を意識しておくとよいと思う。コーディングルールは別に決まってるわけではなく各々持ってしかるべきだと思うが、組織の中でコーディングしていくのならやっぱりルールは定めたほうがいいと思う。いうわけでHTML/CSSのルールについて以上。今流行りのフルスクリーンWebデザインを簡単に実装するJSライブ...2013-05-13jQueryでファイルツリーが作れる「dynatree」これはいつか使う機会がありそうということでご紹介。ファイル...2013-05-08シンプルなUIのページネーション「simplePagination.js」ライブラリ名まんまの記事タイトル。»プロフィールid:akiok_jp主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。月別アーカイブPRはてなブログをはじめよう!akiok_jpさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。