Eastツイートするこの連載が本になりました!本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。(232ページ)ISBN:978-4-04-886323-0連載第2回では、レスポンシブWebデザインの設計と素材の準備をしました。今回は、ページの基本となるHTMLとCSSの初期設定を記述します。最初に、「枝豆隊」の基本となるHTMLを用意しましょう。このサイトでは、XHTMLではなくHTML5を採用しています。9でサポートされています。古いブラウザーのサポートが必須の場合など、特別な事情がなければHTML5を使って記述しましょう。枝豆隊のHTMLファイル、「index.html」のソースコードは以下のように記述します。前に作成したワイヤーフレームを見ながら、各要素を定義しています。header、footer、asideなど、HTML5の新しいセマンティック要素を使っていますが、シンプルな構造のページですので特に難しい点はないでしょう。href="">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。"><p>ゆでた枝豆をすり潰したもの。餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。name="viewport"は、スマートフォン向けのviewportの設定です。スマートフォンのブラウザーの多くは「viewport」と呼ばれる仮想ウィンドウサイズが設定されており、標準ではWebサイトを下の表のように縮小して表示しています。1024pixelsviewportはHTMLドキュメントにmeta要素でhead要素内へ記述します。viewportの指定方法は、下記のように非常にシンプルです。">width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味です。widthには数字を直接指定しても構いませんが、device-widthを指定すると、解像度が異なるさまざまデバイスに対応できます。【ワンポイント】viewportの詳しい指定方法viewportにはほかにもさまざまな指定があります。up】viewportを理解しよう」で解説しています。一覧へDESIGNフルードグリッドとレスポンシブWebデザインの完成レスポンシブWebデザインの基礎をチュートリアルで学ぶ入門連載。フルードグリッドを導入してサンプルサイトを完成させよう。DESIGNメディアクエリーの設定とグリッドデザインの導入レスポンシブWebデザインの基礎をチュートリアルで学ぶ連載。メディアクエリーを使ってCSSを切り替え、グリッドデザインの考え方を導入する。DESIGNCSSでスマートフォンでも見やすくスタイリングレスポンシブWebデザインによるサイト制作の基本を学ぶ連載。今回はヘッダー、メインコンテンツ、フッターなどの各領域のCSSを設定して見栄えを整えてこう。DESIGNフルードイメージの導入とタイポグラフィの設定レスポンシブWebデザインに必要な技術的な要素「フルード・イメージ」を導入し、読みやすさに考慮して文字サイズを決定しよう。DESIGNHTMLの用意とリセットCSSの作成レスポンシブWebデザインによるサイト制作入門。ページの基本となるHTMLを用意し、CSSの初期設定を記述しよう。DESIGNレスポンシブWebデザインのワークフローと画面設計レスポンシブWebデザインによるWebサイト制作の流れを理解し、サイト制作に必要な画面設計と下準備を始めよう。この記事の編集者は以下の記事をオススメしていますDESIGNゼロから始めるレスポンシブWebデザイン入門スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。Design)が海外で注目を集めている。どのようなアプローチなのだろうか。00DESIGN流行期を過ぎたレスポンシブ・Webデザインのこれからレスポンシブ・Webデザインが誤解を生む背景には、レスポンシブ・Webデザインの定義を勘違いしていたり、深く理解せずに言葉遊びとして捉えていたりする傾向があるように思う。スマホお気に入り一覧マイページ。