レスポンシブデザイン スマートフォンでのナビメニュー
レスポンシブデザインナビゲーションメニューの押し易さ（使い易さ）というのはページ全体の使い易さに繋がる為、非常に大切です。PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。...
レスポンシブデザイン
レスポンシブデザイン CSS応用 フォントサイズを画面幅に応じて可変にする
CSS応用レスポンシブデザインemを使ったフォントサイズemは親要素のフォントサイズをそのまま継承します。remを使ったフォントサイズ次にremを使ったフォントサイズの指定を覚えましょう。「rem」とは、「em」や「%」の場合、親要素（が基...
css3 レスポンシブイメージの設定
レスポンシブデザインwebサイト制作css3img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブ...
webサイト制作 モバイルファーストでの既存サイトのトレース
レスポンシブデザインwebサイト制作今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみに...
css3 Flexboxの使い方
css3レスポンシブデザインFlexbox（Flexible Box Layout Module）はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった...
レスポンシブデザイン レスポンシブデザイン実践１
レスポンシブデザイン今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。今回のブレイクポイントはPCサイズ 960px以上タブレットサイズ 768px～95...
css3 高解像度ディスプレイへの対応
レスポンシブデザインcss3RetinaディスプレイRetinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって...
レスポンシブデザイン グリッドレイアウト
レスポンシブデザイングリッドレイアウトとはグリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webで...
css3 レスポンシブデザイン基礎
レスポンシブデザインcss3レスポンシブデザインとは？レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制...