<video></video>で中には何も書かないsrc=”動画のファイルパス” 大山のjpg→フォトでスライドショー→EXPでGIF（高画質/6282K） driveの画像 https://drive.google.com/file/d/1fhpsXvvL_RIVlndAiBy20MPkrCEMvgA4/view?usp=sharing https://drive.google.com/file/uc?export=view&id=/1fhpsXvvL_RIVlndAiBy20MPkrCEMvgA4/view?usp=sharing 線を引く hrタグは終了タグが必要ではないので、上記のように記述します。 ▼ブラウザ表示▼ ** /* CSSコード */ .hr1 { border-top: 3px solid red; /* 赤 */ } .hr2 { border-top: 3px solid #0000FF; /* 青 */ } .hr3 { border-top: 3px solid rgb(117, 117, 117); /* グレイ */ } --------------------- この文章の下に線が引かれます。 例： HTML この文章の下に線が引かれます CSS p { border-bottom : solid ; } この文章の下に線が引かれます CSS p { border-bottom : solid ; } HTML この文章の下に緑色の太い線が引かれます CSS p { border-bottom : solid 10px green ; } ----------------- p.box { border-bottom: 1px solid red; } ほげほげ うちの近所は猫が多い。 うちの近所は猫が多い ----------------------- うちの近所は猫が多い h2 { position: relative; padding: 1rem 2rem; text-align: center; color: #0075a9; border-radius: 0 10px 10px 10px; background: #d8ecf5; } h2:before { font-family: 'Font Awesome 5 Free'; font-size: 15px; font-size: 1.5rem; position: absolute; top: -24px; left: 0; height: 24px; padding: 0 1em; content: '\f0a4 POINT'; color: #fff; border-radius: 10px 10px 0 0; background: #0075a9; } ------------------------- リボン風の見出し h2 { position: relative; display: inline-block; margin: 1rem 0 1rem -10px; padding: 1rem 3rem; color: #fff; border-radius: 0 100vh 100vh 0; background: #0075a9; -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2); box-shadow: 3px 3px 5px rgba(0, 0, 0, .2); } h2:before { position: absolute; bottom: -10px; left: 0; width: 0; height: 0; content: ''; border-top: 10px solid #005276; border-left: 10px solid transparent; } ----------------- うちの近所は猫が多い .btn--orange, h2 { border-bottom: 3px solid #000; } -------------- うちの近所は猫が多い。 ---------- ここに文字を入力する。 ------------------ うちの近所は猫が多い。 ------------ うちの近所は猫が多い。 ------------- 囲み文字 https://www.fuji-blo.com/entry/box-design#%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B 背景色のみ 内容 うちの近所は猫が多い♪ 🌹うちの近所は猫が多い😻 🌹うちの近所は猫が多い😻 線を引く https://style.potepan.com/articles/23057.html none solid Document 見出し コンテンツ 見出し コンテンツ hr {height: 4px; background-color: red; border: none;} hr { border-style: none; border-top: 4px solid red; } ****************** ------- ********** 水平線を引く 一本線 色付き 太線 点線 二重線 /* 赤二重線 */ hr.sample1 { border-top: 3px double red; } 影線 /* 緑影線 */ hr.sample2 { height: 10px; border: 0; box-shadow: 0 10px 10px -10px #008000 inset; } グラデーション線 /* 青グラデーション線 */ hr.sample3 { border: 0; height: 10px; background-image: -webkit-linear-gradient(left, #f0f0f0, #4169e1, #f0f0f0); background-image: -moz-linear-gradient(left, #f0f0f0, #4169e1, #f0f0f0); background-image: -ms-linear-gradient(left, #f0f0f0, #4169e1, #f0f0f0); background-image: -o-linear-gradient(left, #f0f0f0, #4169e1, #f0f0f0); } Thankyou付 /* Thank Youバージョン */ hr.sample4 { border-top: 3px solid red; text-align: center; border-left-style:none; border-right-style:none; border-bottom-style:none; } hr.sample4:after { content: 'Thank You'; display: inline-block; position: relative; top: -1px; padding: 0 10px; background: red; color: #ffffff; font-size: 20px; font-weight:bold; border-left: hidden: } ------ 祭りやイベント、お出かけ日記MMC（マカロン祭りカレンダー） https://webliker.info/html/52510/
シェア