フリーランスが会社員収入を継続して得られないパターン7つ

progate卒業したばかりのプログラミング初心者がしがちな間違えまとめ

progate卒業後、ランディングページ(LP)を10つ制作してみました。ここで学んだ、progate卒業したばかりの初心者が犯しがちなコーディングの間違えをまとめました。

 

 

目次

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

1.高さ(height)の指定を避ける

コンテンツの中身が要素が増減したりtextを入れる場合は、heightの指定を避けましょう。

文字サイズが変化した場合や中身の要素の増減により、表示がおかしくなる可能性があります。

height:auto;にして上下のコンテンツ同士が被らないように、marginやpaddingを上下に設定しましょう。

2.footerの下に白い余白ができる場合は、加えてhtmlとbodyのheightを100%にする

htmlが bodyよりも大きい可能性があるので、両方のheightを100%にすると直ることもあります。

HTML

CSS

 

 

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

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

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

HTML

 

3.右に余白ができる。

1.overflow:hideen;を各section内のinnerに設定

bodyより中のdivタグに設定しましょう。
例えば下記のように各コンテンツのinnerタグ内に設定しましょう。

HTML

CSS

2.overflow:hideen;とwidth:100%;をbody直下のinnerに設定

HTML

CSS

 

3.<div>の数が合っているか確かめる

たとえばdivの閉じタグが多すぎな場合、右に余白ができます。

HTML

 

4.sectionやheaderに設定しているpaddingを外す

paddingを設定したい場合は、headerやsectionに設定するのではなく、中にcontainerなどを設置してそこに設定ましょう。

HTML

 

変更前CSS

 

変更後CSS

 

 

 

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

1.リセットCSSを追加する

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

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

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

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

 

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

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

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

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

 

6.指定が反応しない

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)

 

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

 

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

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

例えば以下のように書くと、何も反映されません。

 

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

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

・index.html

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

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

 

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

1.text-align:center;やmargin:0 auto;の使い方を誤っていないか確認する

spanタグやaタグ、imgタグにはtext-align:center;を指定する

ポイントはこれらのタグの親タグに指定すること

HTML

CSS

 p、div、ul、h1〜h6などのタグにはmargin:0 auto;を指定する

こちらにわかりやすくまとめられています。

2.ulを囲んでいるタグが偏っていないか確認する

青くハイライトされた部分がul、会社概要などがliの場合、それを囲っているheader-listが偏っていないか確認しましょう。

これにmargin-rightやpadding-rightなどに数字がついていたらこれが原因です。

progate卒業

3.ulとliをfloatで横に並べて、ulを右に50%、liを50%左に移動させる。

上記1,2や、「6.指定が反映されない」問題を解決しても、コンテンツが中央にこない場合、この方法を使いましょう。

汎用的に使えるのは以下のコードです。

こちらの「positionを使う」という解決策にも解説があるので、ご覧ください。

 

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

解決策

1.改行させたくない単語をspanで囲み、display:inline-block;を指定する

幅が狭すぎてどうしても改行せざるを得ないときは、改行してしまいます。ただこれによ、予期せぬ横スクロールが発生するのを防げます。

HTML

CSS

 

2.改行させたくない単語をspanで囲み、white-space:nowrap;を指定する

幅が狭すぎてどうしても改行せざるを得ないときも改行されません。ただし横スクロールが発生してしまうという弊害があります。

CSS

 

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

解決策

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

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

HTML

CSS

 

11.selectタグに矢印をつけたい

以下コピペでOKです。

HTML

CSS