sugulogの日記

HTML、CSSの一問一答!こんな時どうすればいいの??

スポンサードリンク

f:id:sugulog:20201013165750p:plain
こんにちは、すぐるです!

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でもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!