求職者支援訓練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…

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の記法…

position: sticky 復習

position: sticky developer.mozilla.org 基本形を理解する スクロールで要素を固定する Safariではプレフィックスが必要です(-webkit-sticky) IEはサポートされてません 固定したい要素の親、先祖要素に overflow: hidden; が入っていると効かない <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>S</title></meta></meta></head></html>…

CSS3 - ホバーキャプション

ホバーキャプション <html lang="ja"> <head> <meta charset="UTF-8"> <title>ホバーキャプション</title> <style> html,body,h3,p { margin: 0; padding: 0; line-height: 1.0; } img { vertical-align: bottom; } figure { position: relative; overflow: hidden; width: 480px; } figcaption { position: absolute; left: …</meta></head></html>

CSS3 - イメージフィルター

CSS3 - イメージフィルター Photoshopで画像加工を行わないで同じ効果を得る 元画像 <figure class="sample"><img src="img/01.jpg" alt=""></figure> <figure class="sample blur"><img src="img/01.jpg" alt=""></figure> <figure class="sample brightness"><img src="img/01.jpg" alt=""></figure> <figure class="sample contrast"></figure>

CSS3 - ホバーアニメーション

CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったナビゲーション</title> <style> html,body,h1,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; color: inherit; } </meta></head></html>…

CSS3 - Transition[トランジションアニメーション]

Transition[トランジションアニメーション] <html lang="ja"> <head> <meta charset="UTF-8"> <title>Transition</title> <style> html,body,h2,h3,p { margin: 0; padding: 0; line-height: 1.0; } a { text-decoration: none; } body { text-align: center; } .content { margin: 50px; padding: 30px; border: 1px sol…</meta></head></html>

タイマーを使って一定時間ごとに動かす

要素を動かす クリックイベントにより、X座標・Y座標の値を変更する <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を動かす</title> <style> .box { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background: #8EDED4; text-align: center; line-height: 100px; } </style> </head> <body> </body></html>

ボタンイベント

ボタンのクリック処理 ボタンがクリックされたときの処理を、DOMイベントリスナーで記述する <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMイベントリスナー</title> </head> <body> <h1>ボタンクリックイベントの例</h1> <button id="mybtn">クリックしてね</button> <script> function btnclick() { alert('クリックされました'); } window.addEventListener('load',</body></html>…

イベントとイベントハンドラ

イベントとは developer.mozilla.org ブラウザー上でユーザーが行う様々な動作のこと マウスをクリック マウスをダブルクリック マウスのポインターの移動 マウスのボタンを押す マウスのボタンを放す など イベントハンドラ (event handler)とは イベントの…

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

ヒーローイメージを設定したページ作成 実機の空きと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アイテムとの相対値(整…

ランダム表示 - 復習

サイコロの目をランダムに表示 「one.jpg」「two.jpg」「three.jpg」「four.jpg」「five.jpg」「six.jpg」とした場合 ボタンを押すたびにサイコロの目が変化する

CSS3 - 透明とグラデーション

透明(不透明度) opacityプロパティを使って全体を透明に CSSのopacityの書き方 img要素に対して「opacity:1 」を指定すると完全不透明です 「opacity: 0.5」だと透明度は50%です .content>img { opacity: 0.5; } ホバー時に透過させる .content>img { opac…

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

フルスクリーン - レスポンシブ スマートフォン・パソコンでフルスクリーンで表示する <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>

Webサイト100選

Webサイト100選 WordPressでサイト作成(既存テンプレートを使用) 無料レンタルサーバー 無料レンタルサーバー【XFREE(エックスフリー)】 無料レンタルサーバー【スターサーバーフリー】 WordPressを有効化

ノードを追加・削除する

ノードを追加する 要素 / テキストノードを作成 createElement / createTextNode ノード動詞を組み立て、ドキュメントに追加 appendChild createElementメソッド 要素を作成する document.createElement( name ) name: 要素名 ノードを作成するためだけのメ…

デジタル時計

デジタル時計 <html lang="ja"> <head> <meta charset="UTF-8"> <title>デジタル時計</title> <style> #clock { width: 450px; background-color: #000; color: #FFF; text-align: center; border:10px solid #666; border-radius: 20px; font-size: 90px; font-family:monospace; font-weight:bold; padding: 10px 20p…</meta></head></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>

フィルタリング MixItUp

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します 商用でなければ無料で使えます MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="content"> <h1>MixItUp</h1> </div></body></html>