保守運用を見越したコーディングが出来ないと、保守運用フェーズで問題が発生することはもちろん、大規模サイトにおいては開発段階で様々な問題が発生する可能性があります。今回は、保守運用を見越したコーディングの基本の基本に関して、WEBサイトを制作するという想定で簡単にご紹介したいと思います。 マークアップにおいて、カンプ通りのコーディングはあくまでスタートラインに過ぎず、本番は保守運用を見越したコーディングにあります。 保守運用を見越したコーディングが出来ないと、保守運用フェーズで問題が発生することはもちろん、大規模サイトにおいては開発段階で様々な問題が発生する可能性があります。 今回は、保守運用を見越したコーディングの基本の基本に関して、WEBサイトを制作するという想定で簡単にご紹介したいと思います。 ディレクトリ構造 制作するサイトのディレクトリ構造は上のようになっているとします。 共通の物

WEBサイトの運用・保守時や大規模サイトの構築時には致命的になりかねないそんなモジュールのスタイルのバッティング問題。その解決方法の１つである「BEM」に関して今回はご紹介したいと思います。 複数のページに共通して登場するデザイン（以降モジュールと呼びます）のCSSを共通CSSファイルに書いたら、ページ毎のCSSとバッティング（名前が被ること）して困った経験は無いでしょうか？ WEBサイトの運用・保守時や大規模サイトの構築時には致命的になりかねないそんなモジュールのスタイルのバッティング問題。その解決方法の１つである「BEM」に関して今回はご紹介したいと思います。 具体的な例を上げて説明 モジュール作成 例えばこのようなパーツのデザインカンプがあったとします。 このデザインは複数のページに登場するため、モジュールとしてHTMLとCSSは以下のように記述したとします。 <div class=

レスポンシブサイトでは「ブラウザ幅によってレイアウトが切り替わる」という特性からほぼ毎回必要になるようなJSの処理があります。今回はその処理に関してご紹介したいと思います。 レスポンシブサイトの案件が最近多く、作っている中で「ブラウザ幅によってレイアウトが切り替わる」という特性からほぼ毎回必要になってくるJSの処理が固まってきました。 そこで今回、僕自身がレスポンシブサイトを作成する際にどのようなJSを準備として毎回書いているかご紹介したいと思います。 現在のレイアウトの状況を判別する関数の作成 レスポンシブサイトを作成していると、「スマホレイアウトの時だけこの処理をしたい」といったような、現在のレイアウトの状況を取得したい場面が頻繁に登場します。 そのため、以下のようなコードをいつも記述しています。 CSS #MqMark { display: none; } @media (min-w