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

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

CSS3

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>

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

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

グリッドレイアウト

グリッドレイアウト Placeholder.com Placeholder.com: Placeholder Images Made For You [JPG, GIF & PNG] The Anatomy of a Grid uxdesign.cc Using Layout Grids Effectively www.designersinsights.com Color Crush osachados.com.br

Font Awesome

Font Awesome 4.7 Font Awesome Icons fontawesome.com CDN(Content Delivery Network) 世界中に張り巡らされたCDN専用の配信ネットワーク(CDNプラットフォーム)を利用して、Webサイトにアクセスしようとするエンドユーザに最も近いPoP(配信拠点)から…

CSS3 - Transform[変形]

Transform[変形] <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body,h3,p { margin: 0; padding: 0; line-height: 1.0; } .content { margin: 50px; padding: 30px; border: 1px solid #aaa; } h3 { margin-bottom: 20px; } .container { display: flex; justify-c…</meta></head></html>

CSS3を使ったレイアウト

CSS3を使ったレイアウト 文字・画像は適宜 メインイメージ(背景画像トリミング)、正円の画像(CSS3の表現) floatの場合 Flexboxの場合 Flexboxを使った横並び フレックスコンテナー「.wrapper」内にあるフレックスアイテム「.menu」を、横に並べる .wrapp…

CSS3 - 背景画像

multiple-background CSS3からは、1つの要素に複数の背景画像を指定できるようになりました 従来通り1枚背景画像を指定した後、カンマで区切って2枚目の背景画像を指定します 後から指定した画像は、一番下に配置されます 複数の背景画像の利用 developer…

CSS3 - プロパティ

CSS3のプロパティ テキストP.276 テキストシャドウ テキストP.276 テキストに影をつけるプロパティ <div class="content"> <h3>text-shadow</h3> <ul class="sample ts"> <li class="ts01">Drop Shadow</li> <li class="ts02">Grow</li> <li class="ts03">Bevel</li> <li class="ts04">Embos</li> <li class="ts05">Stroke</li> <li class="ts06">Neon</li> </ul>…</div>

CSS3 - セレクタ

属性セレクタ 新たに追加された属性セレクタ テキスト P.264 ul,li { margin: 0; padding: 0; } .sample { list-style: none; border: 1px solid #aaa; } li { margin: 10px; padding: 10px 20px; background: #ECECEC; border: 2px solid #aaa; } 属性値が…

CSS3の基本

CSS3の概要 CSS3は、これまで使ってきたCSSの延長 CSS3を使うメリット テキスト P.258 www.shoeisha.co.jp classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動…