読者です 読者をやめる 読者になる 読者になる

ダイナミックフルードレイアウト

レイアウト設計

ワンキャンバスレイアウト

レイアウトの設計

シフトレイアウト

レイアウトの設計

固定幅+フルードグリッドレイアウト

レイアウトの設計

ドロップレイアウト

レイアウトの設計

フルードレイアウト

レイアウトの設計

ワンカラムレイアウト

レイアウトの設計 HOME ABOUT SAMPLE TIPS Responsive Web Design ウェブは柔軟なメディアである テキスト文書のみであったWebをデザインするという考えが生まれて間もない頃は、デスクトップパブリッシングの技術を参考にしてきました。 そして制約されたサ…

レスポンシブWebデザインを構成する要素

レスポンシブWebデザイン 目的と手段を逆転させない フルードグリッド #content { width: 100%; } フルードイメージ img { max-width: 100%; height: auto; } メディアクエリ CSS3でデバイスの解像度・画面の幅・向きなどの値を条件に別のスタイルを指定する

レスポンシブWebデザイン - 実践課題

課題A TimeSwitch トップ 雑貨 ガジェット お出掛け 食べ物 お問い合わせ もぎたてトマトを美味しく食べたい! もぎたてのトマトを食べたくなって、ちょっと郊外にあるトマト農家さんの直売所まで行ってきました。ここの… 続きを読む 部屋を彩るカラフルな家…

ワイヤーフレーム

webdesignledger webdesignledger.com

2カラム以上のレイアウトはFlexbox

Flexbox CSS Flexible Box Layout Module Level 1 日本語訳 2016 年 3 月 1 日付 勧告候補 メリット CSSを一行プラスするだけで横並びにできる 横並びになった要素の高さが最初から揃ってる 要素を上下左右、好きな順序に並び替えられる 高さの異なる横並び…

レスポンシブWebデザイン実践(1カラム)石垣島観光ガイド

レスポンシブWebデザイン実践(1カラム)石垣島観光ガイド 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気…

Media Queries(メディアクエリ)

Media Queries(メディアクエリ) CSS3 CSS2からある、Media Type の拡張 スクリーンサイズに応じて、CSSを使い分ける デバイスの解像度に応じて、CSSを使い分ける Media Queries、IE への対応 IEでは CSS3 が使えません css3-mediaqueries-jsを使って対応さ…

Fluid Image(フルードイメージ)

Fluid Image(フルードイメージ) 画像のサイズをデバイスの可変に合わせて、画像の表示領域も変化させる手法 max-width: 100%; .box1 { height: auto; } .box1>img { vertical-align: bottom; max-width: 100%; } ただしこのまま、スマートフォンの幅に対応…

レスポンシブWebデザインの考え方

レスポンシブWebデザインの基本 メディアクエリを設定 ブレイクポイント(767px 以下の場合) <html> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン</title> <style> #container { width: 80%; height: auto; margin: 0 auto; } .box { text-align: center; line-height: 100px; } .wrapA { overflo</meta></head></html>…

ボックスの並び順の指定

ボックスの並び順の指定 floatの値によってコントロールすることができます float: left; <html> <head> <meta charset="UTF-8"> <title>float:left;</title> <style> #container { width: 50%; height: auto; } .box { height: 100px; text-align: center; line-height: 100px; } .wrapA>.box { width: 25%; float: </meta></head></html>…

ボックスの分割と追加

ボックスを分割する 「%」指定をします 足して「100%」になるよう指定します <div id="container"> <div class="wrapA"> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> </div> </div> .wrapA>.box { background: #ECF7FD; border: 4px solid #689DD1; width: 50%; float:left; box-sizing: borde…

Webページにおける段組

段組とは 「段組」とは、テキストや画像を複数の段落に分けてレイアウトすること 日本語の場合、横に文字を文字を組んだ場合、適切な文字数は「40文字」と言われています 「40文字」を超えると視線を意図的にずらさないと読み続けることができない基準の文字…

レスポンシブWebデザインの基本

レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと 技術的には Fluid Grid(フルードグリッド) Fluid Image(フルードイメージ) Media Queries(メディアクエリ)…

Media Queries

メディアクエリー

レスポンシブWebデザインの実装

HTML5 マークアップはHTML5でおこなう IE8以前のバージョンは、対象外とします viewport それぞれのデバイス幅にあわせた表示を可能にする記述 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width デバイスの表示領域の幅を指定します これを指定することで、デフォルトの状態で自動的に縮</meta>…

Responsive Web Design

Web閲覧環境の多様化 Android端末の多様化 スマートフォンで表示されるWebページはより柔軟性のある実装を求められる状況にあります モバイルファースト モバイルファーストの実践とは、モバイルインターネットの爆発的な成長にただ備えるだけではない。ユー…