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

MENU

2017 11月

お見積り依頼

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

こんにちは、日々コーディングの事を勉強中の原田です。
前回、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」をつけます。

続きを読む

CSSの設計について考えてみました

こんにちは。入社して半年経ちました原田です。



WEBやITは未経験だったので、わからない事だらけで、戸惑ったり、色々新しい発見があったりで、日々奮闘しています。



コーディングの業務を進めていくにしても、最初想像していた以上に奥が深いなと思っているのですが、 そんな中でも、最近、CSSの設計って難しいなと思っています。



普通にページの要素に沿ってCSSを書いていけばいいやくらいにしか思っていなかったのですが、 そこそこの規模のサイトになると、きちんと最初に考えて設計しないと大変な事になるという事がわかりました。



具体的にどう大変かと言いますと、

  • 1.同じパターンのデザインが複数ページで展開されている場合、修正が入ると該当の全ページ修正する必要が出てくる

    →設計をきちんとしておけば、複数ページに修正対象があっても、1箇所修正すれば済む。

  • 2.デザインそのままで、h2タグをh3に変更して欲しいという修正が入った場合、CSSも大直しする必要が出てくる

    →設計をきちんとしておけば、HTMLで、h2をh3に変更するだけで済む

  • 3.AページにあるパーツCをBページにも掲載する事になった場合、BページでCパーツを表示させるCSSを組む必要が出てくる

    →設計をきちんとしておけば、該当のHTMLをコピペするだけで済む


こういう気づきがあったので、ちょっとCSSの設計について考えてみました。

そして、各ページの要素をモジュールごとに分類して、そのモジュールコーディングを先ずはすれば良いと思いました。

具体的なモジュールの分類方法ですが、

分類大→分類中→分類小という順番で分類作業をする

①大枠を分類して、構造を決める
②各構造の中を、次の詳細度で分類する
③さらにそのかたまりを、次の詳細度で分類する



また、基本的な設計の考え方として、構造とスキンを分離する。
構造→形に関わる事 スキン→見た目に関わる事



例:赤いボタンをCSSで表現



<従来のCSS>



<構造とスキンを分離する書き方>



width → 構造
height → 構造
border → 構造(border-colorはスキン)
color → スキン
background-color → スキン


赤いボタンを青いボタンに変更する際は、btnのクラスはそのままで、
btnRedのクラスを、btnBlueなどに変更して使う。

続きを読む

Webディレクター兼プロデューサー募集中

コーディングラボでは、コーディング代行業務の、 Webディレクター兼プロデューサーを下記マイナビ転職にて募集しています。 未経験でも歓迎ですので、興味のある方ぜひ応募してください。   https://tenshoku.mynavi.jp/jobinfo-216830-4-2-1/
続きを読む