【Web】制作後のサイトの構造を守らせるか、自由度を上げるか
私は社内でも新しくサイトを制作する部署にいますので、極端なことを言えば「作るだけは作るが管理のことは考えない」といった仕事の仕方も可能です。が、できるだけそれはしないようにと努めています。
その後サイトを管理する人が困るのは良心が咎めますし、それ以前にそういう作り方をするのが気分的に嫌なのです*1。
そのため可能な限りシンプルに、余分なものを削いだテンプレートを作って、こまめにマイナーチェンジを繰り返しています。
その辺りは詳しくはこちら。
【日記】2015年10月21日～10月22日 コーディング用テンプレートは極力シンプルに - たそがれノート
そういった中で悩み続けていることのひとつが『構造を守らせる作りにする』か『自由度を上げる』かのバランスです。
制作者以外の人間がサイトを運用する際の問題点
よくあるのが、運用段階で担当者が変わった際に意図せずに構成を崩してしまう、ということ。
既に用意しているスタイルなのに重複して作ってしまったり、必要なものを記述していなかったり、うっかり全ページに影響が出る修正をしてしまったり……こうなるとどんどんスパゲッティ状態のコードになっていきます。
構造を守らせるコーディング
たとえば、コーディング時h1タグに下記のようにスタイルを設定したとします。
h1 {
font-size: 20px;
font-weight: bold;
color: red;}
こうしておくと、<h1>h1見出し</h1>と記述するだけで、勝手に赤字・太字・フォントサイズ20pxのスタイルがつきます。
特に意識しなくてもh1には必ず同一のスタイルが適用されますし、htmlへの記述量は少なくて済みます。
また、作業者に見出しレベルについての理解が一定以上あるか、あるいはデザインを守るならh1→h2→h3……の順で記述していくしかないので、ある程度は構造を守ることが期待できます。
一方、この方式だとh2部分にh1と同じスタイルを使いたいんだけど……といった場合に融通がききません。
ある程度自由がきくコーディング
上のデメリット部分を解消する方法のひとつが、スタイルとコードを分離させることです。下のようにクラスを作ってスタイルを割り当てます。
CSSファイル
.title_h1 {
font-size: 20px;
font-weight: bold;
color: red;}.title_h2 {
font-size: 16px;
font-weight: bold;
color: green;}
htmlファイル
<h1 class="title_h2">大見出し</h1>
<h2 class="title_h1">大見出し</h2>
htmlファイルの方を見ると、それぞれクラスをつけることによって見た目はh1だけど構造としてはh2、というようなことが可能です。
この方式のメリットは、見た目と構造を分離しているので、h1の直下にh3の見出しデザインを配置しなければならない場合でも、<h2 class="title_h3">といった感じにしてやれば済むところです。
一方のデメリットとして、見出しレベルに無頓着だとデザイン部分の正誤だけ見て、コピペで、
htmlファイル
<h2 class="title_h1">見出し1</h2>
<h1 class="title_h2">見出し2</h1>
という記述になってしまうかも知れませんし、あるいは、
htmlファイル
<h1>見出し1</h1>
<h2>見出し2</h2>
とクラスをつけずに記述してここだけスタイルがついてない、ということが起こることも……。
基本的には構造を守らせる作りの方を採用
私は自由度よりもサイト全体の構造やデザインの統一性が崩れる方が問題だと考えているので、なるべく「構造を守らせる作り方」をしています。サイトは運用していくものですし、自分を含めて人間はミスをするし、自分以外の人が運用しても壊れにくくする、というのがまず頭にあるからです。
そのため見出しに限らず、使いまわしの部分はできるだけhtmlファイルの方に記述を増やさなくても済むようにしています。
たとえば、見出しの前に記号がつくスタイル（表示例：「■見出し」など）は、
CSSファイル
h1:before {
content: "■";
}
htmlファイル
<h1>見出し</h1>
こういう風にしておくと、自動で「■」が見出しの先頭につきます。いちいちhtmlファイルの方に<h1>■見出し</h1>と書かなくて済むし、別の箇所で「■」を付け忘れてしまった、というミスもなくなります*2。
また、上の自由がきくコーディング方式で、例外的にh2にh1のスタイルを適用するということを行っていると、まとめてh2のスタイルを変えたい、という場合に作業が煩雑になります。
同じ理由で、ひとつのタグに複数のクラスを指定するのも、うっかり抜けしやすいですし、煩雑で好きではありません。そのためなるべく1タグにつき1クラスを基本にしています。
おそらく、コーディング的にはある程度自由のきく方が推奨されているのだと思いますが、私は制作したサイトを他の人が運用するということが常なのでこんな感じです。
さっと調べてみても、こういう「サイトの構造を守らせる」という考え方が見当たらなかったのですが、他の方はどうなんでしょうか。検索ワードが良くないだけかも知れないですけど……。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
posted with amazlet at 15.11.27
インプレス (2014-07-24)
売り上げランキング: 11,064
売り上げランキング: 11,064
修正のしやすさと崩れにくさの両立のバランスが難しい。
【書評】ナイトメア・プロジェクト 公式ガイドブック
メモ
今日はとても寒かったですね。梅雨の時期の雨はムシムシと体感温度を上げてくるのですが、冬場の雨は更に気温が冷え込むように感じます。乾燥しているときより冷気がまとわりつくというか重さを持つというか。
さて、しばらく備忘録につけていた出費ですが、このあたりでそろそろ終了したいと思います。自分の出費の傾向はなんとなくつかめてきましたし。
日記はなるたけ継続してつけたいと思います。
書評
発売ほやほやのナイトメア・プロジェクト 公式ガイドブック買いました！
仕事の帰りに本屋に寄ってゲットしてきたのですが、早く、誰にも邪魔されず読みたいということで帰りに食事しつつ読破*1。
ゲーム自体は遊びつくしているため、攻略フローチャートに目新しい発見はなかったのですが、設定資料が楽しいです。ゲームで見えなかった全身図はこうなのか！ とか。ゲーム中でいまひとつ曖昧なところが用語集で補完されていたりとか。
一夜怪談の前の沼屋敷事件のプロローグも載っていたり、インタビューで制作の裏側が語られていたり、書下ろしがあったりと結構盛りだくさん。
個人的には、7th blood vampireの用語解説、祓い手の村の運営費のひとつに『博打』とあったのがちょっとウケました。うっかりと、レナたちがチンチロリンをしている姿が鮮やかに脳内に浮かんでしまいました。
キャラや世界観をもっと細かく知りたい、という方にはおすすめかと思います。
*1:家には家族がいるため、読みたい本があるときは結構こういったことをする。
【日記】2015年11月13日～11月15日 パリ同時多発テロのニュースを知った
収支
11月13日
お昼：350円
交際費：2500円
計2850円
11月14日
なし
11月15日
本：411円
外食：450円
お茶：106円
クエン酸：1500円
計2467円
メモ
パリで同時多発テロが起きたというニュースを知りました。いやでも311の記憶が呼び起こされます。
当時ニュース映像を見ていても現実の出来事と思えず、そして今回もやはり同じで、ただ空しい、何故こんなことをするのだろう、という気持ちがわくばかりです。
「日本人が巻き込まれたという情報はありません」という報道についての理由を知ったのは311の頃です*1。
ニュースサイトを見ても、きちんとした情報は得られていません。
彼らは世界が全て自分達の宗教・思想と同じになるまで止まらないのでしょうか。
そんな気分でもやもやしつつ、本屋さんで『まんがで学ぶ世界の宗教』という本を手に取りました。イスラム教についてはアッラーを唯一神としている、コーラン、一日数回のお祈りをするという以外まったく無知だったので、こういうものの方が入りやすいだろうと思ったのです。
当然ですが、過激派はイスラム教徒の中でもごくごくわずかです。しかし、その過激派のせいで他の穏やかなイスラム教徒も同胞として見られ、難民の受け入れも滞り……となると、結局は同胞に行いが戻ってきてしまうだけなのではないでしょうか。
あるいは、難民受け入れを拒否させることで、自分達の方に引き込もうとしているのか……。知識のない私にはよくわかりません。
本の中に登場したイスラム教徒が、お祈りは心の栄養だということを言っていました。
テロ行為は心の栄養になっているのでしょうか。余計飢えるのではと思います。
なんだかそんなことを考えてしまいました。
まんがで学ぶ 世界の宗教(Business ComicSeries)
posted with amazlet at 15.11.15
あさ出版 (2015-10-23)
売り上げランキング: 16,409
売り上げランキング: 16,409
異文化のことを知るのは、今後必須になると思う。
*1:ただでさえ大変な状況なのに、家族からの問い合わせという更なる混乱が発生するのを防いでいるとか
