ホームページ制作や修正の際に注意すべき記述ミス【初心者編】

ホームページ制作や修正の際に注意すべき記述ミス【初心者編】


今回は、少し初心に戻りまして、「ホームページ制作や修正の際に注意すべき記述ミス【初心者編】」についてゆったり思いついたことをお伝えしていこうと思います。

ホームページ制作・Web制作に関しても誰しもが最初は初心者ですが、初心者がゼロからホームページ制作をしたりホームページの修正を手がける場合に陥りやすいミスについて思い出しながら書いていきます。

大学生の方とお話していると、ホームページ作成ツールを使ってドラッグドロップでホームページ制作をしている時には問題なくても、HTMLソースなどを操作し始めて、少し細かなカスタマイズや修正に挑戦した場合、「すぐにエラーが出る」ということがよくあるそうです。

「ホームページはほとんど完成形なのに、あと少しのところで思い通りにできない」

そんなことはよくあると思います(その「あと少し」が難しかったりするのですが…)

初心者であれば静的HTMLサイトでもレイアウト崩れなどが起こったりしますが、さらにWordPressなどでphpを扱った場合はレイアウト崩れで済まず内部サーバーエラーに頭を抱えるという局面も出てきます。

便利なツールがたくさん出てきて、その精度が高まっていくと、本当に少しの操作でホームページの作成ができることもありますが、本質的には、ホームページを作ることよりも、思い通りに作ることであったり、どういうふうに設計していくかのほうが大事です。

ちょっとしたホームページの修正やカスタマイズを思いついても、ソースを改変したら一気に全てがエラーになったり、レイアウトがガタガタになったという経験は初心者の頃にはよくあります。

そこで今回は、ホームページ制作や修正の際に注意すべき記述ミス【初心者編】として、ホームページ修正時のタグなどの閉じ忘れ(HTMLタグの閉じ忘れ、CSSプロパティの閉じ忘れ)、タグの記述が不完全、エディタによるタグの自動整形・補正といったものをはじめ、ホームページのレイアウトを修正している時にブロック要素の左右比率の合計が100%を超えた場合、marginとpaddingの設定、ブロック要素分割時のfloatのクリア忘れなど、様々なパターンについて触れていきます。

また、カラー設定が反映されないというケース(id,classが複雑で、どの部分が優先されているのかわからないという場合)の他、ホームページの修正が全然うまくいかない場合(WordPress編)として、WordPressテーマがHTMLにstyleとして吐き出す場合、要素に直で設定を吐き出すタイプのテーマ等の場合、そして、WordPress管理画面のカスタマイズ機能を無効にするといった点についてお伝えしていきます。

ホームページ修正時のタグなどの閉じ忘れ

ホームページ修正時のタグなどの閉じ忘れ

ホームページ制作・Web制作の初心者が陥りやすいミスとして、本当に基本的な記述ミスになりますが、HTMLやCSSなどで、タグやプロパティを閉じ忘れてホームページ制作時や修正時にエラーが出るということはよくあります。

使用しているエディタにもよりますが、基本的にはエディタが閉じ忘れなどを教えてくれたりするものの、WordPressで純正のテキストモードを使用している時などは、不意にタグを閉じるのを忘れる時もあります。WordPress管理画面からテーマの編集でソースを触るときも同じです。

ホームページ制作初心者の頃は、HTMLタグの閉じ忘れやCSSプロパティの閉じ忘れなど、ほんの一文字の入力不足でレイアウトがガタガタ崩れたりすることがよくあります。

HTMLタグの閉じ忘れ

ホームページ修正 HTMLタグの閉じ忘れ

やたらと<h3>が続いていると思えば、</h3>で閉じていなかったので、その間の段落も全て見出し3 扱いになりながら、次の<h3>の終わりまで見出しが続いていたという経験などはないでしょうか?

ホームページ制作の初心者がやってしまいがちな記述ミスの代表例はこうしたHTMLタグの閉じ忘れです。HTMLタグの閉じ忘れによって、HTMLマークアップが変になってしまうという事例です。

<div>といった汎用ブロック要素を始めとした各種HTMLのブロック要素の閉じ忘れなどは、レイアウト崩れなどの原因になることもありますので注意が必要です。

CSSプロパティの閉じ忘れ

ホームページ修正 CSSプロパティの閉じ忘れ

同様にCSSにおいても最後の「 } 」を忘れて、「どの部分関するCSSかわからなくなる」といった現象が起こって、ホームページの表示がおかしくなったり、単純に「 ; 」をしっかり入れていなかったためCSSの記述が無効化されていた、というケースもあります。

メディアクエリ関連ならスマートフォン表示に影響するため、特に注意が必要です。CSSの設定が全く効かないという場合も起こりえます。

タグの記述が不完全

ホームページ修正 タグの記述が不完全

ツールを使わずに画像やリンクを設置しているとよく起こりがちなのが「属性の設定」をする時に「 ” 」などを記述するのを忘れてしまったり、コピーアンドペーストで挿入している時に、その部分も上書きしてしまって、結果的に「 ” 」などが消えてしまうケースです。

<a href="https://funfairfanfare.com/seo%ef%bc%88%e6%a4%9c%e7%b4%a2%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%b3%e6%9c%80%e9%81%a9%e5%8c%96%ef%bc%89/" target="_blank">SEO(検索エンジン最適化)</a>

href属性でURLを指定した場合に閉じ忘れるケース。

<a href="https://funfairfanfare.com/seo%ef%bc%88%e6%a4%9c%e7%b4%a2%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%b3%e6%9c%80%e9%81%a9%e5%8c%96%ef%bc%89/ target="_blank">SEO(検索エンジン最適化)</a>

エディタによるタグの自動整形・補正

エディタによるタグの自動整形・補正

HTMLタグの閉じ忘れなどとは逆にエディタの自動整形・補正機能により、余分な閉じタグが付加されることもあります。

これはWordPressなどのCMSでよくある事例ですが、ビジュアルモードとテキストモードの切り替えの際にタグの自動整形が行われ、意図していないタグが挿入されていることがあります。

また、テーマファイルを操作するときなどに、タグを記述すると自動で閉じタグが吐き出されることがあります。

こうした自動で設定されていく閉じタグにより、閉じタグが二重となって親要素まで閉じてしまい、結果的にレイアウトが崩れてしまうということが起こることがあります。

ホームページのレイアウトを修正している時

ホームページのレイアウトを修正している時

テキストカラーの調整など、ホームページの細かな点を調整しているときは、記述ミスがあっても大したことはないのですが(背景と同一色で文字が読めなくなるというケースを除いて)ホームページのレイアウトに関する修正をしている場合は、ちょっとしたミスでレイアウト崩れが起こったりします。

特に注意すべきはブロック要素です。

ブロック要素とインライン要素

ホームページ制作中や修正中にブロック要素に関する記述ミスがあると、レイアウトはバランスを崩し、ホームページがガタガタの表示になることがあります。

ブロック要素の左右比率の合計が100%を超えた場合

ホームページ修正 ブロック要素左右比率の合計値

まあ当然といえば当然ですが、要素を横に並べている場合、その左右比率の合計値が100%を超えた場合は、基本的には右側の要素が下に移ります。

これはメインカラムとサイドバーといったホームページ全体のレイアウトの場合でも、本文カラム内に設置した画像を横に並べている場合でも同じです。

それぞれの要素の幅とmarginの合計値が、親要素の横幅を越えた場合は、「はみ出した分は非表示」という設定などをしていない限り、通常下に回り込みます。

ホームページ制作中や修正中にこうしたブロック要素の横幅の合計値に関する記述ミスがあると、レイアウト崩れの原因となるので注意が必要です。

marginとpadding

ホームページ修正 marginとpadding

こうした場合によく出てくるのがmarginとpaddingの違いですが、それぞれ外余白と内余白で、marginは要素の外側の余白を指定するため、横向きのマージンがあった場合は当然に親要素の横幅を占有します。

要素分割で50%と50%に左右に並べた場合でも、この二つの要素の間に少しでもmarginの指定があると、横幅の合計値が100%を超えてしまうため、二番目に配置した要素は下に回り込みます。

ブロック要素分割時のfloatのクリア忘れ

ホームページ修正 floatのクリア忘れ

ブロック要素を50%などにしている場合にその要素をfloatで左右に並べている場合、clearでfloatを解除し忘れると、レイアウトがガタガタになることがあります。

これはこのfloatの設定が、そうした幅50%のブロック要素だけでなく、その次以降の要素にも適用されてしまうためです。

floatで回り込み指定をした場合には、回り込み解除の指定が漏れていないか確認が必要です。

カラー設定が反映されない

カラー設定が反映されない

ホームページの文字色や背景色を指定する時にはHEXと呼ばれる16進法の値やRGB値、カラーネームで色を指定します。

これもすごく初歩的なことですが、HEXで指定する場合は、16進法6桁(一部の色は3桁で指定可)で指定するのですが、先頭に「 # 」を付ける必要があります。

デベロッパーツールなどで表示色を確認しながらコピーして、CSS側にペーストする時に、意外と「 # 」を忘れてしまったり、逆にカラーピッカーなどで調整しながらコピーしてペーストする際に先頭が「 ## 」と二重になってしまい、無効化されてしまうというケースもあります。

カラーの調整がうまくいかないときはこんなところに原因があることがあります。

id,classが複雑で、どの部分が優先されているのかわからない

ホームページ修正 id,classが複雑

ホームページの基本的な文字色の設定は、CSSで指定する際に、「html」や「body」で一括指定してもよいのですが、テンプレートを使用している場合は、意外と複雑に「#main」など、要素IDごとに細かく上書きが繰り返されている場合があります。

指定が重複している場合は、その中で一番具体的な指定が優先されたり、CSSの記述の下の方にあるものが優先されますが、ページのCSSの指定が複雑で、どれが該当部分に関する指定かわからなくなる場合があります。

デベロッパーツールなどで確認して、どの部分が優先され、反映されているのかチェックしてみるとよいでしょう。

もしくは最下部に書き直して上書きしてしまうというのも一つの方法です。

ホームページの修正が全然うまくいかない場合(WordPress編)

ホームページの修正が全然うまくいかない場合(WordPress編)

WordPressサイトのテーマ編集でスタイルの編集を行っても、ホームページの修正が全然うまくいかない場合があります。

これはWordPressテーマのカスタマイズ機能に原因がある場合がよくあります。

「せっかくCSSを操作して完璧なはずなのに、どうも反映されない」

そんなときは、WordPressテーマの根本仕様に問題がある場合があります。

初心者向けに感覚的に設定できるように配慮された仕様が裏目に出る瞬間です。

簡単に修正できそうで、結局テーマの設定が修正の記述をさらに上書きしてしまうという現象がよく起こります。

WordPressテーマがHTMLにstyleとして吐き出す場合

WordPressテーマがHTMLにstyleとして吐き出す場合

意外と厄介なのが、WordPressテーマの「カスタマイズ」機能でフォントカラーやフォントサイズを指定できるタイプのWordPressテンプレートです。

初心者の方が、WordPress管理画面からスタイルの微調整をできるため、ありがたい仕様のように見えますが、逆にこれがカスタマイズの障害になる場合があります。

例えば、フォントサイズの指定を管理画面から行う場合<h2>のフォントサイズを入力するだけでサイズ変更できるとします。

この場合、この指定がCSSとして指定される場合は、他のCSSで優先度合いを上書きで指定することもできますが、HTMLの中に<style>として直接吐き出すタイプのものもあります。

こうした設定の場合は、ホームページレイアウトの中のセクションごとのh2に変化を与えたいのにそれができなかったり、スマートフォン表示の際には、フォントサイズを変更したいのにそのスマホ用設定ができなかったりといったケースに見舞われることもあります。

要素に直で設定を吐き出すタイプ

ホームページ修正 要素に直で設定を吐き出すタイプ

ホームページのデザイン面の設定の基本は、それぞれの要素や各汎用ブロック要素などにidやclassをつけたりして、それに応じたプロパティをCSS側で記述するやり方です。

しかしながら、例えば汎用ブロック要素<div>に「<div style=”この要素のスタイル”>」といったように、直に記述することも可能です。

WordPressテーマの中にはこの直書きの仕組みを利用して、管理画面の「カスタマイズ」での設定を反映させるタイプのものがあります。

もちろんそれでも通常表示には問題ないのですが、やはりこの方法には問題点が残っています。

それは、スマートフォン対応、モバイルフレンドリーへの配慮がなされていない、といった問題です。

管理画面からの設定で適用できるスタイルは一つだけだったりします。

さらにWordPressユーザーの感覚的操作を重視するため、数値の入力だけしかできなかったりします。

例えばサイズを設定する場合に入力項目としては「数値」のみですが、出てくる記述は「width:数値px;」といったように強制的にpxで吐き出すように設定されています。

この場合は、「%」などが使えないため、pxで指定するしか無くなりますが、500pxで指定した場合でもスマートフォンの横幅は最大で320pxだったり、375px,414pxだったりとその数値以下であるケースがあります。

こうした場合にホームページのスマートフォン表示に影響をあたえることがあります。

WordPress管理画面のカスタマイズ機能を無効にする

ホームページ修正 WordPress管理画面のカスタマイズ機能を無効にする

究極的には、WordPressホームページの修正やカスタマイズに関して、細かな点を調整する場合、スマートフォン表示に配慮する場合には、こうしたテーマ独自のカスタマイズを無効にして、すべてCSSで設定し直す必要があるケースがあります。

CSS側で上書きしようと思っても、できない場合は、そうしたスタイルや直書き設定を吐き出す仕組み自体を無くして、個別に指定していく必要があります。

いくら修正にチャレンジしてもできない場合は、こうしたところに問題がある場合がありますのでよくよくチェックする必要があります。

ただし、こうした機能を無効化する場合は、概ねWordPressテーマ自体を大幅にカスタマイズする必要があり、その操作はより高い技術を要しますので、万が一、phpの記述ミスなどで内部サーバーエラーなどが出た場合は、CSSの調整で済まないくらいの高度な修正が必要になるというリスクがあります。

ホームページ制作 京都 ファンフェアファンファーレでは、各種ホームページの修正やエラーの復旧などのサービスも提供しております。静的HTMLホームページやWordPressサイトの修正やカスタマイズでお困りの際はご相談ください。

ホームページのHTML編集方法

ホームページの更新・修正料金 価格表

WordPress(ワードプレス)のカスタマイズ


「ホームページ制作や修正の際に注意すべき記述ミス【初心者編】」のカテゴリ Web制作・Web関連
タグ: , , , , ,


ホームページ制作・カスタマイズ、Webマーケティング・SEOなどのお問い合わせ・ご依頼