イメージの挿入
WEBサイト用画像の種類
このコースでは基本的にjpgとgifを使用します
1.jpg・・・主に写真やグラデーション
2.gif・・・主にナビゲーションバーなどのアイコン、イラスト
(はっきりとした線になる。任意の色を透明化することが出来たり、動く画像が作れます)
イメージの挿入
イメージを挿入したい場所にカーソルを置く
方法1.画面右下のファイルパネルの中からの中から挿入したい画像をドラッグする
方法2.挿入 → イメージ → ファイルを選択
代替テキストは記入しておく
音声再生ファイルに適用されるし、画像が現れるまでの説明文になる
副次的ではあるがSEO対策にもなる
イメージサイズを変更
画像を選択し右下に出る四角を選択 → サイズの変更が出来る
Shiftを押しながらだと左右のバランスは変わらない
サイズの横の更新マークをクリックすると元のサイズに戻る
※画像が荒くなったり、歪む原因にもなるので仕上がりサイズで作成しておく
リンクを張る
| URLにリンク → | リンクを張りたい文字をドラッグして選択し、画面下部のリンク部分にURLを 記入する |
| ページにリンク → | リンクを張りたい文字をドラッグして選択し画面下部のリンクの指定を任意 のファイルにドラッグする |
仮リンクは # と記入する
別のウィンドウで開きたい時は「_blank」設定する
文字リンクにcssルールを定義
通常リンクされている文字を選択するとブラウザーで文字色の変化があります。
それもcssで定義します。
| <a> | 通常時 |
| <a:hover> | マウスポインタが重なった状態 |
| <a:active> | クリックした状態 |
| <a:visited> | 訪問後 |
やってみよう
| <a> | リンクが張られている文字にカーソルを置き、タグ<a>を選択 → 新規cssルール → 文字色を変えたり、ルールを定義。 |
| <a:hover> | リンクが張られている文字にカーソルを置き、タグ<a>を選択 → 新規cssルール → セレクタタイプを詳細設定にする →セレクタをa:hoverにする → 先ほどとは違う文字色にし、ルールを定義。 |
| <a:active> | リンクが張られている文字にカーソルを置き、タグ<a>を選択 → 新規cssルール → セレクタタイプを詳細設定にする →セレクタをa:activeにする → 先ほどとは違う文字色にし、ルールを定義。 |
| <a:visited> | リンクが張られている文字にカーソルを置き、タグ<a>を選択 → 新規cssルール → セレクタタイプを詳細設定にする →セレクタをa:visitedにする → 先ほどとは違う文字色にし、ルールを定義。 |
後から指定したルールのほうが、先に指定した規則に勝つ。
「hover 状態でもあり active 状態でもある」という場合<a:hover>の後に<a:active>を記述しなければならない。
イメージリンク
イメージにリンクを張る
| URLにリンク → | リンクを張りたいイメージを選択し、画面下部のリンク部分にURLを記入 する |
| ページにリンク → | リンクを張りたいイメージを選択し画面下部のリンクの指定を任意のファイルにドラッグする |
イメージの一部分にリンクを張る
imgフォルダーからmapを挿入 → 画像を選択した状態で画面左下マップの中の四角を選ぶ →任意の場所に図形を描く → リンクを張る
メールリンク
メールリンクを張りたい文章、もしくは画像を選択 → リンク先に「mailto:任意のメールアドレス」を記入 → ブラウザで確認 → ユーザーが設定しているメールソフトが起動される
アンカーポイント
一つのページが長くなってしまうとそのページのトップに戻るのにユーザーがストレスを感じてしまいます。適度な位置にアンカーポイントを作成しましょう。
ページの一番上にカーソルを置きます → 挿入 → アンカーポイント → 任意の名前をつける(今回はTOP) → ページの下部に文章を打ち、そこに｢#TOP｣と記入 → ブラウザーで確認
アンカーポイントはユーザーには見えません
練習問題 今までのことを応用してWEBサイトを作ろう
2.htmlを完成させよう
1.画像も含めた1行目を見出し1、コース名,料金を見出し2にする
2.タイトルを「コース案内|eggグラフィックアカデミー」、全ての画像に代替テキストを入れる
3.仮リンクを張る(コース名とコマ数の画像に仮リンクを張る)cssでimg周りの青枠を消す
4.cssルールを定義していく
| body | 背景色…＃cccccc 余白(padding)、マージン(marging)を0px |
| h1 | フォントサイズ…18px 文字色…ロゴと同じ色 背景色…＃999999 マージン(marging)…0px |
| h2 | フォントサイズ…14px 文字色…#52BC84 |
| p | フォント…明朝体 フォントサイズ…16px ライン高…24px 文字色…#0000FF |
| a | フォントサイズ…16px 文字色…#333300 |
| a:visited | 文字色…#993399 |
| a:hover | 文字色…#000000 |
| a:active | 文字色…#OOFFFF |
