min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

自宅Webサイトの 見出しタイトル をCSSで設定する

f:id:min117:20220123104148p:plain

 

CSS楽しい。記事の見出しを変えられる。

www.notitle-weblog.com

 

はてなブログだけじゃなくて自宅サーバの記事にも適用してみる。

 

クラスで使い分ければ無限に書式作れる。使い方覚えた。

f:id:min117:20220123102655p:plain

f:id:min117:20220123102713p:plain

 

見出しテスト

 こうなる。

f:id:min117:20220123102613p:plain

 

ソースはこれ。

f:id:min117:20220123103047p:plain

f:id:min117:20220123103140p:plain

f:id:min117:20220123103213p:plain

f:id:min117:20220123103307p:plain

f:id:min117:20220123103347p:plain

 

保存用

<!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 [+]     

 

www.ipentec.com

 

 

 

 

その買うを、もっとハッピーに。|ハピタス