こんにちは、すぐるです!
sugulogをお読みいただきありがとうございます!!
このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。
少しでもお役に立てれば幸いです。
今回は、こんな時どうすればいいの??ということで
-
HTML、CSSの一問一答
を記述していきます!!
その為このブログを読むことで、HTML、CSSのどうすればいいの?が解決されるのはもちろん、何か困ったときのカンニングペーパーとして参考になること間違いなしです!
また、新しいHTML、CSSの一問一答に出会うたびに追記していきます!!
是非最後までご愛読ください。
・HTML、CSSの一問一答
HTML、CSSの一問一答に出会った順に書いてます。
全てのお誘いを断り、心を鬼にしながら学習した思い出順なのでご了承ください。
・HTML上にGoogleマップを埋め込む方法は??
Googleマップ上で表示させたい住所を検索する。
左上のメニューバーをクリックし、「地図を共有または埋め込む」をクリックする。
「地図を埋め込む」をクリックする。
「HTMLをコピー」をクリックする。
HTMLで表示したい箇所にペーストすると埋め込める。
・HTML上にYouTubeを埋め込む方法は??
YouTube上で表示させたい動画を検索する。
動画に表示される、「共有」をクリックする。
「埋め込む」をクリックする。
表示されるコードをコピーする。
HTMLで表示したい箇所にペーストすると埋め込める。
・リキッドレイアウトでのページ作りのコツは??
基本的にpxを使用せず、vw、vhで幅、大きさを指定していく。
上限や下限が指定されておりその大きさでビューが崩れない場合や、全体のバランスが悪くならない場合はpxを使用しても問題はない。
フォントサイズはvwで指定すると、ブラウザの大きさによって変化する。
表示領域の横幅の上限や下限を指定する場合は、max-widthやmin-widhtを設定する。
実際にブラウザの幅を変えながらビューは崩れないか、全体のバランスは悪くないかなどを確かめながら実装する。
※自分の感覚で書いているため、ご指摘や他に何かコツがあれば教えてください。
・背景画像をリキッドレイアウト(要素フルサイズ)に対応させる方法は??
background-imageで背景画像を指定する。
background-size: coverで大きさを要素の幅に合わせる。
幅を変えた際に画像のバランスが崩れる際は、background-positionで調整する。
・全ての要素にCSSを適用させる方法は??
セレクタ名として*を使用する。*は全ての要素に適用させるという意味がある。
・button要素とform要素を関連づける方法は??
button要素は初期値では直近の親要素となるform要素と関連付けられているが、form要素のid属性の値とbutton要素のform属性(button要素が所属するform要素を指定する属性)の値を一致させることで、 ボタンを特定のフォームと関連付けることができる。またtype="submit"も指定する。
ex)<button form="form要素のid属性の値" type="submit">ボタン名</button>
・FontAwesomeの導入方法は??(CDNでの導入)
以下をコピーしHTMLの<head>~</head>内にペーストする。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
サイトから表示させたいアイコンをクリックする。
<i></i> で表示されているコードをコピーする。
HTMLで表示したい箇所にペーストすると表示させられる。
以上、今回のブログでした。
何か困ったときのカンニングペーパーとして参考になりそうでしたか??
これからもどんどん知識を蓄えていきますね(≧∀≦)/
最後に!!
今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。
少しでも気になった方はお試しでもいいので1度、読者登録お願いします!
またTwitterでもプログラミングに関することを中心に情報を発信してます。
宜しければそちらのフォローもお願いします。
最後までご愛読いただきありがとうございました!!