logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
03-6432-0915

MENU

スタッフブログ

お見積り依頼

各モジュールのコーディングプラクティス

こんにちは、日々コーディングの事を勉強中の原田です。
前回、CSSのモジュール化について書かせて頂きましたが、今回はそのモジュール化の続きで、各モジュール毎を2回に分けて掘り下げて記載します!



見出しモジュール 識別子はttl

見出しモジュールは、セクションごとの見出しとなる要素(HTML5の分類で、「ヘッディングコンテンツ(Heading Content)」となるh1やh2などの要素、見出しとみなすことが出来そうなp要素の事です。 クラス名として識別子、「 ttl 」をつけて管理します。


   

基本的には、上のように見出し要素に直接命名する場合が多いですが、とても凝ったデザインの場合もあります。
そういう場合は、たいてい一つの要素ではまかなえないので、h1要素の内側にspan要素を内包してスタイルを当てる要素を増やして対応します。H1要素の外側をdiv要素で囲う方法もありますが、文書構造がおかしくならないように注意が必要です。





テキストモジュール 識別子はtxt

テキストモジュールは、p要素やテキストに該当するspan要素などのコンテンツ内の本文のことです。
基本的に、サイト内のテキストはテキストモジュールに該当します。クラス名として識別子「txt」をつけます。



リンクモジュール 識別子はlink

リンクモジュールは、基本的にa要素のようにリンクが関係するモジュールの事です。クラス名として識別子「link」をつけます。
通常は、テキスト内にリンクが存在する場合にモジュールとして分ける事が多いです。



ボタンモジュール 識別子はbtn

ボタンモジュールは、見た目や役割がボタン上の要素の事です。クラス名をつける要素は特に指定はありませんが、button要素やa要素、a要素を囲むdiv要素に付与するパターンが多いです。 クラス名として識別子「btn」をつけます。