閉じる
閉じる

あまめも

文字をマーカーのように強調するCSS設定。個人用まとめです。

 こんにちは! あますた(@amaguristar)です。前々から『HPにマーカーを引いた方がいいよな〜』と思っていました。以前、書き方は調べたことがあるのですが、調べるだけで満足して未実装。これはそろそろスニペット的にメモしておこうかな?って感じの今回です。

 

マーカー一覧

※個人用にカスタムしてます。

黄色ペン
.mark_yellow {
	background: linear-gradient(transparent 70%, #ffea00 70%);
}
赤ペン
.mark_red {
	background: linear-gradient(transparent 70%, #d7003a 70%);
}
青ペン
.mark_blue {
	background: linear-gradient(transparent 70%, #0095d9 70%);
}

使用例

<span class="mark_yellow">黄色ペン</span>

結果: mark_yellow-表示テスト

CSS一括登録
/* マーカー */
.mark_yellow { background: linear-gradient(transparent 70%, #fcd575 70%); } /* 卵色 */
.mark_red    { background: linear-gradient(transparent 70%, #d7003a 70%); } /* 紅 */
.mark_blue   { background: linear-gradient(transparent 70%, #0095d9 70%); } /* 青 */

まとめ

 個人的い使用するマーカーのスニペット的な意味合いで保存。色や太さは各々カスタムして下さい。本職ではないので間違いがあるかも分かりませんが、その際はこっそりご連絡お願いしますv

追記: 「css」の詳細は下記の記事を参照。

関連記事

  1. サイトデザイン

    「サイトでキーワードを目立つ様に囲みたい!」そんな時はcssでク…

  2. インフォ

    画面のサイズに合わせて拡大縮小する画像の簡単なCSS設定

  3. 色々とあったのでWordPressをエディタで書こうとしてとりあ…

  4. take088-thumbnail

    【WaznFilm更新】フリーアイコンはここで決まり!クオリティ…

  5. 09222021-info

    HTMLでふりがなを表示する方法!タグの使い方

  6. take095-thumbnail

    【WaznFilm更新】FontAwesomeを通常のアプリ(W…

こんなメモもありますよ♪

  1. take092-thumbnail
  2. AI崩壊

Twitter

ページ上部へ戻る