MENU
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
  1. ホーム
  2. HTML/CSS
  3. おしゃれなCSSポイント見出しデザイン!簡単コピペで現場ですぐに使える!

おしゃれなCSSポイント見出しデザイン!簡単コピペで現場ですぐに使える!

2023 3/26
HTML/CSS
2023年3月19日 2023年3月26日

WEBデザインの現場で実際に使っているCSS見出しをまとめてみました。
コピペで直ぐに実装できます。
色を変えたり、CSSの組み合わせ次第で見出しデザインの幅が広がりますよ。
一応レスポンシブ対応で作っていますが、崩れたら修正してください汗

01 数字にくいこんでる系

POINT

01

▼HTML/CSS

<div class="header01"><p>POINT</p>01</div>
.header01{
 font-size: 80px;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
}
.header01 p {
   font-size: 20px;
   margin-right: -20px;
   background-color: #d9d3ca;
   z-index: 999;
   height: 25px;
   line-height: 1.4;
}

使いたいページの背景色に合わせて『background-color: #d9d3ca;』の色コードを変更してください。

02 真ん中に区切り

POINT

01

<div class="header03"><span>POINT</span><p>01</p></div>
.header03{
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
}
.header03 p {
 font-size: 80px;
 margin-left: 50px;
 position: relative;
}
.header03 p::before {
 position: absolute;
 content: "";
 top: 38%;
 left: -26%;
 width: 2px;
 height: 35px;
 background-color: #000;
 transform: rotate( 30deg );
}
.header03 span {
 font-size: 20px;
}

03 ラインとPOINT

01

▼html/CSS

<div class="header02"><span>POINT</span><p>01</p></div>
.header02{
 font-size: 20px;
 margin: 0;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
.header02 p {
 font-size: 80px;
 margin-right: 10px;
 position: relative;
}
.header02 p::before {
 content: "point";
 position: absolute;
 top: 29%;
 left: -50%;
 font-size: 20px;
}
.header02 span{
width:30%;
height:1px;
display:block;
background-color: #000;

}

04 あしらいっぽくPOINT

01point

<div class="header04"><span>p</span><span>o</span><span>i</span><span>n</span><span>t</span><p>01</p></div>
.header04{
    font-size: 20px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header04 p{
    font-size: 80px;
    position: relative;
}
.header04 p span{
    font-size: 20px;
}
.header04 span:nth-child(1){
    position: absolute;
    top: 30%;
    left: -22.5%;
    transform: rotate( -90deg );
}
.header04 span:nth-child(2){
position: absolute;
    top: 20%;
    left: -16%;
    transform: rotate( -70deg );
}
.header04 span:nth-child(3){
    position: absolute;
    top: 12%;
    left: -4%;
    transform: rotate( -45deg );
}
.header04 span:nth-child(4){
    position: absolute;
    top: 7%;
    left: 6%;
    transform: rotate( -25deg );
}
.header04 span:nth-child(5){
    position: absolute;
    top: 5%;
    left: 25%;
    transform: rotate( -5deg );
}

05 高さのあるポイント

POINT

01

.header05{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  justify-content: center;
}
.header05 p{
    font-size: 80px;
    position: relative;
    margin: 25px 0 0 0;
}
.header05 p::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 25px;
    top: 0;
    left: 50%;
    background-color: black;
}
HTML/CSS
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 【JQuery】imgタグのsrcとdata-srcを画像書き換えて遅延読み込みさせる|ページスピード改善

この記事を書いた人

tomoのアバター tomo

資格試験やSEOなどについての情報を発信します。現在も資格試験や検定にチャレンジ中!実際に資格を勉強した上で、おススメの勉強方法や講義動画チャンネル、過去問サイトを紹介してます!
(仕事はWEBデザインとWEBマーケ)

この著者の記事一覧へ

関連記事

  • イグアナ
    【JQuery】imgタグのsrcとdata-srcを画像書き換えて遅延読み込みさせる|ページスピード改善
    2023年3月12日
  • 要素がスクロールして画面に表示されたらCSSアニメーションを動かす方法【jQueryコピペ】
    2023年2月18日
  • 複数の背景画像(background-img)を自動的に切り替えるCSSアニメーション
    2022年12月29日
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
目次
トモゾウ
埼玉在住でWEBデザイン(フロントエンドエンジニア)の仕事をしながら、いろんな資格試験に挑戦しています。

また、本業とは別にブログを運営してます。資格勉強で学んだことや、WEB(SEO/HTML/CSSなど)を発信中。
About
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
検索
当ブログは「SWELL」を使用しています。
  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

© 2023 週末のトモゾウ