本日はホームページ作りを少し。
タイトルは分かりにくいので補足しますと、すでにできあがったHTMLの枠があります。その枠を使ってサイトを作りました。ここにひと味くわえて形が自在に変わる機能をつけました。新しく付けたのは携帯や画面の小さい機械で観たときにサイトの内容が変形する機能です。
サイトはこちら。
カメラスタビライザー ホーム
レスポンシブデザインを導入してます。クロスブラウザチェックをしてないので、IE8あたりでどう見えるのかは謎。公開しないと改修もしないので、まずはアップしました。
レスポンシブデザインとは、受けて反応するデザインのことです。アダプティブデザインというまた別な言葉があります。昔は液体のように自在に動くからリキッドデザインと言ってました。それぞれの区別は各自調べて下さい。
表示が変化する機能は2010年くらいから気になっていました。当時はサーバー側に自動応答機能を置いて、お客さんごとに渡す書類を変えるような仕組みでした。当時はプログラムの知識が必要で使えずじまい。いまはCSS3に機能が付いて、たとえば幅を狭くしたらサイドバーのメニューが記事の下に回り込むなんてことができます。
コードをゼロから打ち込んで作る労力はありません。そこでフレームワークを使いました。
Responsive Grid System
こちらのフレームワークを、既存のサイトに組み込んでいます。手法というほどのこともなく、フレームワークが指定したスタイルシートを組み合わせただけ。それでもいちおう機能しています。ただ、２つの違う人が作ったCSSの表示指定ファイルをそのまま足しても完璧には動きません。フレームワークのスタイルシートが自由に動くように既存の表示の指示を修正してあります。
最初に設置したテンプレートのスタイルシートも今回導入したフレームワークのスタイルシートも共にコードの行数が少ないので、10ヶ所ほど変えただけで済みました。
写真一覧は最初からブロックのフロート表示でした。
カメラスタビライザー 写真
わずかにコードを変えただけで思ったとおりに動きました。ただ、写真の枠が崩れたので崩れた分を調整して見栄えを整えてあります。写真を収めた枠に印画紙風の影がついています。あの部分は背景画像で、画像の位置指定がうまくいかずマイナスのマージン指定という非推奨の指定を使っています。写真の表示はほかのもっと安全な方法があるので、次つくるときは変えようかと思います。
フレームワークという既製品を使うと作業が楽です。どうもアメリカ人は横幅を決めるときインチのブロックで考えているみたい。そのほうがブロックをユニットとして動かしたとき合理的なんです。Responsive Grid Systemを使った理由はなんとなくで、コードの短いほうから順に探して３番目くらいにたどり着きました。写真もリサイズできるのですが、まだそこまでたどり着けません。とりあえず公開優先で作業をしているので道半ばです。