★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【特典画像】 【あなたのお手伝い】
 

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

 
トップページ はじめに 講座の効果 作成実績 受講者の声 パーツテンプレート ホームぺージ講座 スマホサイト講座 よく使う用語集
 
 
プロフィール商品一覧特典画像お手伝い
 

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

 
トップページ 基礎知識 ホームページソフト スマホサイト講座 AI活用法 レンタルサーバ 用語集 HTMLタグ CSS入門 テクニック集
 
 

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

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


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



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

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


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




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

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



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

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


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

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

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

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



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

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

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



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

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

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


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





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


【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒ 当サイトで使用しているサンプルサイトの無料ダウンロードはこちら



【特典画像100枚】オフィスで働いている女性が人差し指を立てている画像

高品質で、ホームページでとても使いやすい画像100枚を「特典」としてお渡ししています。 人物の画像素材は少ないため、とても貴重な画像素材です。

⇒ オフィスで働いている女性が笑顔で人差し指を立てている画像について



AIやChatGPTを使ってインターネットビジネスを行う講座

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒ 「AI」や「ChatGPT」を活用してビジネスを行う講座はこちら



 

 

 
^