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

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

Flexbox

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>

flexboxアイテムのプロパティ

flexboxアイテムで指定できるプロパティ order:並び順 .itemA{ order: 4; } .itemB{ order: 1; } .itemC{ order: 3; } .itemD{ order: 2; } flex-grow:伸び率 flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値(整…

レスポンシブな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の水平と垂直の並び

justify-content:水平方向の位置 justify-content: flex-start(デフォルト) .container { display: flex; justify-content: flex-start; } justify-content: flex-end .container { display: flex; justify-content: flex-end; } justify-content: center…

Flexboxの基本的な使い方

Flexboxの基本的な使い方 flexコンテナー指定なし <div class="container"> <div class="item"> A </div> <div class="item"> B </div> <div class="item"> C </div> </div> flexコンテナー指定 .container { display: flex; } flexboxコンテナで指定できるプロパティ flex-direction:flexアイテムの並び順 flex-direction:row .container { display: flex; flex-d…

Flexboxの基礎

Flexboxとは CSS3 Flexible Box (可変ボックス) CSS Flexible Box Layout Module Level 1 ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能(flex)にするもの flex:融通のきく、柔軟なとい…

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

スライダー&モーダルウィンドウ実装 モバイルファーストで記述 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>

Flexboxを使ったレイアウト - THAI-NAMA

THAI-NAMA Flexboxを使ったレイアウト <html lang="ja"> <head> <meta charset="UTF-8"> <title>THAI-NAMA</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&amp;subset=japanese" rel="stylesheet"> </link></meta></head></html>