見出し画像

Webデザイン・マーケティング課 授業12日目

いしかわ

1〜3時間目 HTML5・CSS演習

使用テキスト

■1時間目

p90-p92

昨日の続き。
olタグの装飾。

ol li{
    padding-bottom:20px;
    margin-bottom:20px;
    background-image:url(path);
    background-repeat:no-repeat;
    background-position:left bottom;
}

padding-bottomで、背景画像が入るスペースを作っている事を説明。また、テキストは、背景画像をショートハンドで入れているが、一つ一つのプロパティで動きを説明。

また、擬似クラスの:last-of-typeを説明

ol li:last-of-type{
    padding-bottom:0;
    margin-bottom:0;
    background-image:none;
}

画像1

■2時間目

p92-p95

ナビゲーションを作る項目

index.html

<nav>
   <ul class="gnav-list-1">
       <li><a href="#">TOP<br>トップ</a></li>
       <li><a href="#">NEWS<br>お知らせ</a></li>
       <li><a href="#">ABOUT<br>当店につついて</a></li>
       <li><a href="#">RECRUIT<br>採用情報</a></li>
   </ul>
</nav>

<nav>
   <ul class="gnav-list-2">
       <li><a href="#"><img src="imges/icon-top.svg" alt="">トップ</a></li>
       <li><a href="#"><img src="imges/icon-about.svg" alt="">診療科目</a></li>
       <li><a href="#"><img src="imges/icon-checkup.svg" alt="">人間ドック</a></li>
       <li><a href="#"><img src="imges/icon-schedule.svg" alt="">診療時間</a></li>
       <li><a href="#"><img src="imges/icon-consultation.svg" alt="">相談窓口</a></li>
   </ul>
</nav>

こちらは、普通のHTMLなので、そのまま書いただけで、さほど説明もなし。navタグは初なので、ちょっと紹介した程度

style.css

@charset "UTF-8";

* {
   box-sizing: border-box;
}

.gnav-list-1 {
   background: #1b9aaa;
   padding: 0;
   text-align: center;
}

.gnav-list-1 li {
   display: inline-block;
}

.gnav-list-1 li a {
   display: block;
   padding: 1em;
   color: #fff;
   font-size: 12px;
   text-decoration: none;
}

.gnav-list-1 li a:hover {
   background-color: #146670;
}

.gnav-list-2 {
   background: #f0DCD4;
   padding: 0;
   text-align: center;
}

.gnav-list-2 li {
   display: inline-block;
}

.gnav-list-2 li a {
   display: block;
   padding: 20px 20px 10px;
   color: #7b645d;
   font-size: 14px;
   text-decoration: none;
}

.gnav-list-2 li a:hover {
   padding-bottom: 4px;
   border-bottom: 6px solid #7b645d;
}

.gnav-list-2 li a img {
   display: block;
   margin: 0 auto 1em;
   height: 24px;
}
* {
box-sizing: border-box;
}

この記述は、すべてのタグにbox-sizing: border-box;にするという意味。

.gnav-list-1 {
background: #1b9aaa;
padding: 0;
text-align: center;
}

.gnav-list-1 li {
display: inline-block;
}

ここの記述は、liにborderを入れて、liの要素を確認しつつ進めた。
liにinline-blockを入れずに.gnav-list-1にtext-align:centerを入れると、ulと同じ大きさで、横にならずに中央になってしまう。

スクリーンショット 2022-03-31 20.14.51

なので、display:inline-blockを入れて、横並びにしつつ、中央揃えする。

スクリーンショット 2022-03-31 20.15.47

2個目のナビも、途中までは1個目と同じ感じ。

.gnav-list-2 li a img {
    display: block;
    margin: 0 auto 1em;
    height: 24px;
}

imgタグにdisplay:blockを入れる事で、画像と文字が改行される事を説明。heightを入れて、svgを小さくし、marginの左右autoで真ん中に寄せている。

.gnav-list-2 li a {
    display: block;
    padding: 20px 20px 10px;
    color: #7b645d;
    font-size: 14px;
    text-decoration: none;
}

.gnav-list-2 li a:hover {
    padding-bottom: 4px;
    border-bottom: 6px solid #7b645d;
}

padding:20px 20px 10pxの下の10pxを、マウスオーバーした時に、ボーダーをつける時に、その分小さくして4pxにしている。

スクリーンショット 2022-03-31 20.21.02


■3時間目

p97-p99

tableタグの説明

全体をtableでくくり、行をtrでくくり、thとtdで見出しセルや通常のセルを作る。

画像5

index.html

<body>
   <table>
       <caption>手ぶらでBBQ料金比較</caption>
       <tr>
           <th class="col-1"></th>
           <th class="col-2">コスパパック</th>
           <th class="col-3">ボリュームパック</th>
       </tr>
       <tr>
           <th>金額</th>
           <td>3,000円 / 人</td>
           <td>5,000円 / 人</td>
       </tr>
       <tr>
           <th>食材</th>
           <td>無し（持ち込み）</td>
           <td>肉200g+野菜</td>
       </tr>
       <tr>
           <th>機材</th>
           <td>コンロ一式</td>
           <td>コンロ一式+テントセット</td>
       </tr>
   </table>
</body>

style.css

table,
th,
td {
   border: 1px solid #000;
}

本当はこの先cssを書くが、ここで終了

スクリーンショット 2022-03-31 20.25.35


■まとめ

index.htmlとcssフォルダにstyle.cssを作って読み込むという流れが、何回かあったので、だいぶ慣れて来た様子。

コードの記述も、とりあえず今日の段階ではスムーズにかけている。

後は、何度も繰り返して知識を定着させ、記述のスピードアップを図る。

そして、明日からオンライン！

この記事が気に入ったらサポートをしてみませんか？