こんにちは柴田クロノスケです。
冬休み・3学期に自己紹介サイトの作成を個人個人でしてもらいましたが作る際に、「は？なんでここに空白あるんだよ」みたいな躓きがいろいろあったと思います(思わない場合は思ったことにしてください)。そこでこの記事ではウェブサイトを作るときに使えるTips&うまくいかないときの解決方法を紹介していきたいと思います。
1.Tips
1.1.なんでページ全体に縁があるの???
ウェブサイトを作るときに「ウィンドウの横幅いっぱいにヘッダーとかを置きたかったけど、ウィンドウの端っこに白い縁ができちゃう; ;」ということがあったかと思います(思ってください)。
これは、Bodyタグにデフォルトでmargin: 5px;がついていることが原因なので(下図)、
body{
margin: 0;
}
で直すことができます
1.2.画像を好きな形で挿入したい
<img>タグを使って画像を挿入すると、画像の縦横比がそのまま維持されて挿入されてしまいます。また、<img>タグにwidthとheight両方指定してしまうと比率が変わって細長い画像となってしまい、サイトの見た目が悪くなってしまいます。
(そのまま挿入した場合)
(縦、横どちらかだけを指定した場合)
(両方指定した場合)
これを解決するには<div>タグを使うのが一番手っ取り早いです。
<div class="img"></div>
.img {
height: 320px;
width: 160px;
background-image: url(); /*背景画像のパス指定*/
background-size: cover; /*背景画像のサイズ指定*/
background-position: center; /*背景画像を中心に移動*/
}
こうすると、
ちゃんと画像を好きな形で切り取ることができるようになります。
1.3.できたサイトをほかの人に渡したら画像が表示されてない(´･ω･`)
送られてきた自己紹介サイトの中には画像がうまく表示されていないのもありました。
原因として考えられるのは画像をパソコン上の絶対パスで指定していたため、別のパソコンになった際に絶対パスの位置にファイルがなかったということです。
絶対パス・相対パスの詳しい説明(外部サイト)
(上の説明でhttps://となっているところがパソコン内の/Users/hogehoge/desktop/hogehoge.pngみたいになってしまっている)
対応策としてはプロジェクトフォルダ内に画像のコピーを作成してその相対パスで画像を指定することです。
相対パスのコピーはVisualStudioCodeの左側にあるファイルツリーから指定したいファイルを右クリックして、「相対パスをコピー」でできます。
2.うまくいかないときの解決方法
ググることです。
もうこれ以上に良い方法はありません。
2.1.ググり方
- やり方がわからない場合
「HTMLでリストを作る方法がわからない～」というときは「HTML リスト やり方」で検索すれば確実に出ます。
しかしながらたまに日本語のサイトがない場合があったりするのでその時は「How to make list in HTML」とかで調べれば出てきます(How・make・作りたいものの名前(英語)・使う言語(HTMLとか)が入ってればいいと思います) - エラーが出た場合
「JavaScriptでなんか"Uncaught ReferenceError: hogehoge is not defined"ってでたーー😱」というときは「<エラー文> <プログラミング言語>」で大体出てきます。
2.2.記事が古いものしか検索で出てこない!!!!!
プログラミング言語の構文とかはどんどん新しくなっていくので古い記事だと通用しない場合があります。そのときは、検索の最後に「after:<年>/<月>/<日>」を追加することで指定した日時以降の記事だけ表示するように限定できます