★ Let's become a Web Designer! 【プロフィール】 【ホームページ制作】 【ビジネス講座】 【お問い合わせ】 【運営会社】
 

サイドバーが狭くなったとき

 
|トップページ |はじめにご覧ください |ホームページ制作講座の効果 |作成実績 |受講者の声 |パーツテンプレート集 |ホームページ基礎講座 |
 
 
|プロフィール |制作依頼 |ビジネス講座 |お問い合わせ |
 

サイドバーが狭くなったとき

 
|トップページ |基礎知識 |ホームページソフト |HTMLタグ |CSS入門 |テクニック集 |
 
 

サイドバーが圧迫されてしまったときの対処方法

サイドバーが圧迫されてしまったときの対処方法 について、ご説明します。


動画を見る
 
(上記の動画が見れない方は、こちらの大きな動画 をご覧ください)



動画で話している内容について(テキスト)

ここでは、サイドバーが圧迫されてしまったときの対処方法について、ご説明をさせていただきます。


まず、ホームページを作っていると、サイドバーが圧迫されて、サイドバーの横幅が狭くなってしまうことがあります。




これは、メインコンテンツの横幅が広くなりすぎていることが原因です。

たとえば、メインコンテンツの部分で、下記のことを行っているときに、起きる現象になります。



■ サイドバーの横幅が狭くなる3つの原因

 
  1. メインコンテンツの部分に、横幅の大きな画像を表示させた場合。
  2. メインコンテンツの部分に、イコール(=)や、エンマーク(\)などの記号をたくさん使った場合。
  3. メインコンテンツの部分に、全角空白をたくさん使った場合。


メインコンテンツの部分に、横幅の大きな画像を表示させた場合

メインコンテンツの部分に、横幅の大きな画像を表示させると、メインコンテンツの横幅が広がって、サイドバーが狭くなってしまいます。

このような場合は、画像をJTrim を使って、横幅を小さくするか、もしくは、width を使って、横幅を調整するようにしましょう。

こうすることで、サイドバーが圧迫される現象を防ぐことができます。



メインコンテンツの部分に、イコール(=)や、エンマーク(\)などの記号をたくさん使った場合

これはブラウザによって異なるのですが、たとえば、イコール(=)やエンマーク(\)などの記号を 連続してたくさん使ってしまうと、ブラウザによっては、横幅が広がってしまうことがあります。

そのため、横線を使いたい場合は、イコールなどの記号ではなく、hr タグを使うようにしましょう。



メインコンテンツの部分に、全角空白をたくさん使った場合

これもブラウザによって異なるのですが、全角空白を連続してたくさん使ってしまうと、ブラウザによっては、横幅が広がってしまうことがあります。 (Goole クロームは広がります)

「半角空白」であれば、ブラウザは空白を認識しないのですが、「全角空白」はブラウザが認識するので、全角空白をたくさん使うことは、避けるようにしてください。


これらのことを注意することで、サイドバーが圧迫されて、サイドバーの横幅が狭くなってしまう現象は、防ぐことができます。





【よく読まれている関連記事】



ホームページについて、次のステップへ
自分で作りたい方、制作をお願いしたい方、作成スキルを仕事にしたい方へ。
目的に合わせてお選びください。
仕事にしたい
ホームページ作成を仕事にしたい方へ

AIを活用してホームページを作り、そのスキルを仕事や収入につなげたい方のための講座です。

作ってほしい
ホームページを作ってほしい方へ

「自分で作るのは難しい」という方へ。 分かりやすく使いやすいホームページを、低価格で制作しています。

自分で作りたい
自分でホームページを作ってみたい方へ

初心者向けのホームページテンプレートをご用意しています。 ホームページを作りながら、自分で作れる力を身に付けたい方におすすめです。



 

 

 
^