レッスンお疲れさまでした。

本日は、ワイヤーフレームと画像に関して行いました。

【ワイヤーフレーム】

Webサイトを作るには、まず設計図にあたるワイヤーフレームを作ります。

全体のレイアウトを作ったら、次に横幅などの具体的な数値を決めていきます。

Webサイト全体の横幅は、960pxにすると割り切れる数が多く、ボタンや写真の数に柔軟に対応できます。

ワイヤーフレームができたら、それに沿ってHTML、CSSを作っていきます。

最初から細かな部分まで作らず、大まかな部分から徐々に細かい部分を作っていきます。

【画像】

画像を表示するには、HTMLで表示する方法と、CSSで表示する方法があります。

HTMLは、文章構造を表現し、CSSは、デザインを表現します。

文章構造上必要な画像はHTMLで表示し、背景画像など、あったほうが良いけど、なくても文章構造に影響しないものはCSSで表示します。

HTMLでの画像表示

どんな画像なのか説明

で、表示します。

画像の保存場所とファイル名は、

imgフォルダの中に入っている、img01.jpgというファイルの場合、

img/img01.jpg

とします。(htmlファイルとimgフォルダが同じ階層にある場合)

altには、画像の説明を書きます。

検索エンジンにヒットさせるためと、音声ブラウザで読み上げさせるために設定します。

CSSでの画像表示

CSSでは背景画像として表示します。

background-image: url(“画像の保存場所とファイル名”);

で、表示します。

cssファイルより画像ファイルが上の階層にある場合、

../

で、上の階層を指定します。

ひとつ上の階層にあるimgフォルダの中に入っている、img01.jpgというファイルの場合、

../img/img01.jpg

とします。

【独自ドメイン】

Webサイトを公開するときのURLを自分のオリジナルの名前(ドメイン)にするには、ドメインの取得が必要です。

◯◯.comの場合、年間1,000円以下、○○.jpの場合、年間3,000円以下で取得できます。