CSSfacebookTweethatenaline2019.06.10レシピテキストテキストにペンで線を引いたようなスタイルを指定するペンで引いたような太めの線をテキストに引く方法を解説します。この記事のポイント強調したい部分を蛍光ペンでマーキングしたように見せるペンの太さや色を変える蛍光ペンのようなラインを引いて目立たせるテキストの強調したい箇所を目立たせるために、CSSのグラデーションを使ってペンでマーキングしているような見せ方をする方法です。表示例HTMLのマークアップ例<p>テキストの一部を目立たせたい場合に、<strong>蛍光ペンで線を引いたようなCSSをかけることができます</strong>。</p>内容を強調させる意味でstrong要素がニュアンスとして合っていますが、意味的な強調ではなく単に表示だけ設定したい場合はb要素やspan要素など他の要素でも同じ表示を再現できます。100%);}グラデーションをかけるlinear-gradient関数を使います。60%」は開始色です。背景色が親要素と同じになるように「transparent」を指定し、続いて「60%」を指定して0%〜60%は親要素と同じ背景色になるようにしています。60%」は中間色です。ここは黄色(#e6d300)を指定し、開始色と同じ位置である「60%」を指定します。開始色と中間色の位置は近ければ近いほど(もしくは同じ値)、グラデーションの境目が小さくなってメリハリのある色の区切りを作ることができます。100%」は終了色です。こちらの背景色は中間色と同じ色を指定しています。位置は「100%」として、60%〜100%まで黄色を敷く指定になっています。以上のグラデーションを上から下に向かって適用することで、ペンでマーキングしたような表現を行っています。ペンの太さを調整する上記CSSについて、グラデーションの開始色と中間色の場所を揃えて変更することでペンの太さを調整できます。HTMLのマークアップ例<p>テキストの一部を目立たせたい場合に、<b>蛍光ペンで線を引いたようなCSSをかけることができます</b>。100%);}表示例ペンの太さとあわせて色もピンクに変更しました。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。