2022-05-01から1ヶ月間の記事一覧
蛍光ペンで線を引いたような見出し 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は…
