• 日本の製造業を支援するデータベース │ エルシル

  •   日本の製造業を支援するデータベース

  • HOMETOPICS一覧 〉 【CSS】コピペするだけ蛍光ペン風マーカー線 4種類×7色

    【CSS】コピペするだけ蛍光ペン風マーカー線 4種類×7色


    最近、様々なサイトやブログで蛍光ペンで線を引いたような文字装飾をよく見かけますよね。

    今回はスタイルシートにコピーペーストするだけで簡単にできる、HTMLとCSSを使った蛍光ペン風のマーカー線を6種類紹介していきます。

    <strong class="markup_1">この文章を強調したい!</strong>

    まずはHTMLの強調したい文章にクラス名を付けます
    通常、文字装飾による強調は、読みやすくなるのは閲覧者のみで、SEOとしては期待できないと言われていますが<strong>タグにクラス名をつけることにより、閲覧者、検索ロボット双方に記事の重要な部分を伝えることができます

    .markup_1 {background:linear-gradient(transparent 60%, #ffdfef 0%) ;}

    CSSに上記のタグを貼り付けると、このように蛍光ペンのように文字の周囲に色が付きます。

    ① 普通の蛍光ペン


     普通の蛍光ペン 
     普通の蛍光ペン 
     普通の蛍光ペン 
     普通の蛍光ペン 
     普通の蛍光ペン 
     普通の蛍光ペン 
     普通の蛍光ペン 

    <strong class="markup1-red"> 普通の蛍光ペン </strong>
    <strong class="markup1-blue"> 普通の蛍光ペン </strong>
    <strong class="markup1-yellow"> 普通の蛍光ペン </strong>
    <strong class="markup1-green"> 普通の蛍光ペン </strong>
    <strong class="markup1-pink"> 普通の蛍光ペン </strong>
    <strong class="markup1-orange"> 普通の蛍光ペン </strong>
    <strong class="markup1-purple"> 普通の蛍光ペン </strong>
    
    /* 赤 */
    .markup1-red {
      background: linear-gradient(transparent 60%,#ffadad 60%);
    }
    /* 青 */
    .markup1-blue {
      background: linear-gradient(transparent 60%, #c1e0ff 60%);
    }
    /* 黄色 */
    .markup1-yellow {
      background: linear-gradient(transparent 60%, #fff799 60%);
    }
    /* 緑 */
    .markup1-green {
      background: linear-gradient(transparent 60%, #d5ead8 60%);
    }
    /* ピンク */
    .markup1-pink {
      background: linear-gradient(transparent 60%, #ffc1e0 60%);
    }
    /* オレンジ */
    .markup1-orange {
      background: linear-gradient(transparent 60%, #ffe0c1 60%);
    }
    /* 紫 */
    .markup1-purple {
      background: linear-gradient(transparent 60%, #cab8d9 60%);
    }
    

    ② ストライプ柄


     ストライプ柄 
     ストライプ柄 
     ストライプ柄 
     ストライプ柄 
     ストライプ柄 
     ストライプ柄 
     ストライプ柄 

    <strong class="markup2-red"> ストライプ柄 </strong>
    <strong class="markup2-blue"> ストライプ柄 </strong>
    <strong class="markup2-yellow"> ストライプ柄 </strong>
    <strong class="markup2-green"> ストライプ柄 </strong>
    <strong class="markup2-pink"> ストライプ柄 </strong>
    <strong class="markup2-orange"> ストライプ柄 </strong>
    <strong class="markup2-purple"> ストライプ柄 </strong>
    
    /* 赤 */
    .markup2-red{
     position: relative;
    }
    .markup2-red:before{
     background: repeating-linear-gradient(-45deg, #ffadad, #ffadad 3px, #fff 0, #fff 6px);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -2;
    }
    .markup2-red:after{
     background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -1;	
    }
    /* 青 */
    .markup2-blue{
     position: relative;
    }
    .markup2-blue:before{
     background: repeating-linear-gradient(-45deg, #c1e0ff, #c1e0ff 3px, #fff 0, #fff 6px);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -2;
    }
    .markup2-blue:after{
     background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -1;	
    }
    /* 黄色 */
    .markup2-yellow{
     position: relative;
    }
    .markup2-yellow:before{
     background: repeating-linear-gradient(-45deg, #fff799, #fff799 3px, #fff 0, #fff 6px);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -2;
    }
    .markup2-yellow:after{
     background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -1;	
    }
    /* 緑 */
    .markup2-green{
     position: relative;
    }
    .markup2-green:before{
     background: repeating-linear-gradient(-45deg, #d5ead8, #d5ead8 3px, #fff 0, #fff 6px);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -2;
    }
    .markup2-green:after{
     background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -1;	
    }
    /* ピンク */
    .markup2-pink{
     position: relative;
    }
    .markup2-pink:before{
     background: repeating-linear-gradient(-45deg, #ffc1e0, #ffc1e0 3px, #fff 0, #fff 6px);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -2;
    }
    .markup2-pink:after{
     background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -1;	
    }
    /* オレンジ */
    .markup2-orange{
     position: relative;
    }
    .markup2-orange:before{
     background: repeating-linear-gradient(-45deg, #ffe0c1, #ffe0c1 3px, #fff 0, #fff 6px);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -2;
    }
    .markup2-orange:after{
     background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -1;	
    }
    /* 紫 */
    .markup2-purple{
     position: relative;
    }
    .markup2-purple:before{
     background: repeating-linear-gradient(-45deg, #cab8d9, #cab8d9 3px, #fff 0, #fff 6px);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -2;
    }
    .markup2-purple:after{
     background: linear-gradient(rgba(255,255,255,1) 60%, rgba(255,255,255,0) 0%);
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -1;	
    }
    

    ③ グラデ―ジョン


     グラデーション 
     グラデーション 
     グラデーション 
     グラデーション 
     グラデーション 
     グラデーション 
     グラデーション 

    <strong class="markup3-red"> グラデーション </strong>
    <strong class="markup3-blue"> グラデーション </strong>
    <strong class="markup3-yellow"> グラデーション </strong>
    <strong class="markup3-green"> グラデーション </strong>
    <strong class="markup3-pink"> グラデーション </strong>
    <strong class="markup3-orange"> グラデーション </strong>
    <strong class="markup3-purple"> グラデーション </strong>
    
    /* 赤 */
    .markup3-red {
      background: linear-gradient(#fff 40%,#ffadad 60%);
    }
    /* 青 */
    .markup3-blue {
      background: linear-gradient(#fff 40%, #c1e0ff 60%);
    }
    /* 黄色 */
    .markup3-yellow {
      background: linear-gradient(#fff 40%, #fff799 60%);
    }
    /* 緑 */
    .markup3-green {
      background: linear-gradient(#fff 40%, #d5ead8 60%);
    }
    /* ピンク */
    .markup3-pink {
      background: linear-gradient(#fff 40%, #ffc1e0 60%);
    }
    /* オレンジ */
    .markup3-orange {
      background: linear-gradient(#fff 40%, #ffe0c1 60%);
    }
    /* 紫 */
    .markup3-purple {
      background: linear-gradient(#fff 40%, #cab8d9 60%);
    }
    

    ④ ホバーエフェクト

    ※カーソルを文字の上にのせるとマーカー線がひかれます。

     ホバーエフェクト 
     ホバーエフェクト 
     ホバーエフェクト 
     ホバーエフェクト 
     ホバーエフェクト 
     ホバーエフェクト 
     ホバーエフェクト 
    <strong class="markup4-red"> ホバーエフェクト </strong>
    <strong class="markup4-blue"> ホバーエフェクト </strong>
    <strong class="markup4-yellow"> ホバーエフェクト </strong>
    <strong class="markup4-green"> ホバーエフェクト </strong>
    <strong class="markup4-pink"> ホバーエフェクト </strong>
    <strong class="markup4-orange"> ホバーエフェクト </strong>
    <strong class="markup4-purple"> ホバーエフェクト </strong>
    
    /* 赤 */
    .markup4-red{background-image: -webkit-linear-gradient(left, #ffadad 50%, transparent 50%);
      background-image: linear-gradient(to right, #ffadad 50%, transparent 50%);
      background-position: 100% 0%;
      background-size: 200% auto;
      background-repeat: no-repeat;
      -webkit-transition: background-position .5s ease-out;
      transition: background-position .5s ease-out;
    }
    .markup4-red:hover {
      background-position: 0% 0%;
    }
    /* 青 */
    .markup4-blue{background-image: -webkit-linear-gradient(left, #c1e0ff 50%, transparent 50%);
      background-image: linear-gradient(to right, #c1e0ff 50%, transparent 50%);
      background-position: 100% 0%;
      background-size: 200% auto;
      background-repeat: no-repeat;
      -webkit-transition: background-position .5s ease-out;
      transition: background-position .5s ease-out;
    }
    .markup4-blue:hover {
      background-position: 0% 0%;
    }
    /* 黄色 */
    .markup4-yellow{background-image: -webkit-linear-gradient(left, #fff799 50%, transparent 50%);
      background-image: linear-gradient(to right, #fff799 50%, transparent 50%);
      background-position: 100% 0%;
      background-size: 200% auto;
      background-repeat: no-repeat;
      -webkit-transition: background-position .5s ease-out;
      transition: background-position .5s ease-out;
    }
    .markup4-yellow:hover {
      background-position: 0% 0%;
    }
    /* 緑 */
    .markup4-green{background-image: -webkit-linear-gradient(left, #d5ead8 50%, transparent 50%);
      background-image: linear-gradient(to right, #d5ead8 50%, transparent 50%);
      background-position: 100% 0%;
      background-size: 200% auto;
      background-repeat: no-repeat;
      -webkit-transition: background-position .5s ease-out;
      transition: background-position .5s ease-out;
    }
    .markup4-green:hover {
      background-position: 0% 0%;
    }
    /* ピンク */
    .markup4-pink{background-image: -webkit-linear-gradient(left, #ffc1e0 50%, transparent 50%);
      background-image: linear-gradient(to right, #ffc1e0 50%, transparent 50%);
      background-position: 100% 0%;
      background-size: 200% auto;
      background-repeat: no-repeat;
      -webkit-transition: background-position .5s ease-out;
      transition: background-position .5s ease-out;
    }
    .markup4-pink:hover {
      background-position: 0% 0%;
    }
    /* オレンジ */
    .markup4-orange{background-image: -webkit-linear-gradient(left, #ffe0c1 50%, transparent 50%);
      background-image: linear-gradient(to right, #ffe0c1 50%, transparent 50%);
      background-position: 100% 0%;
      background-size: 200% auto;
      background-repeat: no-repeat;
      -webkit-transition: background-position .5s ease-out;
      transition: background-position .5s ease-out;
    }
    .markup4-orange:hover {
      background-position: 0% 0%;
    }
    /* 紫 */
    .markup4-purple{background-image: -webkit-linear-gradient(left, #cab8d9 50%, transparent 50%);
      background-image: linear-gradient(to right, #cab8d9 50%, transparent 50%);
      background-position: 100% 0%;
      background-size: 200% auto;
      background-repeat: no-repeat;
      -webkit-transition: background-position .5s ease-out;
      transition: background-position .5s ease-out;
    }
    .markup4-purple:hover {
      background-position: 0% 0%;
    }
    

    以上、4種類×7色、合計28パターンの蛍光ペン風サンプルコードをご紹介しました。

    カスタム次第でバリエーションもどんどん広がるので是非、使ってみてくださいね。





    この記事に関連するキーワード