Search Bloguru posts

こんにちは。紫のバラの人です。

https://en.bloguru.com/love

🌹TEST

thread
🌹TEST 小さくなる。管理画面でプレビュ... 小さくなる。管理画面でプレビューできない。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/


People Who Wowed This Post

  • If you are a bloguru member, please login.
    Login
  • If you are not a bloguru member, you may request a free account here:
    Request Account
Happy
Sad
Surprise