Webページを作る時のおまじないリスト
こんにちは。u-haruです。
最近、部活でwebページを作っています。ですが、デザインを担当しているのがまだ低学年なこともあって、ところどころ乱れがありました。
Webページのデザインというのはなかなか難しいもので、”これ!”といった正解が存在しないのも事実です。だからサイト制作が敷居の低さの割に沼にハマりやすいのかなとも思います。
なので今回は、主に部活の後輩向けに、Webページを作る上ででつまづきやすいところをメインに、少しでも役に立つようなキーワードやらコードやらをまとめてみました。
なお、役に立ったかどうかは完全に私の独断なのであしからず。
レスポンシブなデザイン
レスポンシブ。めんどくさいですね。でもとりあえずこれを書いとけば、だいたいいい感じに表示されます。
<!-- 省略 -->
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0">
<!-- 省略 -->
正直理解しなくていいです。私も理解してないです
これを書いておくと、PC向けに作ったサイトをスマホで表示しても｢めっちゃ小せえ!!｣みたいなのがなくなります。
フォントサイズ
フォントのサイズってレスポンシブデザインを意識する上で一番つまづきやすいとこだと個人的に思ってます。とりあえずこれ書いとくか、下で出てきたワードを調べるだけでも幸せになれます。
html {
margin: 0;
padding: 0;
font-size: 62.5%;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
font-size: 1.6rem;
overflow: hidden;
}
項目が多いですね。順番に見ていきましょう。文法とかは飛ばします。
まず、marginとpaddingですが、これはコンテンツの周囲のスペースの大きさを表します。htmlタグにもbodyタグにもそんなもの無くて十分です。0にしときましょう。もちろん、幅がほしければ入れても構いません。その場合なるべくbodyの方に入れましょう。
htmlのfont-size:62.5%;。これは、スマホでもPCでもいい感じに文字を表示するためにこうしています。CSSには様々な単位がありますが、文字サイズにはrem|emを使うといい感じになりやすいです。そして、そのremの基準となるのがこのhtmlのfont-sizeなのです。
デフォルトの文字のサイズは16px。これを62.5%にすると10pxです。この10pxを基準にするとめちゃくちゃ計算楽ですよね。だからこうしてます。例えば、文字のサイズを20pxにしたかったら、font-size:2remにすればOK。楽ちんです。
bodyのfont-sizeは上で述べたように、bodyの文字サイズを16pxにしてます。だいたいこれくらいの文字サイズがおすすめですね。pタグとかもこのサイズくらいです。h1タグとかだとまた変えないといけませんが、これも簡単に変えられます。
スマホから確認したい
例えば作ったhtmlをスマホで見たい時、ただhtmlファイルを開くだけでは見れないことがほとんどです。ブラウザでスマホをエミュレートすることも出来ますが、たまに実際とは違う動きをしたりします(実際ありました)。なので、できれば実機が望ましいですが、webサイトなんて持ってない人がほとんどだと思います。そこで、goでちょっとしたプログラムを用意しました。 こちらからダウンロード出来ます。
index.htmlがおいてあるフォルダに配置して実行すると、ブラウザでlocalhost:8080と入れるだけでサイトを閲覧することが可能です。スマホからも、[PCのIPアドレス]:8080と入れると見れます。
なお、このプログラムはセキュリティ的にはよろしくないので、これでサーバー立てて外部に公開とかはしないでください。そういうときはおとなしくNginx使いましょう。
width:100%ではみ出してしまう
たまにwidth:100%でぴったりにしてるのにコンテンツがはみ出すことがありますよね。そういうときはだいたいこういうの書くと治りやすいです。
div {// 親のタグ
position: relative;
}
これを書くと、100%の基準が親要素になります。width以外にも色々な要素に対して基準となることができます。逆に書かないと、bodyとかが基準になってしまって100%が画面全体になったりします。
div {// 子のタグ
width: 100%;
box-sizing: border-box;
}
box-sizingはコンテンツサイズの基準を決めます。デフォルトでは決めたサイズはタグの内容のみに適用されるのですが、そこにpaddingなどが入るとpadding分はみ出たりしてしまいます。border-boxにするとpaddingを含めたサイズが100%になるのではみ出ないようになります。marginは含まれませんので注意してください。
画像をいい感じに表示したい
htmlで画像を表示しようと思ったらimgタグですよね。でもそのままだと画像がとんでもないサイズで表示されてしまいます。でもwidthとか決めただけだと画像が伸びてしまう…そんなときはとりあえずこうしときましょう。
img {
width: 16rem;
height: 9rem;
object-fit: cover;
// もしくはobject-fit: contain;
}
object-fitは画像のリサイズ方法を指定します。coverは表示領域全体に画像が表示されるように拡大します。containは表示領域内に画像が全て収まるように縮小します。
アニメーションをいれたい
例えばマウスをホバーすると色が変わるaタグとかを作りたいとなったときはこんな感じですぐに出来ます。
a {
color: white;
transition: 0.3s;
}
a:hover {
color: black;
}
セレクタに:hoverとつけると、マウスホバー時のデザインを指定できます。
transitionはアニメーション時間の指定で、今回の場合0.3秒で色が白から黒へと変化します。
ちなみにaタグのアンダーラインを消したいときはtext-decoration: none;とすると消えます。
:hoverみたいなやつは他にもいっぱいあるのでぜひ調べてみてください。
ユーザーに文字をセレクトさせたくない
これは私がhtmlなゲームを作っているときに知ったやつです。
user-select: none;
これでセレクトできなくなります。
終わりに
正直これだけではないのですが、思い出しながら書くと中々出てこないのでとりあえず書きました。後から思いついたり新しいのが出てきたら、また追加していこうと思います。
それでは、最後まで見ていただいてありがとうございました。
