【HTML＆CSS】リンク貼ろう/リスト表示しよう/表作ろう

おはようございます！

8月2日金曜日。言わずもがな晴れ🌞
最高気温35℃（東京）。
Yahoo!の天気予報みたら名古屋39℃とかなってたんだが。。
外出できんな。。

今日は「大雨時行」らしいです。

Copilot！「大雨時行」って？

七十二候の「大雨時行（たいうときどきふる）」は、夏の終わりにあたる時期で、毎年8月2日から8月6日頃に訪れます。この時期は、急に激しい雨が降ることが特徴です ¹ ²。

「大雨時行」は、青空にむくむくと湧き上がる入道雲が現れ、突然の雷鳴とともに激しい夕立に変わることが多いです。この雨は、乾いた大地を潤し、暑さを和らげる役割を果たします ¹ ²。

また、この時期は台風の季節の始まりでもあり、雷や夕立が多くなります ²。日本の夏の風物詩ともいえるこの時期の雨は、自然の力強さを感じさせてくれますね。

＜引用＞¹: 暦生活 – 大雨時行 ²: 暦生活 – 七十二候／大雨時行

「大雨時行」に関連する言い伝えは何かある？

また、「遣らずの雨」という言葉もあります。これは、帰ろうとしている人を引き止めるかのように突然降り出す雨を指します ²。これらの言い伝えは、日本の夏の風物詩である夕立や集中豪雨の特徴をよく表していますね。

＜引用＞¹: 暮らしのほとり舎 – 七十二候「大雨時行」 ²: 神社・寺御朱印めぐり.COM – 大雨時行の意味・由来・読み方

上手いこと言うな～。確かに局地的な夕立が最近すごいです。
「夕立は馬の背を分ける」か。φ(｀д´)ﾒﾓﾒﾓ..．

呼んだ？

またブレイクに時間かけてもうた。。

さぁ颯爽とやっていきます！
今日の教材もこちら、

よしやっていこう。

CHAPTER２　Webの基本構造を作る！HTMLの基本

CHAPTER２－８

リンクを貼ろう

書籍だと「はろう」ってひらがなになってるけど、なんか意図ありか？

…まあいいや

◆リンクを貼る<a>タグ

いますぐ<a href=”Yahoo! JAPAN“>Yahoo!</a>で検索

※リンク先をherf属性で指定する。

実装すると

いますぐYahoo!で検索

・画像にリンクを貼ろう

　<img>タグと組み合わせて、画像にリンクを貼る。<img>タグを<a>タグで挟む。

実装すると

※Yahoo!JAPANさんが画像の場所かファイル名変えちゃったら↑の画像は見えてませんので悪しからず。

・メールアドレス宛てのリンク

　メールアドレスへのリンクを貼る場合は、href属性に「mailto:」と記述し、続けて送り先のメールアドレスを記述する。

<a href=”mailto:info@example.com”>お問い合わせ</a>

実装すると

お問い合わせ

※メールは届きませんので悪しからず。

CHAPTER２－９

リストを表示しよう

◆箇条書きリストを作る<ul>タグと<li>タグ

　箇条書きリストを表示するには<ul>タグを使う。「ul」は「Unordered List」の略で、「順序のきまっていないリスト」を意味する。

　また、リストの各項目は<li>タグを使う。「li」は「List Item」の略で、箇条書きにするリストアイテムを意味する。

<ul>
　<li>麦わらのルフィ</li>
　<li>赤髪のシャンクス</li>
　<li>黒ひげティーチ</li>
　<li>赤鼻のトナカイ</li>
</ul>

実装すると

麦わらのルフィ
赤髪のシャンクス
黒ひげティーチ
赤鼻のトナカイ

※先頭に黒丸（●）が付く

◆番号付きリストを作る<ol>タグと<li>タグ

　番号の付いたリストにするには<ol>タグを使う。「ol」は「Ordered List」の略で、「順序立てたリスト」の意味。<ul>と同様、<ol>タグの中に<li>タグでリストの項目を記述する。

朝、起床。
昼、昼食。
夕方、買い物。
夜、ゆっくり。

CHAPTER２－１０

表を作ろう

◆表組みの基本

＜表組みの主なタグ＞

タグ	目的
<table>	表のタグ。表全体を囲む。
<tr>	「Table Row」の略。表の1行を囲む。
<th>	「Table Header」の略。表の見出しとなるセルを作成。
<td>	「Table Data」の略。表のデータとなるセルを作成。

＜イメージ＞

＜簡単な表＞

<table border=”1″>
　<tr>
　　<th>プラン名</th>
　　<th>料金</th>
　</tr>
　<tr>
　　<td>どきどきプラン</td>
　　<td>月額5,500円</td>
　</tr>
　<tr>
　　<td>スペシャルプラン</td>
　　<td>月額1,980円</td>
　</tr>
</table>

実装すると

プラン名	料金
どきどきプラン	月額5,500円
スペシャルプラン	月額1,980円

※WordPressの設定が自動で入っちゃってるので色とかついちゃってます。。

◆セルをつなげる

まず、基本となる表を作成すると、

実装すると

セル１	セル２
セル３	セル４
セル５	セル６

・横方向につなげる

　セルを横につなげる場合は、<th>タグまたは<td>タグにcolspan属性を追加する。
下記例は、2つのセルをつなげているので「colspan=”2″」を追記。

実装すると

セル１＋２
セル３	セル４
セル５	セル６

・縦方向につなげる

　セルを縦につなげる場合は、rowspan属性を追加する。下記例では、セル３とセル５をつなげているので「rowspan=”2″」を追記。

<table border=”1″>
　<tr>
　　<th colspan=”2″>セル１＋２</th>
　</tr>
　<tr>
　　<td rowspan=”2″>セル３＋５</td>　<!– 縦関係のセル３と５を結合 –>
　　<td>セル４</td>
　</tr>
　<tr>
　　<!– セル５の<td>タグを削除 –>
　　<td>セル６</td>
　</tr>
</table>