コピペでCSS!
 使い勝手のいい下線編

にいどめ

コピペでCSS!は、「深い意味まで考えず、CSSコードを自分仕様にアレンジして使おうぜ!」という内容です。難しいことは嫌いだ!極力避けたい!という方におススメなページ。

お好きな色やサイズに変更し、必要があればクラス名も変えてご使用ください。

コードはどこに書くの?という方、うまく反映されないなぁという方は、以下をどうぞ。

CSSをマイルドにお伝え!

どういうもののこと?
書き方やクラス名って?…etc

反映されない原因は何?

どんな時に発生しているのか、
経験した原因を6つご紹介

相変わらず浅く解説しておりますので、よければ参考にしてください。




地味に違うんです

出番の多い下線たち

当サイトで実際に使用中の下線です。
あえて文字色を薄めにし、下線をメインに表示しています。

使い方:

~.cssに記述するためのコードを掲載しているので、「投稿」への記述は下記を参考にしてください。

style.cssにコピペして…
.underline { border-bottom: solid 1px #000000; }
「投稿」へ書くと…(HTML)
こんな感じで<span class=”underline”>「投稿」へ入力</span>してください
以下のようにWebサイトで表示されます
こんな感じで「投稿」へ入力してください

普通の下線

当サイトAnything’s Possibleは…

ちょっと太い下線

Webサイトの制作方法に限らず…

わりと太い下線

女性向けオリジナルボイスドラマや…

点線

乙女ゲームのシナリオライターだった経験と…

二重線

我が家のワンコが患った病気など…

細いマーカー線

好き勝手な内容を皆さまへ発信しております…

文字半分だけマーカー線

すごくポジティブなサイト名ですが…

塗りつぶしマーカー線

実は根がネガティブの“根ガティブ人間”です……なんじゃそりゃ!

以上です。
あまりテキストの邪魔をしない下線なので、とても使い勝手がいいですよ。

皆さまもぜひご活用くださいませ!
次回はワンポイントに最適な囲み枠線をご紹介します。


ご覧いただきありがとうございました!