おかげさま – 感謝の種まき –

人生で学んだスキルや知識のアウトプットブログです。旅する自由人を目指すブロガー Hiro先生です。

  • ホーム
  • ひとこと

    Hiroのひとこと♪

    『Hiroの知恵袋🌱』
    有料コミュニティーを オープンしました!
    yoor にて初月無料・翌月から月100円にて
    老若男女無制限ご参加いただけます。

    人間関係、健康、ビジネス、勉強、自己成長 などなど
    人生を豊かにしたい人はご参加ください。
    HiroのBrainを共有します♪

    今すぐ仲間になる

    【CSS】borderの線が長すぎるため幅、長さを調整する方法

    2021年6月24日CSS

    • Tweet
    • このエントリーをはてなブックマークに追加





    CSSで大活躍するborderについて
    例えば、border-bottomで下線を引いたとしよう

    ホントは文字だけに下線を引きたいのだが
    色んな条件によって文字だけを指定できず
    文字エリア全体を指定せざるおえない場合

    そのままだと画面いっぱいに下線が引かれ
    見栄えが非常に悪くなります。

    そこである程度短くしたい場合、
    今回の内容を追加することで
    ある程度、見た目が良くなります。

    お試しください。

    ①幅広になってしまうパターン

    dd{
    border-bottom: solid 1px;
    }

    ②幅を指定して調整するには「width:300px;」などを追加する

    dd{
    border-bottom: solid 1px;
    width: 300px;
    }

    これで画面一杯の下線だったのが
    300px幅の下線になります。

    必要に応じて数値を修正してお試しください。




  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2019-2022 おかげさま – 感謝の種まき – All Rights Reserved.

WordPress Luxeritas Theme is provided by "Thought is free".

  • 
    ホーム
  • 
    メニュー
  • 
    SNS
  • 
    サイドバー
  • 
    検索
  • 
    上へ
 TOP