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

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

Sass

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…

Sassで最低限知っておくべき記述演習

Sassで記述演習 Preprosを起動 管理するフォルダーを指定する テキストエディターで、管理するフォルダー内に「SCSSファイル」を作成します 実践 テキストLESSON28からのコーディングで使用します 管理フォルダー作成 「CafeLeaf」フォルダー内に練習用のフ…

Sass - 親セレクタの参照 &

親セレクタの参照 &(アンパサンド) 《sample.scss》 .side { width: 240px; ul.bnr { margin-bottom: 10px; } } body.top .side { width: 300px; } 《sample.css》 .side { width: 240px; } .side ul.bnr { margin-bottom: 10px; } body.top .side { width…

Sass - ネストを記述

ルールのネスト(Nested Roles) 入れ子構造を使うとクラス名の変更が楽になります 子孫の関係をシンプルに記述することができます 《index.html》 《style.scss》 《style.css》 @media のネスト 《style.scss》 《style.css》

初心者用 Sass 使用時の設定

Sass(サース) Syntactically Awesome Stylesheets(構造的にイケてるスタイルシート) CSSをより構造的に整理して記述することができる、CSSの「メタ言語」 メタ言語とは「ある言語について何らかの記述をするための言語」のこと sass-lang.com Sassの記法…