装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)

ブレイクポイントの基本と決め方(スマホ・PC)レスポンシブWebデザインでCSSを書く際のブレイクポイントについて、その基礎知識とブレイクポイントとして採用する横幅サイズの決め方をまとめてご紹介いたします。今回は、2018年版の日本国内での画面サイズシェアを元にして、モバイル環境向けブレイクポイント...続きを読む

※本記事は、前回の記事「モバイルファーストでデザインする際のCSSの書き方」を既にお読みであることを前提にしています。まだお読みでなければ、先にそちらをご参照下さい。モバイルファースト(レスポンシブ・ウェブデザイン)で困る古いIEへの対策古いブラウザでは、常にデフォルトの「モバイル用デザイン」が表示...続きを読む

モバイルファーストとはモバイルファーストとは、スマートフォンやタブレットのようなモバイル端末で閲覧された場合の使いやすさを考慮してウェブデザインを作ることです。モバイル版のページデザインを「全環境に共通するベースデザイン」として最初に作っておき、それよりも大きな画面の環境に対しては、ベースデザインか...続きを読む

ある程度スクロールされたら「トップに戻る」ボタンを表示する方法縦に長いWebページを読んでいる際には、「今すぐWebページの最上部に戻りたい」と思うことがあります。PC用ブラウザを使っているならスクロールバーを使えば簡単ですが、タブレットやスマホ用ブラウザを使っている場合は操作が面倒なこともあります...続きを読む

横幅の狭い画面で表組みを見る場合の問題点最近では、「PC用サイト」・「スマートフォン用サイト」などのように、ウェブサイトを端末別には分割せず、単一のウェブサイトだけであらゆる端末に対応する「レスポンシブ・ウェブデザイン」が広く利用されつつあります。表示領域の横幅が狭いと、表の各セルの横幅も狭くなり、...続きを読む

サイドバーをスクロールに自動追随させる方法サイドバーの方が短いと、途中から無駄な領域ができる。段組を作ってサイドバーを設けているレイアウトでは、本編を読み進めるためにページをスクロールすると、すぐにサイドバーが見えなくなってしまう点が悩みの種になりがちです。そんなときには、閲覧者がページをどれだけス...続きを読む

複数のボックスをタイル状(レンガ状)に並べるレイアウトを作る際に便利小さなボックスを、描画領域のサイズに合わせてタイル状に整列配置(NHKスタジオパークでの表示例)大きさの異なるブロックを、タイル状(レンガ状)に隙間なく綺麗に並べてレイアウトしたいと思ったことはありませんか？複数の細かな情報を1つ1...続きを読む

レスポンシブWebデザインとはレスポンシブWebデザイン(ResponsiveWebDesign)とは、アクセス者の閲覧環境に応じて適用するCSSを切り替えることで、ウェブページのデザインやレイアウトを自動的に変化させるデザイン方法ことです。主に、ブラウザのウインドウサイズや端末の画面サイズのような...続きを読む

画面サイズ別にCSSをメディアクエリで切り替える方法デバイスの種類だけで適用スタイルを切り替えるメディアタイプに、画面サイズなどの細かな条件を追加できる仕様がメディアクエリメディアクエリ（MediaQueries）とは、画面サイズや画面解像度などの閲覧環境に応じて適用スタイルを切り替えられるCSSの...続きを読む

レスポンシブWebデザインでは、画像サイズが画面に合わせて自動変化ウインドウ幅に合わせて画像サイズを変化させる方法とはレスポンシブWebデザインとは、画面サイズなどの閲覧環境に応じてWebページのレイアウトや装飾が自動調整される作り方のことです。記事「レスポンシブWebデザインの簡単な作り方」でも解...続きを読む