![小さくなる。管理画面でプレビュ...]()
小さくなる。管理画面でプレビューできない。240*135/7.3M
大山の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/
