プログラミング・コーディングができない?progate卒業後の初心者がしがちなエラー15

プログラミング・コーディングができないと嘆く前に、初心者がしがちなエラー15と解決策をまとめてみました。

progate卒業後に練習でwebサイトを10つ制作したので、その時によく間違えたprogate卒業したばかりの初心者が犯しがちなプログラミング・コーディングの間違えをまとめました。

全てコピペで5分以内で解決するようまとめています。今回はHTML、CSSコーディングやjQueryの内容が中心です。

プログラミング・コーディングができない?progate卒業後の初心者がしがちなエラー15

コンテンツがはみ出る。footerの下に白い余白ができる。

footerの下に白い余白ができる場合の解決策(HTML/CSS)

文字が横にはみ出る、被る。

bodyに 「word-wrap: break-word;」を設定

文字がコンテンツからはみ出てしまったり、隣のコンテンツの文字と被ることを防ぎましょう。

HTML

 

 

 

ブラウザによってデザインが崩れる

リセットCSSを追加する

ChromeやFirefoxなど様々なブラウザで閲覧することで起こるページのデザインが崩れてしまうことを防ぎましょう。

ブラウザはデフォルトのCSSを持っているために、コーディングしたCSSが少なからず影響を受けます。

方法としては、こちらにある自作のリセットCSSをコピペで良いかと思います。

ライブラリを導入する方法もありますが、こちらの方が簡単だと思います。

 

Chromeの検証でレスポンシブが反応しない。

レスポンシブにするためhead内に、「<meta name=”vie・・・」を忘れない

Chromeブラウザを右クリック>検証で、ウェブサイトのコーデディングがどのようにされているか見ることができます。

ブラウザを伸ばしたり縮小してレスポンシブ対応を見ることができても、検証ツールが反応しない場合は以下がhead内に足りないことが原因の可能性があります。

 

指定が反応しない

1.important!を追加し、優先順位を高める

あまり使わない方が良いけどね

ニャンニャン

例えば、font-size:10px;にしても10pxにならない場合があります。

cssにはブラウザに反映される優先順位があり、この場合は優先順位が低い可能性があります。

2.Chrome検証ツールで、Googleが勝手にしている指定を探して消す

Googleが勝手にしている指定がこちらです。

progate卒業

それぞれ以下の意味があります。

  • margin-start(= margin-left)
  • margin-end(= margin-right)
  • margin-before(= margin-top)
  • margin-after(= margin-bottom)

 

下記のように指定して消しましょう。

 

背景の指定が反映されない

1.backgroundとbackground-〇〇の指定の違いを把握して書く

「background」は色々な設定を一気にできます。

ただ、「background-◯◯」というものは、◯◯の設定しかできません。

例えば以下のように「background-image」に、色々な設定をしても、何も反映されません。

 

2.url内にフォルダ内の画像を設定した場合は画像のパスが合っているか確認

例えばindex.htmlとimgフォルダを同じ階層に配置し、imageフォルダ内に画像を配置した場合

・index.html

・imgフォルダ>top-page.png

以下の書き方が正解です。

 

ulで囲んだコンテンツが中心にこない

ulで囲んだコンテンツが中心にこない場合の解決策

 

単語が改行で切れてしまう

CSSで単語の改行しない方法はdisplay:inline-block;かwhite-space:nowrap;

 

aタグのホバーやクリック時の色の変化などの反応を全て消したい

text-decoartion:none;と色の指定を、:link、:visited、:hover、:activeに設定する。

:linkはリンク先未訪問の場合、:activeマウスをクリックし始めてからマウスを離すまでに作用します。

HTML

CSS

 

ページ内リンクが理想と違う場所に遷移する

ページ内リンクの遷移先がずれるのをjQueryで解決【コピペ5分】

 

ページトップボタンが作れない。スクロールしないと表示されないようにしたい

【コピペ3分】ページトップボタンの作成方法。追従して途中からあらわれる設定

 

 

fontawesomeを使わず擬似要素で矢印をつけたい

以下コピペでOKです。

HTML

CSS

 

複数要素を横並びにした時に高さが揃わない

floatで複数要素の高さがずれる場合に揃える方法はdisplay:table;

 

font-sizeを最小値にしても文字サイズが大きくなってしまう

font-sizeが小さくならない、効かない場合の対処法

 

こちらもどうぞ

レスポンシブにならない?初心者がよく間違えがちなミス5選【コピペ5分】