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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

レスポンシブWebデザイン

レスポンシブWebデザイン - 応用

レスポンシブWebデザイン - 応用 テキスト P.337 <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Cafe Leaf</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="format-detection" content="telephone=no"> </meta></meta></meta></meta></head></html>

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

レスポンシブWebデザイン - 実践 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CASA BLANCA</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>

初めてのメディアクエリ

初めてのメディアクエリ 1月開講クラス(2カラムまとめ) <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS Layout</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> /* reset ----------------------------------------------------------*/ html, body, p { margin: 0; padding: …</meta></meta></head></html>

フルードレイアウト

レイアウトの設計 「article」を「main」に変更します 画像は、適宜作成すること main「1000 x 300」 01「620 x 300」 02「300 x 120」 03「300 x 120」 Responsive Web Design HOME ABOUT SAMPLE TIPS ウェブは柔軟な媒体である テキスト文書だったWebをデ…

InVison(インビジョン)

InVison(インビジョン) InVisionはアプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービスです

プロトタイプ以前

ダミー画像配信サイト Dynamic Dummy Image Generator PLACEHOLD.IT ダミーテキスト生成サイト Dummy Text Generator すぐ使えるダミーテキスト - 日本語 Lorem ipsum

Style Tiles

Style Tiles プロトタイプのテンプレート styletil.es

レスポンシブWebデザイン - 演習(2)実践

レスポンシブWebデザイン - 演習(2)実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーン画像の設定</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="style4.css"> </head> <body> <h1><img src="img/logo.svg" alt=""></h1> </body></html>

レスポンシブWebデザイン - 演習(2)

レスポンシブWebデザイン - 演習(2) ブラウザの高さを取得する単位「vh(viewport height)」 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html, body { margin:0; padding:0; } .box { box-sizing: border-box; } .box…</meta></meta></head></html>

レスポンシブWebデザイン - 演習(1)解答例

レスポンシブWebデザイン - 演習(1)解答例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン 演習(1)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">…</link></meta></meta></head></html>

レスポンシブWebデザイン - 演習(1)

レスポンシブWebデザイン - 演習(1) 設計図の作成 物作りは設計図の用意から始まります。機能や構造、配置などを明確にしていくことで、必要な部品、材料、工数、工程、時間など、さまざまな情報が出てきます。 画像「768 x 512」 また、設計図を用意する…

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

モバイルサイト設計上での考え方 モバイルサイト設計上での考え方 - A List Apart 日本語サイト レスポンシブWebデザインの画面設計 コンテンツファースト 画面に必要なコンテンツ部品(コンポーネント)の洗い出しをする 情報の重要度を考慮してコンポーネ…

グリッドレイアウト

グリッドレイアウト <html lang="ja"> <head> <meta charset="UTF-8"> <title>グリッドレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div class="block"> <header> <h1></h1></header></div></div></body></html>

レスポンシブWebデザイン - 実践(枝豆)

モバイルファースト スマートフォンの設定から記述します 枝豆ロゴ 枝豆ロゴ 豆はカラダにイイ ホーム 枝豆一覧 枝豆隊 アクセス 枝豆の栄養素はスゴい 枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれ…

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

レスポンシブWebデザインの基本構造を作る 768px以上をPC用とする モバイル向けメディアクエリのwidthの決め方 タブレット(iPad) 768px スマートフォン横 480px・568pxなど スマートフォン縦 320px・360pxなど /* メディアクエリの設定 */ @media (orienta…

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

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

メディアクエリ実践

メディアクエリ実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブWebデザイン</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>メディアクエリ</h1> <p>メディアクエリを使うと、ブラウザのウィンドウ幅に応じて各要素…</p></div></body></html>

Media Queries(メディアクエリ)

Media Queries(メディアクエリ) CSS3 htmlドキュメントのコンテンツをマルチデバイス最適化した表示を実現する手法 ユーザーエージェント判別によるCSS切り換え ブレイクポイント ブレイクポイントを480px、768px、980pxとした場合 PCのスタイルから記述し…

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

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

Responsive Web Design(レスポンシブWebデザイン)

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