レスポンシブ対応のテクニック

レスポンシブ対応は、スマフォファーストの時代になったからこそ、サイトを作るうえでは必須になってきました。

画像の切り替えやフォントサイズの指定など、なかなか面倒な作業が多いのではないでしょうか。

ですが、htmlだけで、使用する画像の切り替えができます。

タグを使用すれば、
画像サイズなどをviewportに応じて使い分けることが可能です。

また、フォントサイズなどでは、

rem という単位があります。

html要素からの相対的なサイズが設定されるため、階層が変わったとしても影響がありません。
rootのフォントサイズを62.5%(10px)にすると、remでの計算が楽になります。

1.4rem = 14pxと1/10倍するだけでpxからremに単位を変えることができます。

Atomに入れて便利なプラグイン

CSS3が普及してきて、便利なプロパティも多いかと思います。
ですが、ブラウザによって、ベンダープレフィックスを付けないと使用できないものもあります。

存在しないベンダープレフィックスを書いてしまったり、いちいち調べるのも面倒くさいと思います。

そういう時に、Atomエディターには便利なプラグインが存在します。

autoprefixer

ショートカットのctrl+shift+pでautoprefixerと呼び出すと必要なベンダープレフィックスを付与してくれます。

Atomエディターを使用していない方でも

http://autoprefixer.github.io/

対応させたいブラウザややandoroidのバージョンなどによって必要なベンダープレフィックスを付けてくれます。

jQueryでタイマー処理

「setInterval」を使用すればJavaScriptでのfunctionを感覚を決めて、繰り返し処理を行うことができます。

タイマー処理には以下が存在します。

■setInterval 一定時間ごとに特定の処理を繰り返す
■setTimeout  一定時間後に特定の処理をおこなう(一度のみ)

簡単な画像のスライドショーなどを実装することもできるので、使い方によってはいろいろできそうです。

CSSのプロパティ記述順

Googleの書式ルールなどではアルファベット順になるように記述するのが一般的ですが、

会社によっては、複数人で仕事をする場合などでは、会社それぞれの記述ルールなどが存在します。

視覚整形モデルからボックスモデル、背景と視覚要素から順々に詳細な情報に分けていく方法などがあります。

例としては
1.要素の表示 有/無し display要素
2.要素の配置 float positionなど
3.要素のボックスモデル widthやheight margin,padding…など

ルールを決定するのは良いのですがやはり覚えるまで時間がかかり、作業時間も増えてしまうので、ツールを使うのもよいかもしれません。

それが、CSScombです。

定変更画面にあるプロパティの順を、会社のコーディングルールなど沿って設定しておけば、ショートカット一つで、CSSの記述順を整形してくれます。

テンプレートとして残しておけば共有もできるので、作成しておきたいですね

viewportの幅に応じてフォントサイズを可変させる

レスポンシブサイトではpc表示の時とタブレット、スマートフォンの画面に応じて、コンテンツとサイズが可変するのが一般的です。

フォントサイズも同様で、機種によって見やすいよう調整していくのですが、
ブレイクポイントに応じてフォントサイズを変更していくのはなかなか手間な部分があります。

そこで、vwやvhが便利です、画面幅全体に画像を大きく指定する場合や、比率をそろえて縮小したい場合

上記のように指定することで常に比率をそろえて縮小可能です。

フォントにもvw,vhを指定可能で、

ビューポート幅 375pxの場合、フォントサイズ15pxで表示させる場合

15px ÷ 375px × 100(%) = 4

と上記の指定になります。

ただし、pcとスマートフォンとで同じ指定にしてしまうと、ブラウザ幅によって、pcで見た時のフォントサイズがとても大きくなってしまうので、
そういった場合、ブレイクポイントごとに指定していくとよいでしょう

.wrap()

wrap()は要素を一個ずつ囲むことができます。

pタグなどリストで一気に囲むことができます。

wrapInner()では、
要素の子要素を一個ずつ囲む。aの内側。

wrap()では動的に吐き出されるソースなどに対してdivで囲んでcssを適応させたいとか、ulなどのliがずらっと並んでいるときなど5個づつ区切りをつけたい場合などに最適です。