CSSの文字コードとコメント

ここではCSS文字コードの指定とコメントの書き方について説明します。
ブラウザに「このファイルはこの文字コードで記述されています」ということを伝えるには、ファイルの先頭で文字コードを指定する必要があります。
そのために記述するのが以下のコードです。

@charset “utf-8″;

HTMLでは<meta charset=”utf-8”>という記述で文字コードを指定しますが、css では上記の記述を使います。
@charsetと”utf-8″の間は半角スペースを空け、”utf-8″の後ろには半角セミコロン「;」を付けることに注意してください。

HTMLと同様に、CSSにも自由にコメントを記述するための構文が用意されています。

/* ここに自由にメモを書く */

上記のように「/*」と「*/」とで囲まれた部分にメモを書きます。
また、改行をして、複数行に分けて書くこともできます。

ブラウザは、/*を見つけると、次に*/が見つかるまでの間に書いてある文字を全て無視してくれます。
改行もブラウザにとっては文字の一種なので、このように記述できるのです。
どこに何のためのスタイルを記述しているのかを、いつ誰が見てもすぐにわかるように、コメントはこまめに記述するようにしましょう。

ウェブフォント

画像のファイル形式はいろいろありますが、ホームページに使う画像は「JPG(ジェイペグ)」「PNG(ピング)」「GIF (ジフ)」の3種類だけ知っておけば十分です。
近年は、小さなアイコンは画像を使わずにウェブフォントを利用する方法が普及しています。
有名なウェブフォン卜に Font Awesome (フォントオーサム)があります。
サイトのメニュー「icons」からアイコンの一覧ページへ移動できますので、興味のある方はどんなアイコンが利用できるのかを見てみるとよいでしょう。
また、ホームページにウェブフォン卜のアイコンを設置する手順もメニュー「Get Started」に説明が載っています。
サイトは英語ですが、意昧のわか5ない単語を翻訳サイトで調べることさえいとわなければ設置できるかと思います。
どのみち、ホームページの作成や運用をしていくには、わからないことや知らないととを自分で調べて知識を身に付けるというアプローチは不可欠です。
「Font Awesome 使い方」などのキーワードでインタ ーネット検索すると日本語で書かれた解説ページが見つかりますので、挑戦してみてはいかがでしょうか。

更新に備えたデザイン

常に成長するWeb

Webサイトは、コンテンツを公開した時点ですべてが完成するわけではありません。新しい情報が更新されたり、トップページのデザインが変わったりという「変化」はWebサイトの特徴でもあり魅力でもあります。更新をスムーズに行うには、はじめから更新を見越した構造に組み立てておく必要があります。

確定しているものと増えていく可能性があるもの

設計と更新計画に大切なのは、デザイン上レイアウ トに「動きのない部分」と、ひんぱんに変化する部分」を明確にしておく ことです。演出上のねらいによって更新の頻度を上げる部分を考えるなど、そのWebサイト の性質を見極めて構造を組み立てます。

ウインドウ幅に連動するメニュー

下部メニューはウインドウサイズを変えると連動して小さくなるので、項目を追加・削除しても常にウインドウにフィットします。

スクロールできる情報ウインドウ

中央のスクロール領域を情報ウインド‘ウにしています 。スクロール可能にしてあると、常に最新の情報が追加されるエリアだというアピールカもあります。

スペースに余裕がある情報エリア

スペースに余裕のあるエリアだったら、テキスト量の変動にも耐えられます。また、独立性が高い写真スペースは、入れ替えても他の部分に彩特を与えずにビジュアル演出ができます。