HTML/CSSまとめ - ソニックの部屋

気になった用語のまとめ

HTML

(html)ulとliはセットで使用、ulはliの親、liはulの子の関係
(htnl)hやulタグは改行される（昔はブロック要素と呼んでいたが今は呼ばれない）
(html)image src="" alt="" このaltは画像の説明を入れておく（画像が表示されなかった時のため）
(html)pは本文を表す
(html)< br >で改行を表す
(html)画像にはfigureタグを使う
(html)リンクを入れたい時はアンカー要素「a href="リンク"」で要素を囲む
構造化タグとはレイアウトを変えるためだけにHTMLに書き込むタグのこと（divタグ）
(html)class名は番号から始めることはNG
(html)送信にはformタグを使う
(html)formタグの中でデータを受け取るのがinput要素、それをまとめるのがlabel要素
(html)formタグの中のaction属性にデータの送り先を書く
(html)formタグの中のmethod属性にget（送信内容がurlで返される） or post（送信内容が本文で返される）を書く
(html)formタグの中のencotype属性に送信するデータ形式を書く
(html)formタグの中のid属性に他と区別するために名前を書く
(html)inputタグのtype属性（入力するデータの形式）、size属性（半角文字数）、maxlength（最大文字数）を指定
(html)textareaタグの中のrows属性（行数）、cols属性（列数）を指定
(html)inputタグでの送信ボタンは「type="submit" value="送信" form="id属性で指定したid"」とする
(html)inputタグでのリセットボタンは「type="reset" value="リセット" form="id属性で指定したid"」とする
(html)リンクはアンカータグ「a href="URL"」を使う
(html)アンカータグは対象の外側のタグに付けても機能する
imgタグはインライン要素（横幅を持たない要素）を使う
(html)アンカータグは対象の外側のタグに付けても機能する
imgタグはインライン要素（横幅を持たない要素）

CSS

cssはid属性は.ではなく#から始める
cssは親要素の設定が小要素に反映される
cssはmargin 0 autoで中央揃えとなる
(css)同じセレクタの中では下に書いたものが優先される
(css)gridlayoutは要素数を少なくできる
(css)1frはwidthの残りを表す
(css)「display: grid;」でgridlayoutを宣言
(css)子供要素をgriditemという
(css)gap: 縦横; によりmarginを使うより簡単に空白を挿入できる
(css)gridlayoutは一部省略できるが初めは基本に従って省略しない
(css)孫要素にはgriditemは適用できない
(css)hタグなどはデフォルトでmarginなどが設定されているためreset.cssで設定を消す
(css)reset.cssはstyle.cssの前に書く（cssは後のものが読み込まれるため）
(css)「display: flex;」で横並びにする、親に書けば子に適用される
(css)flexボックスには子を横並びにするプロパティがある
(css)それは「justify-content: space-between;」→複数の画像を均等に配置する
(css)floatでも横並びにできるが色々な要素が回り込んだりして面倒なのでflexボックスを使う
(css)「margin-left: auto;」で右揃え
(css)「text-align: center;」で文字の中央揃え
(css)back-ground-color: #aaa; のように同じ記号（例えばaaa）が続く場合はグレーになる
(css)color: inherit;のようにinheritは親要素を引き継ぐ
(css)text-decoration: none;リンクのアンダーラインを消す
(css)a:hoverでリンクにマウスを乗せた時の動作を設定する
(css)gap 20px 30px; 行間（20px）列間（30px）の指定、gridlayout, flexboxの際に使用
(css)gapは個別コントロールできないが、grid-template-columns(rows)を調整することによりコントロール可能
(css)「margin 0 auto;」 width:100%とした場合は左記は不要
(css)gapでは余白が全設定になるので個別で設定したい時はmargin,padding(大体は上の要素にmargin-bottom)を使う
(css)縦要素を%表示したい場合は親の横要素のwidthを基準に設定される誤解されやすい点！！
デバイスごとの切り分けは実態は画面サイズの切り分け
cssの書く手順は１.iPhoneの設定（widthを%表示）、２.iPadの設定（iPhoneの設定との差異のみ記載）、3.PCの設定（左右に余白と中央揃え）
(css)grid-template-rows: repeat(3, 22px);←grid-template-rows: repeat(22px 22px 22px);と同じ意味
(css)grid-template-columns: repeat(6, 1fr);←横幅は1frを使うと%表示のように画面サイズに合わせて変動するため便利（高さは設定が難しいため固定値でもよい）
(css)セレクタはhtmlの対象箇所に合わせて順番通りに書く
(css)grid-templateの自動流し込みのロジックは複雑なので一旦無視で良い
(css)display: none; により画面サイズが異なる所で設定すると設定を消せる
(css)spanタグは幅や高さ（ブロック要素）を持たない。持たせるには、「display: inline-block;」とする
(css)右に寄せるには「margin 0 0 0 auto」とする

その他

webサイトとはwebページを表示するために必要なファイルを全て収納したフォルダのこと
要素はボックスで囲まれている
間違いやすい点：widthはボックスの中のコンテンツ幅を表す
ワイヤーフレームとはwebページのスペックを書いたもの（＝デザイナーから貰う指示書）
クラウド上のサービスにあるフォントを使うことで全てのブラウザで共通のフォントを使用する技術がある
そのフォントをWEBフォントと言い、例えばgoogleとadobeがある
WEBフォントを使用する場合は開発者のPCにインストールする必要がある
XDによりプロパティからWEBページの仕様の確認が可能

レスポンシブwebデザイン

レスポンシブwebデザインとは自動でデバイスに合わせたデザインにする仕組み
レスポンシブwebデザインを可能にするにはメディアクエリ、フルードグリッド、フルードイメージの3つの技術が必要

メディアクエリ

デバイスごとの画面サイズに応じてレイアウトを変化させる技術
まずは画面が小さいスマホ用から作成してくのがポイント
htmlは1つ、css内で各デバイス用の設定を適用する(メディアクエリはhtmlは簡単、cssが複雑になる)
(html)< meta name="viewport" content="width=device-width" > スマホの画面でどう表示するかの設定
(css)@media screen and (min-width: 375px) {} 画面サイズでの条件設定

フルードグリッド

画面サイズに応じて同じデバイス内でも要素やフォントなどの大きさを変化させる技術
pxを絶対値でなく相対値(%)で設定する
コツは初めは絶対値でやり、その後相対値に直す
(css)font-size: 1.5em; em（エム）はデフォが16px、よって左記は24px（1.5*16）

フルードイメージ

配置したいイメージを可変にする
(css)max-width: 50%; %は親要素を100とした場合となるため、左記は親の半分の幅を表す
(css)background-image: url(images/mejiro.jpg);) 画像を背景として読み込む
(css)paddingの幅に対する%指定は要確認⚫︎

width: 100%;
height: 0px;
padding-bottom: 66.72%; /*幅に対する%指定*/
background-size: cover;

参考文献
むらもりこう（村守康）, 2023, 「【最新2022】未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す　最高の実践コース」, udemy, （2023/8/11取得，https://www.udemy.com/）．