検索結果に影響を与えるHTMLの記述ルール作成者が気付かない構文エラーツールバーの多用に注意HTMLの記述方法にはルールがあり、基本的な最低限の知識は必要です。ソフトでホームページ作成をする場合に、ツールバーなどでの便利なエディット機能を多用すると、このルールからいつの間にか外れてしまう事もあります。これは構文エラーと呼ばれSEOに影響しますし、表示崩れで一番多い原因になっています。このようなHTMLの記述ミスが検索順位に直接大打撃を与える事は無いですが、確実にマイナスであり絶対にプラスにはなりません。SEO対策は小さな施策の積み上げですが、ホームページを作成する以上「構文エラーがない事」は大前提になります。そのため作成ソフトを扱う場合でも最低限のHTMLのルールを知っておく必要があります。[この動画は13分15秒です]HTMLのルールHTML記述の親子関係親要素と子要素ブロック要素ブロック要素はページの構造やレイアウトに関係する要素でブロック内の行全体をまとめて、独立したスペースを形成します。この事からページ内でブロック同士は必ず改行され、垂直方向に積み上げられていきます。ブロック要素の開始タグと終了タグ内の行に対して開始タグ内に記述されたスタイルが影響を及ぼします。(親)グループ・・<div>サンプル</div>(子)段落・・・・<p>サンプル</p>インライン要素ブロック要素は行全体のまとまりである事に対して、インライン要素は行の中の一部のまとまりで、特定の単語や文章に対して意味や役割を与える要素で、要するにシリウス2ではツールバーの「装飾」で表示されるHTMLと言えます。(孫) 文節・・・<span>サンプル</span>(ひ孫)語句・・・<b>サンプル</b>親子関係の基本形親子関係<div><p><span>〇<b>〇</b>〇</span></p></div>シリウス2はPタグ改行なので<p>は作成画面では表記されない!記述ミスの例記述ミス-1むかし、むかし、ある所におじいさんとおばあさんが住んでいました。ツールバー「青色装飾」<span style="color:#4473B1;">むかし、むかし、ある所に</span><span style="color:#4473B1;">おじいさんとおばあさんが</span><span style="color:#4473B1;">住んでいました。</span>むかし、むかし、ある所におじいさんとおばあさんが住んでいました。後で全選択し下位の要素で装飾しない!HTML記述ミス<b><span style="color:#4473B1;">むかし、むかし、ある所に</span></b><b><span style="color:#4473B1;">おじいさんとおばあさんが</span></b><b><span style="color:#4473B1;">住んでいました。</span></b>記述ミス-2段落、文節にボールドした後で、部分的な色変更<b>むかし、ある所におじいさんとおばあさんが住んでいました。</b>記述ミスボールドの開始タグと終了タグの中に文節が存在する<b>むかし、ある所に<span style="color:#CA3659;">おじいさんとおばあさん</span>が住んでいました。</b>正しい順番1-先にボールド→色指定<span style="font-weight:bold;">むかし、むかし、ある所に<span style="color:#CA3659;">おじいさんとおばあさん</span>が住んでいました。</span>2-先に色指定→個別にボールド(bタグが閉じているのでOK)<b>むかし、むかし、ある所に</b><span style="color:#CA3659;font-weight:bold;">おじいさんとおばあさん</span><b>が住んでいました。</b>記述ミス-3一部分をボールドした後に色変更+ボールドを装飾むかし、むかし、ある所に<b>おじいさんとおばあさん</b>が住んでいました。記述ミスボールドが重なっている<span style="color:#4473B1;font-weight:bold;">むかし、むかし、ある所に<b>おじいさんとおばあさん</b>が住んでいました。</span>正しい作業最初のボールドは消しておく<span style="color:#4473B1;font-weight:bold;">むかし、むかし、ある所におじいさんとおばあさんが住んでいました。</span>記述ミス-4リスト表示させた後に全体にボールドをかけるサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル記述ミスリストの外にボールドが存在する<ol><b><li>サンプルサンプルサンプル</li></b><b><li>サンプルサンプルサンプル</li></b><b><li>サンプルサンプルサンプル</li></b><b><li>サンプルサンプルサンプル</li></b></ol>正しい作業最初にボールドをかけてからリストする<b>サンプルサンプルサンプル</b><b>サンプルサンプルサンプル</b><b>サンプルサンプルサンプル</b>記述ミスのない装飾方法装飾の順番を決めておく文字装飾する場合は、ある段落のテキストの記述を一通り完了させてから作業します。テキストを打ちながらその都度装飾するのは止めた方が良いです。そして装飾の際まず最初にどの段落、文節、語句に対してエディットするのかを大まかにイメージします。ほとんどの場合「枠」などの大きい記述は最後に、小さいボールドなどは最初になります。親子関係の例-1<div style="color:#000000;background-color:#EDF5F8;font-size:16px;border:solid 2px #4473B1;padding:9px;" class="usrbox"><p>16Px<span style="color:#CA3659;font-size:20px;">20Px・赤色<b>20Px・赤色・太文字</b></span><b>16Px</b></p></div>16Px20Px・赤色20Px・赤色・太文字16Px親子関係の例-2元の文章むかし、むかし、ある所におじいさんとおばあさんが住んでいました。おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。おばあさんが川で洗濯をしていると大きな桃が流れてきました。装飾後むかし、むかし、ある所におじいさんとおばあさんが住んでいました。おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。おばあさんが川で洗濯をしていると大きな桃が流れてきました。シリウス2のサイト作成画面<div style="color:#000000;background-color:#EDF5F8;border:solid 1px #4473B1;padding:18px;" class="usrbox">むかし、むかし、ある所に<span style="color:#4473B1;"><b>おじいさん</b></span>と<span style="color:#CA3659;"><b>おばあさん</b></span>が住んでいました。おじいさんは<b>山へしば刈り</b>に、おばあさんは<b>川へ洗濯</b>に行きました。<span style="font-size:20px;">おばあさんが川で洗濯をしていると<b>大きな桃</b>が流れてきました。</span></div>サイト生成されて実際にアップロードされるHTMLサイト生成時自動的にPタグが付与される<div style="color:#000000;background-color:#EDF5F8;border:solid 1px #4473B1;padding:18px;" class="usrbox"><p>むかし、むかし、ある所に<span style="color:#4473B1;"><b>おじいさん</b></span>と<span style="color:#CA3659;"><b>おばあさん</b></span>が住んでいました。おじいさんは<b>山へしば刈り</b>に、おばあさんは<b>川へ洗濯</b>に行きました。</p><p> </p><p><span style="font-size:20px;">おばあさんが川で洗濯をしていると<b>大きな桃</b>が流れてきました。</span></p></div>
