※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。
【CSS】borderの線が長すぎるため幅、長さを調整する方法
CSS
CSSで大活躍するborderについて
例えば、border-bottomで下線を引いたとしよう
ホントは文字だけに下線を引きたいのだが
色んな条件によって文字だけを指定できず
文字エリア全体を指定せざるおえない場合
そのままだと画面いっぱいに下線が引かれ
見栄えが非常に悪くなります。
そこである程度短くしたい場合、
今回の内容を追加することで
ある程度、見た目が良くなります。
お試しください。
①幅広になってしまうパターン
dd{
border-bottom: solid 1px;
}
②幅を指定して調整するには「width:300px;」などを追加する
dd{
border-bottom: solid 1px;
width: 300px;
}
これで画面一杯の下線だったのが
300px幅の下線になります。
必要に応じて数値を修正してお試しください。
関連記事

CSSで何番目の要素に対して指定する方法
例えば、対象のHTMLコードが修正できなく、classやidが無いなどで何番目か ...

【CSS】電話番号にリンクを貼り付けてないのにスマホでリンクが付いてるのを解除する方法
ホームページ制作で 電話番号とか住所の番地にリンクを貼り付けていないのに スマホ ...

CSSのプロパティ「clear」とは?
CSSのプロパティである「clear」とは、要素をその前にある浮動要素の下に移動 ...

CSSで背景画像を位置調整、固定、繰り返し表示する方法
CSSで背景に画像を繰り返し挿入する 以下コードを挿入すると 指定エリア全画面上 ...

Contact Form 7の送信ボタンを中央寄せにする方法
Contact Form 7を使っていると色々と細かい調整が必要になるときがあり ...
カテゴリー
こんにちは、Hiro先生です。 今回は、デジタル時代における「ユーザー理解」を深めるために非常に重要なツール、Amplitude(アンプリチュード)という分析プラットフォームについて、...
最近は、Youtubeが多いので、たまにアップした動画を埋め込む際、動画の埋め込みタグって何だっけ?とど忘れしてしまうこともあったりします。...
充実様です。Hiro先生です♪ 今回、とても使いやすいPDF編集ソフトである「MiniTool PDF Editor」と巡り会ったので、ご紹介したいなと思います。...
ブログやホームページにYoutube動画を埋め込む際にYoutubeで埋め込みコードをコピペするとサイズが小さかったり、でかすぎたり、左寄せで見栄えが悪かったり。...
はじめて、レジストリのエリアをいじる際、パス指定でHKLM:¥とか表示されているやついったい何なん?...
PowerShellの画面で入力した、たくさん表示されてるコードなどをサクッと削除、クリアするコマンドは、以下のいずれかにて実行することが出来ます。 または...
noteにて、ふりがなを入れるには少しコツがいります。 下記、フォーマットに従って設定することで簡単にふりがなを入れることが出来るようになりますので誰でもやさしく読めるようになります。...
コピーしたデータが一つ一つセルごとに分かれて貼り付けられる予定だったものが一つのセルにすべて貼り付けられてしまった。 あるいは特定のセルが分割されずに一つのセルに入ってしまった。...
今回は、大量のデータを一つ一つチェックしていては手間がかかる重複チェックをサクッとできる方法について解説したいと思います。...
ブロックエディタで構築したいところがあるがテーマの仕様などによって、そのエリアはブロックエディタを扱うことが出来ないというときがあります。...