ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強45日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はいどうも〜

 

今日も作業をしました!

今日は休みだったんですが、進捗ちょっと少なめでした

 

でも、今日も成長!

f:id:terushi-diary:20191006014107p:plain

 

f:id:terushi-diary:20191006014204p:plain

コードと実際の表示画面です。

 

<caption>仕事メニュー一覧
<details>
<summary>列の構成</summary>
<p>仕事メニューを一覧化した表。1列目が出来る事、2列目が詳細、3列目が価格</p>
</details>
</caption>

 

 caption=見出し。

 details=内容の詳細を記述してある場所で普段折りたたんであるところですね!

 summary=展開部分のタイトル

 

tableタグを使う際、table、thead、tfoot、tbodyの順番で記述する

 

<tr>
<th scope="col">出来る事</th>
<th scope="col">詳細</th>
<th scope="col">価格</th>
</tr>

 

これは下に向かうデータに対する項目名ということを意味しています。

 th=項目名であり、scope="col"=縦のデータに対しての項目名という意味を持っています。

 

<tr>
<th scope="row">Webデザイン</th>
<td>Photoshopを使用したWebサイトデザイン</td>
<td>50,000円〜</td>
</tr>

 

scope="row"は横方向に対する項目名ということを意味しています。

 

<tfoot>
<tr>
<td colspan="3">2014年4月1日現在の情報です。</td>
</tr>
</tfoot>

 

colspan="3"  隣同士のデータをくっつける意味。この記述だと、行を3つくっつける意味です。

 

f:id:terushi-diary:20191006020020p:plain

f:id:terushi-diary:20191006020135p:plain

<colgroup>

 <col width="280">

<col width="320">

<col width="320">

</colgroup>

 

colgroup=各列の横幅を指定しました!

 

<b></b>

 太字

 

こんな感じです!

 

毎日毎日ひたむきにやっていくことで今日もパワーアップできました

ありがとう、地球。

 

そいじゃ、おやすみなさい。