テック・ガジェット・写真とか

HTML CSSコーディングのコツ。失敗しないための注意点まとめ

AD

個人的な仕事でhtml5 css3コーディングを久しぶりに手探りしながらやってみたんだけど、最前線でバリバリやってたわけじゃないので、ちょいと四苦八苦した。

そんで、またそのうちあるかもしれないので、メモ代わりに覚えておくと失敗を少く出来るんじゃないとか、これを知っていると便利なコーディングのコツってのを自分なりにまとめてみた。最新の手法じゃないとか、非効率的なところもあるかもしれないとか、比較的初心者向けの内容かも知れないが。

HTML CSSのおすすめの本

ネットには様々な情報があるが、やはりまとまって体系的に学ぶには本を読むことで効率よく学べるし、時間の短縮になるのでおすすめする。

まったっくの初心者ならこちらの評判の「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」。



1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座


￥2,237

Amazonで見る

CSSコーディングは単一ページならともかく、ページが増えてくると混沌＆破綻としてくることが多々ある。なので、設計について学ぶことで非効率を回避したい。なので、「CSS設計完全ガイド」は読んでおきたい、学びが多い。



CSS設計完全ガイド　～詳細解説＋実践的モジュール集


￥3,536

Amazonで見る

初心者には敷居が高いかもしれないSASS。ただ、やはりSASSを使えるのと使えないのでは天と地の差がある。おすすめなのは「Web制作者のためのSassの教科書」は必須。

=



Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ


￥2,376

Amazonで見る

HTML CSSの対応状況を確認できるサイト

HTML、CSSはまだまだ進化を続けており、より新しい機能の方が圧倒的に使いやすく便利な場合が多い。ただし、ブラウザによっては未対応の場合もあるので、タグがどのブラウザに対応しているのかを確認しておきたい。それを確認するためのサイト。

http://caniuse.com/

要素の幅と高さにpaddingとborderの幅と高さも含める

widthやheightと一緒にborderやpaddingを指定すると、意図しない表示崩れが起きることがある。これは幅や高さの算出方法によるものだが、下記のように記述することでそこら辺を意識せずにpaddingとborderの幅を要素の幅と高さに含めることができる。

Copy
*, *:before, *:after {
    box-sizing: border-box;
}

レイアウトするなら必須のgrid

列と行が絡むようなレイアウトをするなら必須のgridは、絶対に覚えておきたい。可変なレイアウトのレスポンシブを作成するなら、これがないと悶え苦しむことになるが、覚えれば凄く楽になれる。

Copy
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 320px;
}

参考 CSS Grid Layout を極める！（基礎編） – Qiita

参考 グリッドレイアウトの基本概念 – CSS: カスケーディングスタイルシート | MDN

gridは慣れないうちは、難しく感じてしまう。しかし、gridジェネレーターを使うことで劇的に楽になる。

https://grid.layoutit.com/

flexレイアウト

レイアウトをする上では、gridと同様のflex。gridとの違いを把握した上で使いこなせるようになりたい。

  • コンポーネントがインラインで構成されるならflex
  • 行と列のまとまったレイアウトならgrid
Copy
.flex_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

postionによる自由な位置設定

要素からはみ出したり、高さが伴うz-indexをのレイアウトなど、親要素の中の子要素を好きな位置に指定したい場合はposition。

Copy
.parent {
  position: relative;
  width: 200px;
  height: 200px;
}
.child {
  position: absolute;
  width: 50px;
  height: 34px;
  right: 0;
  bottom: 0;
}

縦横中央揃え

Flexboxが使えるならこれが一番ラクなのかな。

Copy
.center {
  display: flex;
  // 縦中央
  align-items: center;
  // 横中央
  justify-content: center;
}

意外と便利だったcalc

calcを使うと幅の値を細かく計算せずに調整ができる。

Copy
.hoge {
  width: calc(50% - 1px);
}

ちなみに、横幅などの割合(%)を求めたい場合は、この複数の割合の計算を使うと便利。

疑似要素で画像を減らす

afterやbeforeなどの疑似要素を覚えると、ボタンの後ろにちょっと線を入れたいとか小洒落た演出をするのも簡単にできてしまう。場合によっては画像を減らせるので覚えておくと便利。

Copy
.btn {
    background: #000;
    color: #fff;
    border-radius: 0;
    border: none;
    margin-top: 10px;
    width: 94px;
    height: 31px;
    position: relative;
    font-size: 13px;
    letter-spacing: 2px;
}
.btn::after {
    content: "";
    display: block;
    width: 16px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 15px;
}

特定の要素を指定する

n番目の要素を指定するやり方も覚えておきたい。ボタンとかリストとかでは結構お世話になる。

1番目の要素に対して

Copy
li:nth-of-type(1) {
  height: 100px;
}

偶数の要素に対して

Copy
li:nth-of-type(even) {
  height: 100px;
}

奇数の要素に対して

Copy
li:nth-of-type(odd) {
  height: 100px;
}

後ろから1番目の要素に対して

Copy
li:nth-last-of-type(1) {
  height: 100px;
}

下記サイトは画像で視覚的に見やすいので、おすすめ。

参照 CSSセレクタのチートシート｜37パターンを一覧で解説｜webliker（ウェブライカー）

フォントサイズ

フォントサイズも色々と悩ましかったりするが、最近では4Kモニターも普及しつつあり、4Kモニターで見ると文字が小さくなったりしまうことも多々ある。なので、表示領域に応じて文字サイズを可変にするレスポンシブ対応したい。clampを使うと便利。

Copy
html {
  //基本となるサイズ
  font-size: 16px;
}
h1 {
  //28px - 32px
  font-size: clamp(1.75rem, 1.659rem + 0.45vw, 2rem);
}
h2 {
  //26px - 30px
  font-size: clamp(1.625rem, 1.534rem + 0.45vw, 1.875rem);
}
h3 {
  //24px - 28px
  font-size: clamp(1.5rem, 1.409rem + 0.45vw, 1.75rem);
}
h4 {
  //22px - 26px
  font-size: clamp(1.375rem, 1.284rem + 0.45vw, 1.625rem);
}
h5 {
  //20px - 24px
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
}
h6 {
  //18px - 22px
  font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
}
p {
  //16px - 20px
  font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
}

下記サイトでviewportの表示領域を指定して設定できるのでおすすめ。

関連 Min-Max-Value Interpolation

スムーススクロール

以前は、Javascriptを使ってスムーススクロール制御していたが、CSSでも制御できるようになり楽になったと思ったら、デバイスのブラウザによっては挙動がおかしい。なので、利用する時は割り切った使い方をするか、やはりJS、jQueryなどを使った方がいいかも。

Copy
html {
  scroll-behavior: smooth;
}

タブレットの横向きには注意

iPad、Androidタブレットの横向きは早い確認、対応しておきたい。特にAndroidのNexus 7、10あたりは、Chromeのデベロッパーツールで。
とりあえずは横向きのMedia Queriesの書き方。ちなみに、デバイスが縦か横で判別しているのではなく、縦横比で判別しているようだ。

Copy
// 横向きのMedia Queries
@media screen and (orientation: landscape) {
}

// Retina向きMedia Queries
@media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx) {
  //縦向きの場合

  @media screen and (orientation: landscape) {
    //Retina & 横向きの場合
  }
}

// 縦向きのMedia Queries
@media screen and (orientation: portrait) {
}

横幅のブレイクポイントを決めておく

ブラウザのサイズによって表示を切り替えるにはメディアクエリを使うのがいいのだが、その時に気になるのが画面サイズだ。これは、Bootstrapを参考にするのがいいだろう。

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { … }

Bootstrap 5

インデントを使わずにテキストを非表示にする

インデントで-9999pxとかでテキストを飛ばす以外のやり方。

Copy
//html
<h1 class="logo">Title</h1>

//css
.logo {
  width: 300px;
  height: 100px;
  background: url('images/logo.png');
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

要素の改行により、半角スペースが空く

下記サンプルのように要素を改行して書くと半角スペースが空く。これによりズレが生じたりするので、その解決法。

Copy
//これだと半角スペースが空く
<form action="/">
  <input class="input" type="text" name="q" size="25">
  <input class="button" type="submit" name="sa" value="検索">
</form>

//こんな風に指定することで解決できる
form {
  font-size: 0;
}
form .input,form .button {
  font-size: 15px;
}

//或いは改行しない
<form action="/">
  <input class="input" type="text" name="q" size="25"><input class="button" type="submit" name="sa" value="検索">
</form>

基本的にセレクタにはclassを使用

大昔にコーディングを始めた頃は、なんとなくでセレクタでidとclassとかがあって面倒だな、なんかclassだけで十分じゃないかと思ったけど、下記のような理由でhtml内はclassに統一がいい。

  • idだと使い回しができない
  • idだと上書きが難しい
  • HTMLとJavaScriptを分離するって意味でidはJavaScriptに使用

reset.cssとnormalize.css

コーダーを悩ますことの１つに、ブラウザ毎の表示差異があるわけだが、それを初期化するリセットCSSと、初期化ではなくなるべく正常化した形で使おうってのがノーマライズCSS。

リセットcssとノーマライズcssにも色々とあるようで、詳しくはこちらをチェック。
最近のWeb制作で利用されている、リセットCSSとノーマライズCSSのまとめ | コリス

ちなみに、この記事を書いた時点でGoogleでどれぐらい検索されているのかを調べてみたら、リセットcssの方が検索されているようだ。

  • reset css 2400
  • normalize css 1900

Retina用画像の書き方

久しぶりなんでどう書くんだっけと忘れてしまうくらいにコーディングしていなかったのでメモ。

Copy
@media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
  .title_logo {
    background: url(img/logo@2x.png) no-repeat;
    background-size: 300px auto;
  }
}

CSSカウンタ

使う機会がないかもしれないけど、カウントもできるんだなと。

Copy
.ranking {
  counter-reset: rank;
}
.ranking .num::before {
  content: counter(rank);
  counter-increment: rank;
}

画像のセンター揃え

地味だけど。

Copy
.hoge img {
  margin: 0 auto;
}

画像をレスポンシブでRetina対応

次世代のレスポンシブでRetina対応なimgの書き方だけど、残念なことに微妙にIEとEDGEが対応していないが、記事執筆時点では対応していない。

Copy
<img src="img/img_1.png" srcset="img/img_1.png 1x, img/img_1@2x.png 2x" alt="hoge">

transition効果で一歩先を行くマウスオーバー時の効果　

マウスオーバー時にふわっと光らせる感じの効果。これは個人の好みか。

Copy
.nav a {
  background-color: white;
  transition: 0.3s;
  transition-duration: 0.3s;
  transition-delay: 0.3s;
  transition-timing-function: ease-in;
}
.nav a:hover {
  background-color: red;
}

marginの上下はbottomのみに適用すると楽

これは昔から自分の中で決めていたルールだが、どうしても必要という場合以外は、基本的にmarginの上下は、上は指定せずに下のみを指定すると、margin-topの事を考えなくていいから少し楽になる。

Copy
.hoge {
  margin-bottom: 40px;
}

ちなみに、marginの上下を指定する場合で、効かない場合があるので、下記記事を参照。

関連 【初心者向け】marginが効かない時の理由と対処法・対策 – Qiita

フォームのボタン要素をリセット

ブラウザ間の問題もあったりしてフォームボタンでCSSを適用しようとしても、意図した通りにならない。それをリセット。

Copy
input, button {
	appearance: none;
	border-radius: 0;
	padding: 0;
	color: #333;
}