求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

レスポンシブWebデザイン

Sass実践 CafeLeaf headerとfooter

Sass実践 CafeLeaf headerとfooter /* header ----------------------------------------------- */ .header{ padding: 12%; background: url(#{$IMG_PATH}bg_header.jpg) no-repeat center top; background-size: cover; position: relative; &:before{ con…

Sass実践 CafeLeaf をモバイルファーストで記述

Sass実践 CafeLeaf をモバイルファーストで記述 header、footerを除く @charset "UTF-8"; /* reset ------------------------------------------------- */ html,body,h1,h2,h3,h4,p,ul,li,dl,dt,dd { margin: 0; padding: 0; line-height: 1.0; } ul { list…

Sass実践 CafeLeaf 文書構造

Sass実践 CafeLeaf 文書構造 テキスト LESSON28 レイアウトは、Flexbox モバイルファースト(Sassで記述) レイアウト構造 <html lang="ja"> <head> <meta charset="UTF-8"> <title>おいしい紅茶と手作り焼き菓子の店 CafeLeaf</title> <meta name="viewport" content="width=device-width"> </head> <body> <header class="header"> <div class="container"> </div></header></body></html>

Flexbox実践 - 文字と写真を互い違いにレイアウト

文字と写真を互い違いにレイアウト Flexboxを使ったレイアウト @charset "UTF-8"; html,body,h1,h2,p { margin: 0; padding: 0; line-height: 1.0; } img { vertical-align: bottom; max-width: 100%; } html { font-size: 62.5%; } body { color: #333; fon…

ヒーローイメージを設定したページ作成

ヒーローイメージを設定したページ作成 実機の空きとPC検証上の空きは、若干違います 各実機に合わせて微調整しましょう 「background-attachment: fixed」は、フルスクリーンで固定する場合以外は指定しません <html> <head> <meta charset="UTF-8"> <title>Hero Header</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

Flexboxを使ったレイアウト - 基本形

Flexboxを使ったレイアウト - 基本形 %で指定 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったレイアウト</title> <meta name="viewport" content="width=device-width"> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; } html { font-size: 62.5%; } body { background: #FFF; font-s…</meta></meta></head></html>

フルスクリーン - レスポンシブ

フルスクリーン - レスポンシブ スマートフォン・パソコンでフルスクリーンで表示する <html lang="ja"> <head> <meta charset="UTF-8"> <title>FullScreen The Design</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

フルードグリッド

Fluid Grid (フルードグリッド) スマートフォン→PC <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン(基本形)</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

レスポンシブなFlexbox - 実例

実例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Flexboxの練習</title> <style> html,body,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } img { vertical-align: bottom; width: 100%; } .content { displa…</meta></meta></head></html>

Flexbox - 復習

Flexbox - 復習 以下のページを作りなさい(設定は、適宜) 課題A <html lang="ja"> <head> <meta charset="UTF-8"> <title>flexbox media object</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>

フィルタリングを実装して課題サイトに応用

フィルタリングを実装 モバイルファーストで記述 レイアウトは、Flexboxを使用 記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp Demo - Basic</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

FlexboxをレスポンシブWebデザインに

レスポンシブWebデザインのデメリット CSSの記述が複雑になる 無駄な処理が生じる恐れがある PCサイトに切り替えられない IE8以前の古いブラウザをサポートできない レスポンシブWebデザインの基本構造を作る 768px以上をPC用とする モバイル向けメディアク…

デバイスにあったページを用意する

3種類の方法 セパレートURL(Separate URL) 動的配信(Dynamic Serving) レスポンシブWebデザイン(Responsive Web Design) セパレートURL アクセスしてきたデバイスに応じてリダイレクトを行い、適切なページヘ誘導するように設定します 複数のページと…

マルチデバイスに対応するときの指標

マルチデバイスに対応するときの指標 2007年にiPhoneが登場して以来、デバイスの多様化が進む中「どうやって小さい画面に対応するのか」が課題となってきました Google モバイルガイド マルチデバイス対応において求められる考え方や技術的な手法がまとめら…

Web閲覧環境の多様化

なぜ今レスポンシブWebデザインなのか PCに加えて,スマートフォン・タブレットが普及が進み,PCと同様にWebページにアクセスすることがあたりまえとなりました 一口にスマートフォンと言ってもそれらが同じような環境ではありません 例としてAndroidスマー…

スライダー&モーダルウィンドウ実装

スライダー&モーダルウィンドウ実装 モバイルファーストで記述 Flexboxでレイアウト <html lang="ja"> <head> <meta charset="UTF-8"> <title>テスト演習</title> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&amp;subset=japanese" rel="stylesheet">…</link></meta></meta></head></html>

Flrexboxを使ったレスポンシブ

THAI-NAMA Flexboxを使ったレイアウト モバイルファーストで記述 「スライダー」と「ページトップへ」ボタンの実装 マークアップ例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>THAI-NAMA</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

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

レスポンシブWebデザイン - 実習 モバイルファーストで記述 CSS3ホバーキャプションは削除 コーディング例 <html lang="ja"> <head> <meta charset="utf-8"> <title>池袋珈琲</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

モバイルファーストで記述 - 実践

実践 以下のページをスマートフォン対応にしたページとして記述しなさい Font Awesome 4.7 CDN www.bootstrapcdn.com <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> Font …</link>

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

レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと レスポンシブWebデザインの誕生 Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法で…

デバイスにあったページを用意する

3種類の方法 セパレートURL(Separate URL) 動的配信(Dynamic Serving) レスポンシブWebデザイン(Responsive Web Design) セパレートURL アクセスしてきたデバイスに応じてリダイレクトを行い、適切なページヘ誘導するように設定します 複数のページと…

マルチデバイスに対応するときの指標

マルチデバイスに対応するときの指標 2007年にiPhoneが登場して以来、デバイスの多様化が進む中「どうやって小さい画面に対応するのか」が課題となってきました Google モバイルガイド マルチデバイス対応において求められる考え方や技術的な手法がまとめら…