2019.08.16

CSSのcalcで片側だけグリッドガイドライン外へ飛び出したカラム

中央揃えになっている固定グリッド（Fixed grids）から片側だけ外へ飛び出させた装飾のカラムをリキッドレイアウトのレスポンシブデザインでスタイリングする方法です。 IE11も対応している CSSの calc() …

2017.10.06

レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える

スマホでは縦長の画像を表示したいけれど、PCでは横長の画像を表示したいということがよくあります。そんな時にはJavaScriptで横幅を判定して切り替えるという方法がよくとられると思います。例えば、以下のような方法です…

2016.08.23

レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sa…

2016.03.22

レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられます…

2015.11.25

はじめにはじめまして、エンジニアの安部です。実案件で、RWD（レスポンシブ・ウェブ・デザイン）で要素数・高さ可変のボックスをタイル上に並べ、画面幅に合わせて列数を変える（かつIE8対応）ということをやったので紹介しま…

2013.09.11

PCサイトに電話番号を記載する場合は、テキストか画像で電話番号を表示し、スマホサイトなら、電話番号にtelリンクを貼って、スマホから直接電話をかけられるようにすると思います。 PC・スマホ・タブレットと、さまざまなデ…