練習問題

• トップ

• 事前準備

• フォルダー構造作成

• ビルダーの起動

• ビルダーの初期設定

• 編集画面の設定

• Web ページ

• バージョン選択

• ページ作成

• ファイル保存

• ブラウザ確認

• HTML の基礎

• 文字の入力

• 見出しタグ

• 練習１ index.html

• 段落タグ

• 水平線の挿入

• 練習２ dog.html

• 強調表示

• イメージの配置

• リストの挿入

• リストの入れ子

• 著作情報

• 区画

• リンクの挿入

• ページ内リンク

• トップページ

• CSS の基礎

• スタイルの指定

• 文字フォント指定

• 文字色の指定

• 文字位置指定

• 背景画像

• 画像を回り込む

• ボーダー指定

• 間隔・余白指定

• 中央揃え

• リンクの修飾

• 対象限定スタイル

• トップページ装飾

• 外部 CSS

• レイアウト

• １カラム

• ２カラム

• 参考資料

• 参加者作品

• 問い合わせ

～リンクを飾る～

基本的な スタイルについての練習です。

練習するCSSプロパティ：　疑似クラス

:link　未訪問のリンクの属性などを指定する。　アンカー <a> 専用。

:visited　訪問済みのリンクの属性などを指定する。　アンカー <a> 専用。

:active　選択中の状態を指定する。

:hover　カーソルやマウスポインタが乗っている状態を指定する。

使用例：

• CSS ソース： リンクの下線の表示を指定する
  • a:link      { text-decoration : none;     　}　　　　　　　　　　　　　　　　　　　
  • a:visited  { text-decoration : none;       } 
  • a:active  { text-decoration : underline; }
  • a:hover   { text-decoration : underline; } 

---

スタイルの設定ダイアログ：

• 

リンクに修飾指定をする

➊ index.html ファイルを開く。

➋ 以下のようになるようにリンクの修飾を設定します。

• 

• CSS ソース： マウスポインタが乗った時の状態 を指定
  • a: hover {
  •   font-size    : large; 　　　　文字を大きく
  •   color         : #cc6633;　　文字の色を変える
  •   background : #ccffcc;　　　文字の背景色を変える
  • }

➌ ブラウザで表示し、確認します。

➍ 上書き保存します。

他のリンクも修飾する

➊ html フォルダにある dog.html を開く。

➋ ［戻る］文字のリンクにも同じように修飾します。

➌ 上書き保存します。

⇒ 対象限定のスタイル設定へ進む