変なところで改行される内容がはみ出したり、おかしな所に色がついてしまったりする。ほっとくと、閲覧者に迷惑がかかります。伝えられないと、ホームページとして意味がなくなってしまいます。業者に依頼する前に、自分でなんとかできないものか?そう考えませんか?ちょっとした基礎を抑えることで、もしかしたら、意外に簡単に修正できるかもしれません。デザインが崩れる理由ホームページを制作する上で、この概念を抑えておかないと、何故壊れてしまうのかわかりづらくなります。htmlの要素と呼ばれるタグには、2種類あります。それが、ブロックレベル要素とインライン要素です。ブロックレベル要素は、その名の通り、四角で囲まれる要素という意味です。インライン要素は、その名の通り、文中にある要素という意味です。サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルオレンジで表現されているブロックレベルの要素の中に、ブルーで表現されているインライン要素が含まれています。ブロックレベル要素の例XHTML12<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>インライン要素の例XHTML123<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>見たことがあるタグがあるかもしれません。覚えるのが大変!と感じるかもしれません。ブロックレベル要素の方が多いので、そちらをまずは、覚えてしまいましょう。ブロックレベル要素の中にブロックレベル要素を配置したり、インライン要素の中に、インライン要素を配置したりすることもできます。href=""><b>サンプルサンプルサンプルサンプル</b></a>ブロックレベル要素は、情報を一つのかたまりとしてまとめます。ホームページを制作するということは、情報を整理するということです。どのようにブロックレベルを構成するのか?をまず最初に考える必要があります。要素の種類を変更できるCSSここからが少し厄介になるかもしれません。実は、CSSを使うと、ブロックレベル要素をインライン要素に、インライン要素をブロックレベル要素に変化させることができます。おかしな所で改行がされる。いうのは、ほとんどの理由は、この部分にあると思っていいかもしれません。インライン要素にブロックレベル要素への変換のCSSが設定されていると、横幅いっぱいに要素が広がり、次のテキストが自動的に改行されてしまいます。style="color:#0099CC;font-weight:bold;">サンプルサンプル</span>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</div>この部分にブロックレベル要素に変化させる設定を加えます。style="color:#0099CC;font-weight:bold;">この部分に、display:block;を記載します。style="color:#0099CC;font-weight:bold;display:block;">するとこうなりますね。style="color:#0099CC;font-weight:bold;">サンプルサンプル</span>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</div>表示はこのように変化します。サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル水色のサンプルの文字が、ブロックレベル要素に変換されます。そのため、勝手に改行されてしまうように見えますね。CSSにて、要素を変化させる設定は、displayを使用します。ここでは、あまり難しい設定を覚えようとすると混乱するので、下記3つのみ覚えておいて下さい。*/CSSをきちんと覚えると、デザインの修正が非常に楽になります。すべてのページを一つの設定でコントロールできるからです。これまで書き溜めた内容を一瞬にしてさらに読みやすく設定し直すことも可能になります。伝えるため、このCSS設定の概念を押させておくと良いでしょう。(2018/7/5)壁にぶつかり前に進めなくなってしまった。そんな時のマインドセットを学ぶ。(2018/7/5)ストレスに耐えられない人へ。強さとは相手を思いやる心に中にある。慈愛の心で優しさを育み生き残る戦略。(2018/7/4)結果を出さないと生き残れない。結果の尺度は考えてみよう。(2018/7/3)弱いものが生き残る生存戦略。制作一覧ファイルが開かない。ファイル形式(拡張子)?ファイルの扱いの基本。Scriptを共通化してスプレッドシートに読み込ませる方法。BlogでHTML/CSS/Javascriptを変更追加したい。Blogを自分でカスタマイズしたい。無料のOpenOfficeで複数の郵送先や宛名を別々に印刷する。住所の表から一枚一枚内容を変更して印刷したい。お客様に行動をうながすホームページの心理学。視線でイメージを伝える。アンケート回収の郵送回収費用を抑えたい。料金受取人払のサンプルファイル-お客様の声を手書きで郵送してもらう方法ハッキングを防止したい。縦横逆になってしまった動画を元に戻したい。スマホの縦横の撮影で失敗した時にパソコンで修正する方法。難しい言葉を使わない。revisit_after)。検索エンジン最適化でホームページを軽量化。Hangoutがアカウントなしでビデオ通話できるように。取引先と無料で高いクオリティのビデオ会議をしたい。Regexのバグ修正でタイトルを検索できるようにする。WordPressのタイトルを一括で置換するGoogle検索に悪質なサイトが表示されている。検索スパム報告をして削除してほしい。Locally.事業主の方へ、業務効率をあげる情報を公開しています。インターネットの最新情報は英語である事がほとんどです。最新の情報を取り入れ、ご自身の事業にお役立ていただければと思っています。名前:Oji経験が何かのお役に立てたら嬉しく思います。