レッスンお疲れさまでした。
本日は、ワイヤーフレームと画像に関して行いました。
【ワイヤーフレーム】
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円以下で取得できます。