★CSS3
フルスクリーン - レスポンシブ スマートフォン・パソコンでフルスクリーンで表示する 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…
ハンバーガーメニュー - 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>
テキストナビゲーション 中心から外に線が伸びる（下部） 記述例 <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 ------------------------…
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>
擬似要素 HTMLに記述せずCSSで擬似的に作成される要素であるため、「擬似要素」と呼ばれています 擬似要素には多くの種類がありますが、その中でもよく使用される擬似要素はbeforeとafterです before / afterとは 要素の前後に擬似要素を作成する指定方法で…
