HTMLフォーム部品編

・input
input type=”text”
とすることで入力フォームを設置することができる

input type=”text” value=”hello”
ではじめからテキストをフォームの中に書いておくことができ

input type=”password”
とすることで伏せ字で入力することもできるようにすることができる

textarea /textarea
で複数行入力することもできる

・label
入力部品等の説明をするときはラベルを使うのが一般的

input type=”text” id=”name”
id属性を付けて

label for=”name”
と紐付けることができる

<label for=”name”>名前</label>

また、入力部品をlabelタグの中に入れることもできる

<label>名前 <input type=”text”></label>

この場合、入力部品の紐付けが明確なのでidとforは省略できる
通常はこのかたちで使用するものかなと思った。

・select
このタグを使うことでドロップダウンリストを設置することができる
選択肢はoptionで挟み込み、それをselectタグで挟み込む

<label for=”color”>好きな色</label>
<select id=”color”>
<option>色1</option>
<option>色2</option>
</select>

selectedをつけて初期表示、sizeで初期表示数、multipleで複数選択も可能になる
<select id=”color” size=”4″ multiple>
<option>色1</option>
<option selected>色2</option>
</select>

ドロップダウンなども割と簡単に設置できるものなのだなと思いました(小並感)

フォーム部品編#3まで終了

・div
単体では意味を持たないが、囲った部分をグループ化して幅や余白や背景の色を変更したりできる

スタイリングするための識別子にはclassが使われるので、

div class=”container”

として、名前は自由につけられる

後はcssの方で

.container{
}

と紐付けして中身をいじっていける

・中央揃い

.container{
margin-left: auto;
margin-right: auto;
}

とすると、左右の余白を同じ幅で設定してくれるので中央揃いになる

・Flexbox
情報を横並びにしたいときに使う
親要素の中にプロパティを挿入する

display: flex;

・四角いアイコンを丸く表示する

.icon img{
border-radius: 20px;
}

とすることで角を丸くすることができる

・アイコンに枠を表示する

border-width: 4px;    枠の幅
border-style: solid;   枠の線の種類
border-color: white;   枠の色

このように指定して枠をつけることができる

・infoの中のh1にだけ指定したいとき

.info h1{
}

とすることで、その部分だけ指定して変更することができる

・font-weight: normal;
することで太字だったフォントを普通の太さにすることができる

・list-style-type: none;

とすれば箇条書きの黒丸を消すことができる

・margin: 0;
margin-bottom: 16px;

とすることで元々設定されてたマージンを無くした後にマージンを設定することができる(使うのか?)

・align-items: center;

flexを使ったところにこれを入れることで縦方向に中央揃いさせることができる

・.works > h1

とすることで、直下のh1に対してのみスタイルを適用するよという意味になる

.works > section > h1

こんな感じで使ったりもする

・line-height: 1.8;

これは元の行の高さより1.8倍で表示するという意味になる

◯これではじめてのCSSは終わりです。
ようはHTMLのある括りをCSSのシートに紐付けて、そこにここはこの幅、この色、などを指定するのがCSSなのだなと思いました。
仕組みはわかりやすかったです。

今月の目標はまとめサイトのトップページ風のものをHTMLとCSSを使って作ってみるまでだったのですが、一通り勉強しただけで終わってしまったので土日に少し触って作って仕組みを理解できたらなと思います。

20200227

◯CSS

・文字のカラー変更
h1を青色に変更したいときは

h1 {
color: blue;
}

と書き込む

また、
色の指定方法は他にもあって、
color: rgb(0,255,0);
color: #00ff00;
color: #0f0;

RGBで指定したり、16進数で指定したりできる。
モック作成でよく使用するのは16進数なのでこれがメインか？

・フォントの設定
bodyの中身に
font-family: verdana,sans-serif;

と入力するとフォントの指定ができる

・ボックスモデルの確認
検証でComputedを開くとボックスモデルが見れる
padding、border、marginを設定することによって見た目を変えることができる

どの数値をいじればどこが変わるかはモック作成のときにいじったので覚えている

・margin
margin-top: 0px;
とすることで周りの余白を消すことが出来る

#6まで終了

わかりやすいのでサクサク見れた。
あとは使って覚えていきたい。

20200226

◯復習込

意味のあるまとまりにタグを使って見やすくする
(bodyの中に書き込む)

・header
導入的なコンテンツ

・footer
締めくくりのコンテンツ

・nav
ナビゲーション
ページ内の主要なナビに使われる
メニューのリンクなど

・aside
関連性が薄いコンテンツ

・article
記事・独立したコンテンツ

・main
主要なコンテンツ
ページ内で1つしか使えない

・section
汎用的に使える区切り

◯新規

・time
日時を表すときに使う

・div
背景色の変更などに使う

<div style=”background: silver;”>

</div>
とすれば指定範囲の背景がシルバーになる

・span
文字の一部の色を変更するときに使う
<h1><span style=”color: red;”>記事</span>のタイトル<h1>

「記事」の部分だけ赤くなる

◯感想
数回見て使っただけでは覚えられなさそうだなと感じました。
メインのタグだと思うので使って慣れたいです。
今回でPアカの基礎文法編が終わりなので、はじめてのCSSを見ていこうと思います。
それが終わり次第サイトトップ風な簡単なCSS込のHTMLを書いて行こうと思います。

◯復習
過去の勉強テキストを見て思い出しながら見ていきました。

◯新規

・ページ内の別の場所にリンクを貼る

<ul>
<li><a href=”#about”>沿革</a></li>

</ul>

<h2 id=”about”>沿革</h2>

・ページの先頭へ戻る
p hrefで#topと表示させるとよい

よく見る機能で割と便利なので覚えておく

花粉症がひどくて全然はかどらなかったので今日はこれだけにします。
このままだとかなり間に合わなさそうなので土日にもやる予定です。

20200221

◯復習込

・箇条書きリスト

• 項目
• 項目
• 項目

箇条書きになる

・順序突きリスト

1. 項目
2. 項目
3. 項目

1,2,3と順序がつく

・説明リスト 項目 説明 項目 説明

項目と説明がペアで表示される

◯新規
・表の表示の仕方
全体をtable
見出しをthead
中身をtbody
それぞれの行をtr
見出しのセルにth
中身のセルにtd

その他
・表の構造の作成
・別ファイルへのリンク

#16まで終了

20200220勉強

開始時間が遅くなってしまったので復習のみ
と思ったのですがプレアカの方でしか出てこないタグが出てきたので少しだけ普通にやりました。
昨日の続きでPアカの8から

・hタグ
タイトルの重要度から、h1、h2など決めていく

・strongタグ
特定の文章に強調をもたせたいとき、
strongタグで挟み込む
太字になる

・blockquote
誰かの引用を表すときに挟み込む
出典URLがわかるときは
blockquote cite=”URL”
で表すことができる

・hr
話題が変わったよという意味で
hrタグをピン挿しすることで表すことができる
水平線が引かれる
※装飾のために使うのはNG

・br
改行するときに使う
改行される

・<br>

これは不等号を&と; でそれぞれ挟み込んでおり、文字実体参照という仕組みでhtml上でもタグの表示をすることができる
<br>

・pre
挟み込むことですでに整形されたテキストをそのまま表示することができる
HTML内の字下げなども反映される

Pアカの10まで終了

20200219

◯復習込
・imgの挿入
img src=”” width=”” height=”” ait=””
の形を覚える

◯新規
・ul
ordered listの意味で、順番のないリストを囲うタグで、箇条書きのリストを表す

・li
上のulの中で一つ一つにつけていく
リストアイテムの略

・a
アンカーの意味で、画像や文章にリンクを設定することができる

a href=”” target=”_brank”
この形で別タブで開くことを表すので覚える

ここでドットインストールの無料のはじめてのHTMLは終了
PアカウントのHTMLのレッスンに入ったが最初はほぼ同じ作業の繰り返しなので復習として見ていく。

Pアカの07まで終了

20200218

◯復習込
・hタグ
見出しの役割をしていて、重要度が下がるごとにh2、h3と使っていく

・img src=””
の後にaltタグをつけることで画像についての説明を入れることができる
例

・内容の文章は基本的に

タグを使う 例

この映画はおもしろかったです(小並感)

◯新規
・html内にメモ書きを入れたいときは

を使用する

・headerタグ
bodyタグの中で使うタグのようなもの
文書全体に対する情報を書き込むheadタグと間違えないように

・footerタグ
文書下部の情報を入れる

・sectionタグ
これが一つのまとまりですよといった意味で、汎用性の高いタグ。
コンテンツをこのタグで囲って表す

◯復習

画像の挿入

<img>

このままではどこにある画像を表示するかわからないので、

<img src=” “>(srcはsource)

画像の大きさを指定する場合、

<img src=”” width=”120″ height=”120″>

この形で横幅と高さを指定することができる

◯新規

htmlのheadの部分に情報を書き込む
文字コードの挿入
<meta charset=”utf-8″>

タイトルの設定

<title></title> で挟み込むことでタイトルの設定をすることができる

faviconの設定
<link rel=”icon” href=”faviconのある階層指定”>で設定可能

文章で説明を加える「メタディスクリプション」
メタタグで、
<meta name=”description” content=”太郎のポートフォリオサイトです。”>

検索結果画面でサイトの下に表示される説明文になる
基本的に120字以内に抑える