Webサイトは、htmlとcssを組み合わせて表現されています。
スタイルエディタやブロックエディタが登場し、htmlとcssを直接記述しなくても作成できるようにはなってきていますが、結構頻繁に、htmlとcssを直接記述して対応する必要があります。
スクリプト言語の中には、グラフィカルUIにhtmlを使っているものもあります。スクリプトで、htmlを生成し、ブラウザ上にUIを表示する仕組みです。その場合も、htmlとcssを扱える必要があります。
結局、ブラウザで表示するWebサイトコンテンツを作成する場合は、遅かれ早かれ、htmlとcssを扱えるようになる必要があります。
コンポーネントで理解する
htmlとcssのどちらを先に覚えるか？
htmlとcssを学び始めるとき、真剣に考えました。htmlとcssのどちらを先に覚えるかという考えは、目的の表現をするためのhtmlとcssの組み合わせが覚えられないので、これから、Webコンテンツを作成する人にとっては、あまり効率的ではありません。
「Webコンテンツとして、使用したい表現」ごとに、htmlとcssを覚えていく方法をお勧めします。
この「Webコンテンツとして、使用したい表現」をコンポーネントと呼びます。
コンポーネントごとに、定型となる記述が存在するので、それを利用し、スタイルを調整し、cssに記述します。これにより、これ以降は、htmlを記述するだけで、同じ、スタイルの表現が利用できます。
使用する必要になった順に、それぞれ覚えて行けば一度に覚える量を減らすことができます。
詳しくは、「これから、htmlとcssを学習する方に」を参照して下さい。
ブログやホームページを作成する際に考えること
htmlとcssの使い方を覚えるのは、Webサイトを作成するためです。
しかし、htmlとcssを覚えただけでは、Webサイトを作成できません。「htmlとcssの使い方を覚える」のは時間がかかるので、ブログやホームページを作成するためには、何が必要かを理解して、Webサイトを作成するために必要な、コンテンツを作成する際に利用する様々なものを準備しておく必要があります。
詳しくは、「ブログやホームページを作成するために」を参照して下さい。
テンプレート、記事どちらで使用するコンポーネント
コンポーネントには、テンプレートで使用するものと、記事内で使用するものがあります。それぞれを区別して整理するとよりわかりやすくなります。
テンプレートで使用するコンポーネントは、Webサイト全体で使われますが、テンプレートに使われる同じ記述であるため、テンプレートを作成する際にしか使用しません。
- カラム・レイアウト
- グローバルメニュー
- パンくずリスト
- ハンバーガーメニュー
- など
テンプレートを作成するために必要な知識と手間な、膨大です。テンプレートを作成する時間で、記事などのコンテンツを作成したほうが効率的なので、まずは、既存のものを活用してWebサイトを作成する事をお勧めします。
テンプレートw自既作成する場合、レスポンシブWebデザインの仕組みを理解しておく必要があります。具体的には、カラムデザインとメニュー構造です。
表示される画面の幅に応じて、レイアウトを変更し、読みやすいデザインに変化させます。
記事を読みやすくするために使用するコンポーネント
一方、記事内で使用するコンポーネントは、それぞれの記事で使用する場合に、自分で記述する必要があります。記事を読みやすくするために積極的に使いたいコンポーネントです。具体的には、あらかじめ、cssにスタイルを記述しておき、必要な箇所で、htmlの組み合わせを、使用したい場所で、挿入します。エディタの定型文挿入機能に登録して使用すれば、覚える必要もありません。
さらに、メニューページや目次ページなど、それぞれの記事に誘導するためのメニューページでよく使われるコンポーネントが存在します。
それぞれのコンポーネントは、cssフレームワークを参考にできます。
詳しくは、以下を参照して下さい。
動的要素はスクリプト
Webサイトのページ内で動く動的な要素のほとんどはスクリプトで実現されています。
一部にはcssアニメーションで実現されているものがありますが、多くは、CGIと呼ばれるサーバーサイドで動作するスクリプトやjQuery、Javascriptなどの閲覧者のパソコンで動作うするスクリプトです。
cssアニメーションの方が快適に動作する傾向があるので、可能であれば、cssアニメーションを使用することをお勧めします。
- サイト内検索
- コメント欄
- 送信フォーム
- など
スクリプトも一般的なものは、既存のものが存在します。それらを有効に利用し、あるいは、最初は実装せずに、速やかにWebサイトを開始することが大切です。
Web素材
Webサイトを作成する際、画像や写真、グラフ、図表が必要なります。写真は、日頃からこまめに撮影しておくことが大切です。必要な写真やイラストなどの素材は、購入することも可能です。
タグリファレンス
htmlやcssのリファレンスは、Web上で見つかります。有効に利用しましょう。
