動的出力を考慮に入れたHTML・CSSの作成について

環の小坂です。

CMSの仕様によるので、コツというのはなんともいえませんが、
二つの選択肢があると思います。

・開発環境を用意してもらう、実験できるようにする。
(こうすればルールがわかるので、やりやすいです。)
・大幅な工数変更を踏まえたスケジュール価格設定にする。

オープンソースなどであれば、開発環境を用意できると思いますが、
何らかの事情で用意することが不可能な場合は
システム会社に用意していただく必要があります。

確かにドキュメントもなく、クライアントもわからないまま
納品というケースは時々あります。

あえてコツというと
・HTMLの中にPHPを組み込むパターン
・パーツで分割しそれを呼び出すパターン
の二つがあるので、せめてそこだけでもわかれば、
やりやすくなるとは思います。

初めまして、マジック・プロジェクト 海岸です。

ご質問の件ですが、コツというのは難しいですね。

まず、動的生成をある程度考慮したデザインというのもありますので、
私の仕事の場合、そのデザイン表現が動的生成に向かない場合、
デザイナーに修正をかける場合もあります。

デザインされたPSDファイルを見てダメな場合は
その場でダメと言ってしまいます。
なので、あまり参考にならないかもしれませんが……。

私の場合、以下のことを考えながら作業します。

1.ページのどの部分が動的に変化するかを考える

2.動的に変化する部分に同じ要素が繰り返されるどうかを考える

3.ページ内に入る動的要素の最大値と最小値を考える

4.各要素をブロックにして組む。

もう少し、具体的に説明しますと、

例えば、更新情報を表示するブロックを想定します。

<div>
<h3>新商品●●●が入荷しました</h3>
<p>皆さん待望の△△△の最新機種●●●が入荷しました。数量限定ですお早めに!</p>
</div>

上記が更新情報の1トピックスの構成要素とします。
プログラムでは、これをトピックスの数分、繰り返し出力するわけです。

で更新情報全体のブロックとしてまとめてしまいます。

<div id="whatsnew">
<div>
<h3>新商品●●●が入荷しました</h3>
<p>皆さん待望の△△△の最新機種●●●が入荷しました。</p>
</div>
<div>
<h3>●●●が限定入荷しました</h3>
<p>●●●が入荷しました。数量限定ですお早めに!</p>
</div>
</div>
こうすることにより、更新情報という入れ物の高さは変化しますが、ブロックは保持されるので崩れることがありません。

以上、参考になれば幸いです。

──────────────────────────────
ホームページ制作・システム開発のマジック・プロジェクト
海岸秀憲

a-blog cmsがお勧めです。
a-blog cmsなら静的なページはシステムがそのまま表示し、簡単に更新したいというコンテンツのみCMSに必要な記述をすることで、部分的なCMS導入が可能です。
つまり、静的にページを全部つくりあげた後でも更新したい箇所だけCMS導入が可能です。
もっと行ってしまえば、すでに静的でつくられたサイトをそのまま指定のフォルダーに入れるだけでテンプレートとして機能しますので、後は更新したい箇所だけCMS導入もできます。

デザイナーにとても優しいCMSで、ルール機能を使えばページごとに自由にCMSを導入できます。
まだβ版ですが、一度お試しください。

きっと、これまでの苦労が解消される筈です。

ビーワイズの文です。
こんばんは。

参考程度に・・・


基本的に、CMSなどを組み込む際には、事前にプログラマーと打ち合わせを
行う必要があります。ですから、事前準備が作業のコツです。

現状作業の中で、プログラマーの方とコミュニケーションをとる体制はない
のでしょうか?




以下は、今後の参考とお考えください。

重要なのは
1.どの部分を更新するのか
2.どのように更新されればよいのか
以上の2点です。


以下に2例を挙げておきます。


【1.新着情報を更新する】
更新箇所が「日付」と「内容」など1項目に複数の情報がある場合には
<p>で作るのではなく
<table>や<dl>などを使用し、「日付」「内容」がわけられるブロックで
コーディングを行っておく


【2.画像を並べる】
また、「画像を横列に自動生成で並べ、ある一定の幅になれば下段に移動する」
などの
レイアウトの際には、画像を<div>でくくり、floatで記述する。
(自動生成で<td>を生成するケースもありますので一概には言えませんが・・・)



「動的出力を考慮したHTML・CSS作成のコツ」とまでは一概には言えませんが

・widthは指定する
・heightは指定しない
・各情報を<div>などのブロックで囲っておく

この3点を抑えておくのが良いかと思います。

動的であれ、静的であれ基本的にhtmlの設計の考え方に違いはありません

Webサイトというのはほとんどが複数のページで構成されるもので、と考えると(ものすごく簡単にいってしまうと)htmlとスタイルシートの設計、テンプレートの作成〜ページの量産というプロセスになるかと思います。そのページの量産という工程の手法が、CMSであったり、MovableTypeであったり、Dreamweaverのテンプレート(ライブラリやスニペット)であったり、そして人の手であったりするだけです。なので、ページが生成される手法がどんなものでも文書構造とスタイルシートを設計する段階で特に変わりはないというのが私の答えです。

>デザインされた1枚のPSDファイルなどから

これは、画面単位のPSDファイルだったりしませんか?

マークアップする前に、まずデザイナさんからもらったPSDファイルをよく見て、画面単位ではなく、エレメント単位に分類、まとめることが重要です。そこから、レイアウトパターンの分類と、ブロックに入る要素の分類が把握できたらOKです。そうすることによって、モジュール的というかコンポーネント的な考え方ができるようになり、htmlの文書構造やスタイルシートの設計がしやすくなります。

>CMSなどで作られた文書の量が多かったり、ループの回数の違いで表示に崩れが発生して手直しが発生したり

これはCMSだからこの結果、というのではなくその人が手で(多い文書を入れる)作業をしたとしても同じことだと思います。なので設計においては、およその文書量がどのくらいかと情報を得ておくことも必要だったりもしますね。

株式会社コスモインタラクティブ
野田郁也

手でコーディングする限り、こうした問題を根本的に解決するのは難しいんですよ。


こんにちは。
チームデルタの谷口です。


デザイン性の高いページを動的に生成するとなると、デザイナー、コーダー、プログラマーが連携なんてことになりますよね。

コーダーさんの、こうした苦労を取り除くためには、システム側との事前のコミュニケーションを充実させるしかないでしょうね。
ループで生成する情報ブロックの明示と、表示エレメントの最小と最大をシステム側が事前に示すとかね。
また、経験を基に、あなたからも、そういう可変的に生成される可能性の見える個所については、事前に確認しておくとか。

作業プロセスをあなたがコントロールできるなら、CMS入れてWYSIWYGエディタで作成、ってことにすれば、何かにつけ都合がいいんでしょうけど、そうもいかないですよね。

Webコンテンツの制作に関わる場合、クリエイティブワークからシステム開発ワークの間を幅広く横断できるスキルの持ち主が何かと重宝される傾向にあります。
自分の作成したHTMLをPerlやPHPで吐かせるのは、決して難しいことではないので、この際、CGIを含め、プログラミングを学んでみてはいかがですか?


ご参考になれば幸いです。


成功するWeb戦略とホームページ制作のチームデルタ
谷口浩一