学習の経緯

非web系のシステム開発がメインだったが、昨年からsalesforceを始める。
Platform Developer Iの資格はとれたもののフロントエンド側はサッパリ
LWC（Lightning Web コンポーネント）に興味がでてきたが、
それを理解する為の前提となるjavascriptも解らないし、htmlも解らない。
そのため基礎の基礎を学習するに至る

現状の知識レベル

html
h1タグは見出しで使う、pタグは何かメッセージ書くとき使う。
frameタグやtableタグは知っている。
アクセスカウンターとかキリ番ゲットとかの時代止まり…

css
デザインセンスが必要で極めるとお洒落なサイトを作れるモノ。

今回のゴール

htmlとcssを使ったwebサイトの構成の触り理解する。

HTMLでわかったこと

div: 区切りタグ
画面構成の枠として使用し要素をまとめて構造化する。これ自体が何かすることは無く、構造化のための目印的な使い方をする。

ul: リストタグ
cssのfloatと組み合わせて要素を横並びに表示する時にたくさん使う。
テキスト以外にこの中にdivタグで囲った構成要素を作り、左に画像、右にテキストといったレイアウトを作ったりできる。
デフォルトでは中点が表示されるので、list-style-type属性にnoneを設定し中点を非表示にすることで只の箇条書き用のタグが素敵デザインのためのタグになる。

ulタグの使用例

<ul>
  <li>文章１</li>
  <li>文章２</li>
</ul>

dl: 説明タグ
前述のulタグと異なり子要素タグの、用語「dt」とその説明「dd」の組み合わせで使う。
ulタグ同様にlist-style-type属性にnoneを設定して使う。

dlタグの使用例

<dl>
  <dt>概要１</dt>
  <dd>説明文</dd>
  <dt>概要２</dt>
  <dd>説明文</dd>
</dl>

img: 画像タグ
画像を表示する時に使用する。
ファイルの指定は相対パス。
alt属性は画像が表示出来ない場合に設定したテキストを表示するのに使われる。
自動読み上げソフトで読まれる場合があるので適切な内容にすることが望ましい。

h1～h6: 見出しタグ
それぞれ文字の大きさが異なり、h1が一番大きくh6が一番小さい。

p: パラグラフ（段落）タグ
文章の段落の纏まりを表す。
pタグの前後には1行改行が自動で入る

CSSでわかったこと

cssは、htmlで作られた骨組みを彩る装飾品
文章（html）と装飾（css）に分離する方がデータ構造的に何かと都合がよい

書き方１
要素{プロパティ名:値;}
htmlタグに対して定義した内容は、そのcssファイルを参照するhtmlファイル内全てに作用する。
これによりタグに対し同じ内容の設定を個々にするより外部化した定義を参照する方が効率的となる。

タグに対する定義例

ul, dt, dd {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

書き方２
.クラス名{プロパティ名:値;}
クラス名として定義すると、そのクラスを指定した箇所のみに作用する。
定義する時は、先頭にピリオド「.」を付ける。

クラスとしての定義例

.content{
  width: 900px;
  float: left;
}

指定方法

<ul class="content">
  <li>テキストメッセージ１</li>
  <li>テキストメッセージ１</li>
</ul>

終わりに

今回は道具とその使い方が（なんとなく）解った。
次回はもう少し踏み込んで学ぼうと思う。

HTML、CSS学び始めメモ