サイドバーが圧迫されてしまったときの対処方法 について、ご説明します。
動画で話している内容について(テキスト)
ここでは、サイドバーが圧迫されてしまったときの対処方法について、ご説明をさせていただきます。
まず、ホームページを作っていると、サイドバーが圧迫されて、サイドバーの横幅が狭くなってしまうことがあります。
これは、メインコンテンツの横幅が広くなりすぎていることが原因です。
たとえば、メインコンテンツの部分で、下記のことを行っているときに、起きる現象になります。
■ サイドバーの横幅が狭くなる3つの原因
- メインコンテンツの部分に、横幅の大きな画像を表示させた場合。
- メインコンテンツの部分に、イコール(=)や、エンマーク(\)などの記号をたくさん使った場合。
- メインコンテンツの部分に、全角空白をたくさん使った場合。
|
メインコンテンツの部分に、横幅の大きな画像を表示させた場合
メインコンテンツの部分に、横幅の大きな画像を表示させると、メインコンテンツの横幅が広がって、サイドバーが狭くなってしまいます。
このような場合は、画像をJTrim を使って、横幅を小さくするか、もしくは、width を使って、横幅を調整するようにしましょう。
こうすることで、サイドバーが圧迫される現象を防ぐことができます。
メインコンテンツの部分に、イコール(=)や、エンマーク(\)などの記号をたくさん使った場合
これはブラウザによって異なるのですが、たとえば、イコール(=)やエンマーク(\)などの記号を
連続してたくさん使ってしまうと、ブラウザによっては、横幅が広がってしまうことがあります。
そのため、横線を使いたい場合は、イコールなどの記号ではなく、hr タグを使うようにしましょう。
メインコンテンツの部分に、全角空白をたくさん使った場合
これもブラウザによって異なるのですが、全角空白を連続してたくさん使ってしまうと、ブラウザによっては、横幅が広がってしまうことがあります。
(Goole クロームは広がります)
「半角空白」であれば、ブラウザは空白を認識しないのですが、「全角空白」はブラウザが認識するので、全角空白をたくさん使うことは、避けるようにしてください。
これらのことを注意することで、サイドバーが圧迫されて、サイドバーの横幅が狭くなってしまう現象は、防ぐことができます。
【よく読まれている関連記事】
【おすすめ外部コンテンツ】
■ 当サイトで使用しているサンプルサイトを無料でダウンロード!
■【特典画像100枚】オフィスで働いている女性が人差し指を立てている画像
■ AIやChatGPTを使ってインターネットビジネスを行う講座