CSS楽しい。記事の見出しを変えられる。
はてなブログだけじゃなくて自宅サーバの記事にも適用してみる。
クラスで使い分ければ無限に書式作れる。使い方覚えた。
見出しテスト
こうなる。
ソースはこれ。
保存用
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>CSSで見出しをいろいろ</title>
<style>
/*
.entry-content h3 {
padding: 4px 8px;
color: #333;
line-height: 1.5;
background-color: #d9f7f5;
}
h3 {
padding: 4px 8px;
color: #333;
line-height: 1.5;
background-color: #d9f7f5;
}
*/
/*
書式
(タグ名).(クラス名){
(スタイル記述)
}
*/
h3.MyClass01 {
padding: 4px 8px;
color: #333;
line-height: 1.5;
background-color: #d9f7f5;
}
h3.MyClass02 {
border-left: 6px solid #333;
padding-left: 8px;
position: relative;
color: #333;
line-height: 1.5;
}
h3.MyClass10 {
padding: 6px 0;
border-top: 2px solid #2d70a4;
border-bottom: 2px solid #2d70a4;
color: #2d70a4;
line-height: 1.5;
}
/* 2色のライン */
h3.MyClass11 {
padding: 6px 0;
border-bottom: 4px solid #ccc;
color: #333;
line-height: 1.5;
position: relative;
}
h3.MyClass11:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100px;
height: 4px;
background-color: #3498db;
z-index: 2;
}
/* デニム生地風 */
h3.MyClass12 {
position: relative;
padding: 10px 10px;
color: #fff;
line-height: 1.5;
background-color: #293b6a;
border-radius: 4px;
}
h3.MyClass12::before,
h3.MyClass12::after {
position: absolute;
width: 100%;
height: 4px;
z-index: 2;
content: '';
}
h3.MyClass12::before {
top: 0;
left: 0;
border-bottom: 1px dashed #fff;
}
h3.MyClass12::after {
bottom: 0;
left: 0;
border-top: 1px dashed #fff;
}
/* 吹き出し風 */
h3.MyClass13 {
position: relative;
padding: 8px 12px;
color: #fff;
line-height: 1.5;
background-color: #29cec5;
border-radius: 4px;
}
h3.MyClass13::before{
content: '';
position: absolute;
top: 100%;
left: 28px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #29cec5;
}
/* 可愛い四角 */
h3.MyClass20 {
position: relative;
padding: 6px 0 6px 34px;
border-bottom: 2px solid #ce0d55;
color: #333;
line-height: 1.5;
}
h3.MyClass20::before,
h3.MyClass20::after {
content: '';
position: absolute;
background-color: #ce0d55;
}
h3.MyClass20::before{
top: 0;
left: 14px;
width: 12px;
height: 12px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
h3.MyClass20::after{
top: 18px;
left: 8px;
width: 8px;
height: 8px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
/* 可愛い丸 */
h3.MyClass21 {
}
/* 可愛い丸 */
h3.MyClass21 {
position: relative;
padding: 6px 0 6px 24px;
border-bottom: 2px solid #c3f1ea;
color: #333;
line-height: 1.5;
/* 可愛い丸 */
h3.MyClass21 {
position: relative;
padding: 6px 0 6px 24px;
border-bottom: 2px solid #c3f1ea;
color: #333;
line-height: 1.5;
}
h3.MyClass21::before,
h3.MyClass21::after {
content: '';
position: absolute;
background-color: #c3f1ea;
border-radius: 50%;
}
h3.MyClass21::before{
top: 6px;
left: 8px;
width: 12px;
height: 12px;
}
h3.MyClass21::after{
top: 20px;
left: 0;
width: 8px;
height: 8px;
}
/* ぺろっとめくれデザイン */
h3.MyClass22 {
padding: 6px 10px 6px 16px;
position: relative;
color: #fff;
line-height: 1.5;
background-color: #63b8cc;
}
h3.MyClass22:after {
content: "";
position: absolute;
left: 0;
top: 0;
border-top: 12px solid #fff;
border-right: 12px solid #2f92ab;
box-shadow: 1px 1px 2px rgba(0,0,0,.1);
}
</style>
</head>
<body>
<h1>CSSで見出し色々テスト</h1>
<h3>h3</h3>
<h3 class="MyClass01">背景カラー</h3>
<br>
<h3 class="MyClass02">左に縦ライン</h3>
<br>
<h3 class="MyClass10">上下にライン</h3>
<br>
<h3 class="MyClass11">2色のライン</h3>
<br>
<h3 class="MyClass12">デニム生地風</h3>
<br>
<h3 class="MyClass13">吹き出し風</h3>
<p> これは吹き出し風の記事ですよ</p>
<br>
<h3 class="MyClass20">可愛い四角</h3>
<br>
<h3 class="MyClass21">可愛い丸</h3>
<br>
<h3 class="MyClass22">ぺろっとめくれデザイン</h3>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
my_bootstrap03.html [+]
