資料小分類
資料大分類
- CSS 練習
リンク
～練習記録の準備～
基本的な スタイルについての練習です。ここでは、作成された作品ページを一元で記録するようにします。
練習作品の記録準備
➊サイトトップページtop.htmlを開きます。
➋サブページstudy.htmlを開きます。
- リンクが貼られているサブページを開くには、リンクボタン［ＨＰ勉強会］を右クリック→［リンク先ページを開く］をクリックすれば開きます。
➌［作品→作品一覧］に、下表スタイル記述作業名欄の文字列を追加します。
-
スタイル記述作業名 作品ページ 資料 ビルダーでスタイル指定 css01.html スタイルの指定Step1 直接スタイル指定を入力 css02.html スタイルの指定Step3 フォントの種類 font01.html 文字フォント指定Step1 文字の太さ font02.html 文字フォント指定Step3 文字のスタイル（斜体） font03.html 文字フォント指定Step4 文字のサイズ font04.html 文字サイズ指定練習２ 一部の文字のサイズ akita_index.html 文字サイズ指定応用練習 文字の色 color01.html 文字色指定Step1 文字の色ーHSL color02.html 文字色指定Step3 文字の色ーHSLA color03.html 文字色指定Step4 見出しの文字の色 akita_index.html 文字色指定応用練習 文字位置（中央揃え） akita_index.html 文字位置指定練習 文字を両端に揃える justify01.html 文字位置指定応用練習 １行目を字下げ akita_diary.html 字下げインデント指定 背景画像 akita_index.html 背景画像Step2 背景色 background01.html 背景画像応用１ 背景にグラデーション gradation01.html 背景画像応用２ 背景画像を固定 background02.html 背景画像応用３ 画像を回り込む akita_float.html 画像を回り込むStep1 画像を右に配置する float01.html 画像を回り込む応用１ 画像を交互に配置する float02.html 画像を回り込む応用２ 見出しにボーダー akita_border.html ボーダー指定h1 画像に額縁 akita_gaku.html 画像にボーダー 見出しにメリハリ test05.html メリハリある見出し 角丸のボーダー border02.html ボーダーの角丸を指定 余白 test06_01.html パディング（余白）設定 間隔 test06_02.html マージン（間隔）設定 表を中央に表示 test06_03.html 中央揃え設定 全体を中央に表示１ akita_center.html ページ全体を中央揃えに 全体を中央に表示２ akita_dog.html リンクを修飾 akita_link.html リンクを飾る IDとクラスのスタイル target01.html 対象限定のスタイル設定 - 勉強会の進行途中で、リンク先ページを作成したり、編集しますが、その後で上記文字列にリンクを挿入していきます。