★CSS3
ハンバーガーメニュー - jQuery jQueryでクリックイベントを作成する場合 jQueryでクリックイベントを作成する場合 ボタンのアニメーションは、CSS3で設定 HTML記述例 <header class="header"> <h1><span>info</span></h1> <div class="menu"> <p id="btn"><span id="hum"></span></p> </div> <nav class="gnav"> <ul> <li><a href="../index.html">HOME</a></li> <li></li></ul></nav></header>
擬似要素 HTMLに記述せずCSSで擬似的に作成される要素であるため、「擬似要素」と呼ばれています 擬似要素には多くの種類がありますが、その中でもよく使用される擬似要素はbeforeとafterです before / afterとは 要素の前後に擬似要素を作成する指定方法で…
テキストナビゲーション 中心から外に線が伸びる（下部） 記述例 <nav class="gnav"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </nav> @charset "UTF-8"; /* ------------------------------------ reset ------------------------…
カスタムプロパティ（CSS変数） CSS custom properties for cascading variables CSSカスタムプロパティ（CSS変数）とも呼ばれています カスタムプロパティを定義する 利用できる範囲を設定 html全ての文書で適応したいことの方が多いので「:root」の擬似ク…
ハンバーガーメニュー - CSS3 CSS3でチェックボックス（フォーム）をクリックイベントの代わりにする場合
蛍光ペンで線を引いたような見出し linear-gradient を利用する 上半分を透明、下半分を不透明度50％ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>蛍光ペンで線を引いたような見出し</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>ゆく河の流れは絶えずして、しかももとの水にあらず。</h1> …</body></html>
フルスクリーン - レスポンシブ スマートフォン・パソコンでフルスクリーンで表示する HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ヒーローイメージ</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></link></meta></meta></head></html>
背景画像：フルスクリーン bodyに背景画像を固定 background-size: cover; background-attachment: fixed; HTML記述例 <html lang="ja"> <head> <meta charset="utf-8"> <title>GIRLY ROP</title> <meta name="viewport" content="width=device-width"> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
透明（不透明度） opacityプロパティを使って全体を透明に CSSのopacityの書き方 img要素に対して「opacity:1 」を指定すると完全不透明です 「opacity: .5」だと透明度は50%です .content > img { opacity: .5; } ホバー時に透過させる .content>img { opac…
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>…
Transform［変形］ transformプロパティは、回転、伸縮、傾斜、移動などの動きを要素に指定する際に使用するCSSプロパティ transformプロパティの値に指定できる関数 関数名 読み方 実行効果 translate トランスレイト 移動 rotate ローテート 回転 scale ス…
Transition［トランジションアニメーション］ マウスホバー時に背景色を変更（3秒間で） <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Transition</title> <style> button { height: 80px; width: 240px; background-color: #0d96a5; border: none; color: white; font-size: …</meta></meta></head></html>
multiple-background CSS3からは、１つの要素に複数の背景画像を指定できるようになりました 従来通り１枚背景画像を指定した後、カンマで区切って２枚目の背景画像を指定します 後から指定した画像は、一番下に配置されます 複数の背景画像の利用 developer…
属性セレクタ 新たに追加された属性セレクタ 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は、これまで使ってきたCSSの延長 CSS3を使うメリット classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるようになる CSS3は…
