変なところで改行される
内容がはみ出したり、おかしな所に色がついてしまったりする。
困りますね。ほっとくと、閲覧者に迷惑がかかります。
きちん伝えられないと、ホームページとして意味がなくなってしまいます。
業者に依頼する前に、自分でなんとかできないものか？
そう考えませんか？
ちょっとした基礎を抑えることで、もしかしたら、意外に簡単に修正できるかもしれません。
デザインが崩れる理由
ホームページを制作する上で、この概念を抑えておかないと、何故壊れてしまうのかわかりづらくなります。
htmlの要素と呼ばれるタグには、2種類あります。
それが、
ブロックレベル要素とインライン要素です。
ブロックレベル要素は、その名の通り、四角で囲まれる要素という意味です。
インライン要素は、その名の通り、文中にある要素という意味です。
例えばこんな感じです。
オレンジで表現されているブロックレベルの要素の中に、ブルーで表現されているインライン要素が含まれています。
ブロックレベル要素の例
1 2 | <address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、 <hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul> |
インライン要素の例
1 2 3 | <a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、 <em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、 <small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var> |
見たことがあるタグがあるかもしれません。
覚えるのが大変！と感じるかもしれません。ブロックレベル要素の方が多いので、そちらをまずは、覚えてしまいましょう。
ブロックレベル要素の中にブロックレベル要素を配置したり、インライン要素の中に、インライン要素を配置したりすることもできます。
ブロックレベル要素の中に、ブロックレベル要素を配置する例
1 | <div><p>サンプルサンプルサンプルサンプル</p></div> |
インライン要素の中に、インライン要素を配置する例
1 | <a href=""><b>サンプルサンプルサンプルサンプル</b></a> |
ブロックレベル要素は、情報を一つのかたまりとしてまとめます。
ホームページを制作するということは、情報を整理するということです。
どのようにブロックレベルを構成するのか？をまず最初に考える必要があります。
要素の種類を変更できるCSS
ここからが少し厄介になるかもしれません。
実は、CSSを使うと、ブロックレベル要素をインライン要素に、インライン要素をブロックレベル要素に変化させることができます。
おかしな所で改行がされる。というのは、ほとんどの理由は、この部分にあると思っていいかもしれません。
インライン要素にブロックレベル要素への変換のCSSが設定されていると、横幅いっぱいに要素が広がり、次のテキストが自動的に改行されてしまいます。
先ほどの例です。
1 2 3 | <div style="border:3px solid #FF6600;padding:15px;"> サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル<span style="color:#0099CC;font-weight:bold;">サンプルサンプル</span>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル </div> |
この部分にブロックレベル要素に変化させる設定を加えます。
1 | <span style="color:#0099CC;font-weight:bold;"> |
この部分に、display:block;を記載します。
1 | <span style="color:#0099CC;font-weight:bold;display:block;"> |
するとこうなりますね。
1 2 3 | <div style="border:3px solid #FF6600;padding:15px;"> サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル<span style="color:#0099CC;font-weight:bold;">サンプルサンプル</span>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル </div> |
表示はこのように変化します。
水色のサンプルの文字が、ブロックレベル要素に変換されます。そのため、勝手に改行されてしまうように見えますね。
CSSにて、要素を変化させる設定は、displayを使用します。
ここでは、あまり難しい設定を覚えようとすると混乱するので、下記３つのみ覚えておいて下さい。
[css]
display:none; /* 非表示にする */
display:inline; /* インライン要素に変更する */
display:block; /* ブロックレベル要素に変更する */
[/css]
これまで書き溜めた内容を一瞬にしてさらに読みやすく設定し直すことも可能になります。きちんと伝えるため、このCSS設定の概念を押させておくと良いでしょう。
Amazonで購入したおすすめ商品
お疲れ様です。パソコン仕事は体を痛めます。長時間のパソコン仕事で、肩や目が痛い方はこちらがおすすめです。
快適な環境で仕事をしたいですね。
肩が上がらない。姿勢が悪くなる。
腕を広げてタイピングできるので、肩への負担が軽減されます。
目の奥が痛い！時に。
画面の色を損なうことなく、パソコンを長時間見るときに役立ちます。
見た目はエッジが効いている？ので、集中モードの時に。
ネットが遅くて困る！接続数足りてる？
パソコン・スマホ・タブレットを８０台まで接続できてこの値段。
