プログラミングの勉強を再開していた。 ChatGPTをもっと活用したいと思ったのはじめプログラミング組めたらなと思う場面がしばしばあり、再開する動機になった。 キリ良く次のコースが始まるところで終わってたので気分的にも再開しやすい。 CSSはHTMLに比べ…

1ヶ月かけてやってきたけどついに修了。10時間くらいかかったのかな。僕の場合はアウトプットや復習に結構時間を割いてたので、ただ進めていくだけなら1~2時間で終わりそう。 HTMLの基本を学ぶコースだったので大部分は知ってる内容だったけど、なんとなく理…

footer要素は、header要素やmain要素と同じく、コンテンツを区分する要素の一つ。 "so far"は「ここまで」 "render"は補語を取って「～にする」という意味があるが、ChatGPTによるとITの文脈では コンピューターサイエンスやウェブ開発の文脈では、"render"…

フォームの質問で複数の回答を得たい場合、input要素のtype属性の値をcheckboxにするとチェックボックス形式になる。 input要素とinput要素のテキストを関連付けるには、テキスト部分をlabelでネストし、label要素にinput要素のid属性の値と同じ値のfor属性…

fieldset要素はフォーム内の関連する入力欄やラベルをグループ化するのに用いられる。fieldset要素でネストすると枠が現れる。 filedset要素はブロックレベル要素。ブロックレベル要素は改行して表示される。 legend要素はfieldset要素の内容を、つまりフォ…

ラジオボタンはデフォルトでは複数選択できるようになっている。一つを選択したときその他は未選択の状態にするには各input要素に同じ値のname属性を加える必要がある。 ラジオボタンを選択してフォームを送信すると、フォームデータはname属性及びvalue属性…

label要素はinput要素のテキストとinput要素自体を関連付けるのに(特にスクリーンリーダーのような支援技術に)役立つ。例えばlabel要素でinput要素をネストするとテキストをクリックすることで対応するボタン(corresponding button)を選択できる。"correspon…

button要素はクリック可能なボタンを作れる。 button要素は一切属性を指定していないデフォルトの状態ではform要素のaction属性で指定した場所にフォームデータを送信する。しかしデフォルト動作に依拠すると混乱を引き起こすかもしれないため、きちんと属性…

input要素のplaceholder属性はユーザーがどんな内容を入力すべきかヒントを与えることができる。値に任意の内容を入力するとそれが入力欄に表示される。 required属性はユーザーが必要な情報を未入力の状態で送信することを防ぐ。required属性に値はなく、in…

input要素は自己終了タグとなる。 input要素には多くの属性があり、様々な方法でデータを集められる。例えばtype属性の値をtextとするとテキストフォームとなる。 解説は"There are many kinds of inputs you can create using the type attribute."となって…

form要素のaction属性はフォームデータの送信先を示す。

1レッスンが短く、ちょっと記事が分かれ過ぎなこともあり、今回からまとめて1日分メモすることにした。 Step32の"The strong element is used to indicate that some text is of strong importance or urgent."の部分、"be of [noun]"という構文で「性質があ…

olはordered listの略。「順序付きリスト」と訳せる。同様にul、unordered listは「順序なしリスト」となる。

強調(em)要素はテキストを強調するために用いられる。該当箇所が斜体になる。 emはemphasisの略。

図キャプション(figcaption)要素はfigure要素内の画像の説明の記述を追加するために用いられる。

figure要素は独立したコンテンツ(self-contained contents)(figure要素だけ取り出してもそれ単体で成り立つようなコンテンツ)、また画像とキャプションを関連付けられる。 "contain"は「含む」、"self-conatined"は「必要な物が全て揃った、自己充足的な」な…

liはリスト項目(list item)要素。 itemって日本語の「アイテム」の意味で覚えてたので改めて調べたんだけどいまいちわからない。リスト項目のことも指すみたいだけど、具体的な物品も指すんだろうか。

下位の見出し要素を使うならば、それは新しいサブセクションが始まることを示唆する。

section要素はどういう区分なのかという解説がなかったのでmdnを見てみたところ汎用的な区分要素だから該当する要素がなければ使えということらしい。またsection要素の中には原則的に見出しを置かなければならない。 "you should make use of a section ele…

a要素のaはanchor(アンカー)の頭文字。アンカー要素やアンカータグといったりする。

すべてのimg要素にalt属性をつけることが推奨される。alt属性のテキストはスクリーンリーダーに用いられることでアクセシビリティを改善したり、画像の読み込み失敗時に画像の代替となる。

HTMLの属性(attributes)は開始タグ内に記述される特別な用語で、要素の挙動を制御する。例えばimg要素のsrc属性は画像のURLを指定(specify)する。 specifyは明示する。特定するだと勘違いしていた。

img要素は終了タグを持たないが、終了タグを持たない要素のタグを自己終了タグ(self-closing tag)という。

ある要素の中に別の要素を記述することをネストする(nesting)という。nestは入れ子という意味も持つ。 ネストされた要素は外側の要素より2スペース分右に配置する。 そのようにスペースを入れることをインデント(indent)という。indentはギザギザさせる、く…

HTML5にはHTMLの可読性を高めるため、またSEOやアクセシビリティのために異なるコンテンツ領域を識別する要素がいくつかある。 メインセクションを示すにはmain要素を用いる。

p要素は段落を作るために使われる。 要素をタグの間のテキストだと勘違いしていて、要素とタグの関係を理解していなかった。タグは要素を開始・終了させるもの、要素はタグとタグの間も含めたすべてを指すタグの上位概念。 参考 developer.mozilla.org devel…

h1からh6までの見出し要素はコンテンツの重要性を表し、数字が大きいほど重要性が大きく、小さいほど重要性は小さくなる。 h1は各ページで一度しか使えず、重要度の低い見出しは重要度の高い見出しの下に置く。

色々自分用のアプリとか作りたいとか手に職つけたいとか、いつかイチから挑戦しようと思って登録はしていたFreeCodeCamp。今回チャレンジしてみることに。開発環境は準備する必要がなくWeb上でコーディングしてアプリを作成しながら学んでいく方式。 以前は…