テクノロジー・動画・写真・デザインとか

HTML & CSSコーディングで失敗しないためにチェックしておきたいポイント

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

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

個人的にはここらへんの本を読むことをお薦めする。

目次

要素名とか

コーディングしてるとWebで検索することもしばしばあると思うけど、その時に「要素」とか「プロパティ」とかちょくちょく出てくるけど、それってどうだっけ?みたいな感じなので、メモ。基本すぎる?

// HTML

Hello world

// CSS .hoge {color: red;}

// HTML
<要素名 属性="値">Hello world

// CSS
セレクタ{プロパティ:値}

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

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

// 横向きの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) {
}

滅びよ古いAndroidブラウザ

古いAndroidブラウザは2015年1月でGoogleがサポートを終了しているので、非対応にした方が幸せになれる。Androidのバージョンもなるべく4.4以下は非対応がいい。
というか、脆弱性とかの問題もあるだろうし、JavaScriptで判別して「Chromeをインストールしてね」、的な感じでユーザーに啓蒙活動をするべき。ここを参考に

var ua = window.navigator.userAgent
if (/Android/.test(ua) && /Linux; U;/.test(ua) && !/Chrome/.test(ua)) {
  // 古いAndroidブラウザの場合の処理
}

個人的には、IE 11もそのうちサポートが終わると思うので、Microsoft Edgeに乗り換えよう的な判定を入れてもいいと思う。こういうのって制作サイドでやっていかないといつまでも苦しめられる。

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

これを踏襲するのがいいだろう。ってか、Bootstrapを使うのが楽?!

Bootstrap(Ver.3)では、768px未満をスマートフォン、992px未満をタブレット、1,200px未満を中型デスクトップ、1,200px以上を大型デスクトップに分類してブレイクポイントが設けられています。参照

ファイルもsp.css、tablet.css、pc.cssと分けた方がいい、一つにまとめると行ったり来たりしてわけが分からなくなる。

HTML5、CSS3の対応状況を確認できるサイト

初めて知ったがこのサイトは便利。ブラウザ毎にHTML5、CSS3の対応状況を確認できる。
http://caniuse.com/

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

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

//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;
}

box-sizingで要素の幅と高さにpaddingとborderの幅と高さも含めるオマジナイ

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

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

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

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

//これだと半角スペースが空く
<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>

flexなしじゃ、コーディングはもうしたくない

floatの悪夢はなんだったのかと思えるぐらいにflexは楽だ。

.flex_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

ただ、IE11で微妙にバグがある。
flexboxのバグに立ち向かう(flexboxバグまとめ) – Qiita

Analyticsを見てみたら、当サイトにアクセスしているIEがこの記事執筆時点でまだ16%もある。Microsoft Edgeは、7.5%。みんな早く乗り換えてくれないのかな。

縦横中央揃え

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

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

意外と便利だったcalc

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

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

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

割と使うpostionによる位置設定

割と使うのが、例えば縦横200pxのボックスの右下にボタンを設置したい場合とか、親要素の中の子要素を好きな位置に指定したい場合はpostionを使う。

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

使えるようになると便利な疑似要素

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

.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;
}

フォントサイズ

フォントサイズも色々と悩ましかったりする。詳しい解説はこちら

html {
  font-size: 62.5%;
}
body {
  font-size: 1.4em;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
}
.page-heading {
  font-size: 2.8rem;
}

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

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

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

reset.cssとnormalize.css

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

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

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

  • reset css 2400
  • normalize css 1900

Retina用画像の書き方

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

@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;
  }
}

n番目の要素を指定する

n番目の要素を指定するやり方。ボタンとかリストとかでは結構お世話になる。セレクタについてはここが詳しい。

//1番目の要素に対して
li:nth-of-type(1) {
  height: 100px;
}

//偶数の要素に対して
li:nth-of-type(even) {
  height: 100px;
}

//奇数の要素に対して
li:nth-of-type(odd) {
  height: 100px;
}

CSSカウンタ

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

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

画像のセンター揃え

地味だけど。

.hoge img {
  display: block;
  margin: 0 auto;
}

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

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

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

transition効果(IE10以降 )で一歩先を行くマウスオーバー時の効果 

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

.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の事を考えなくていいから少し楽になる。

.hoge {
  margin-bottom: 40px;
}