-副業-

【超・初心者向け】HTML&CSS学習で誰もがつまつぐポイント4選

こんにちわ、まるです。、
最近はプログラミング言語に興味があり、
HTML&CSS、PHP、JavaScript、Ruby、VBAあたりを学んでいます。

まず前提ですが、
学歴がなくてもプログラミングを独学で学ぶ事は可能です。

今後はもちろんの事IT業界が伸びていく時代ですので
ある程度の知識やスキルを持っていて損はありません。

今回はHTML&CSSのを学ぶ超初心者が間違いやすい点を解説していきます。

ウルフくん
ウルフくん
超初心者に向けてるからな!安心して着いてきてくれ!

paddingとmarginの違い

最初の段階では、内側の幅を広げるpadding
外側に幅を広げるmarginの区別がつかない事があると思いますが、
僕の最初の頃の覚え方としては
”外マージンと内パッド”と語呂合わせで覚えていました。

これを覚えておくだけで『あれ?どっちだっけ』
となる事がなくなったので、初心者の方にはオススメです。

因みに、
.container{
margin-top:10px;
margin-light:15px;
margin-bottom:8px;
margin-left:12px;
}
などと書くと時間がかかってしまうため、省略して
.container{
margin:10px 15px 8px 12px;
}
と上右下左の順にてっぺんから時計回りに書く事で簡単に省略ができます。

ウルフくん
ウルフくん
プログラミングはとにかくコードを書きまくって、慣れる事が、大事だぞ!

positionプロパティのrelativeとabsolute

こちらの違いも慣れるまで感覚がつかみにくい要素ではありますが
意外と簡単なのでわかりやすく解説します。
.container{
position:relative;
top:15px;
light:20px;
}
relative要素今現在いる位置から上下左右に◯◯pxずつ移動します。
この場合だと上に15px右に20px containerが移動します。

.container{
position:absolute;
bottom:25px;
light:20px;
}
absolute要素親要素、もしくはウィンドウの左上を基準にして
そこから◯◯pxずつ移動します。
この場合だと、親要素orウィンドウの左上を基準に
下に25px右に20px移動します。

基本、親要素が基準になる事が多いため、
親要素をrelativeで位置決めし、
子要素をabsoluteで配置するとずれにくくなるため
この2つは基本、併用して使用します。

 

displayプロパティの使い方

基本的にタグはinline値block値に分けられています。
そして、2つの値の良いとこ取りをしたinline-block値というのも存在します
display:◯◯;を使う事で、各値に変更する事ができます。

◊ block値 ◊ ◊ inline値 ◊ ◊ inline-block値 ◊
例:p,ul,ol,div,h1~h6タグなど 例:a,img,span,brタグなど 例なし
横にいっぱいに広がり縦に並んで行く 横に並んで行き基本,block値の中に入る 横に並ぶblock値のイメージ
width,heightの指定が可 width,heightの指定
上下のmarginが不可
width,heightの指定が可能
上下左右のmargin,paddingの指定が可 左右のmargin, padding
上下のpaddingが可能
上下左右のpadding,marginの指定が可能
text-align,vertical-alignの指定が不可 text-align,vertical-alignの指定が可能 text-align,vertical-alignの指定が可能

※text-align(横方向へのテキストの位置を変更するプロパティ)
※vertical-align(縦方向へのテキストの位置を変更するプロパティ)

結論、inline-blockが最強です。
主にメニューバーを作る場合や、縦に並んでいるblock値を
横並びにしたい場合に用います。

ウルフくん
ウルフくん
なんとなく理解できていればOKだ!わからなければ完璧に理解する必要はないぞ!

プログラミング独学ツール

無料でプログラミンを独学するにはオススメのサイトが2つあります。
プロゲートドッドインストールです。

僕はドットインストールでとにかく模写をして感覚を掴み
スマホ版のプロゲートで復習をして、
パソコン版のプローゲートで実践
といった流れを繰り返しました。

現在もエンジニアやプログラマーの需要は年々高まっているのに比べ
供給が追いつていない現状です。
プログラミング学習は90%が挫折すると言われているほど
参入障壁が高いスキルですがその分、身につけてしまえば
今後強い武器となります。

挫折する原因の80%がエラーに苦しむという理由があります。

近くに教えてくれる人がいないのが、挫折する原因だったりもします。
俺が受講している迫 祐樹さんの-Skill Hacks- 動画で学ぶWebアプリ開発講座と言った
プログラミング教材は24時間無制限で質問ができるサポート付きのため
挫折する心配がありません。

ぜひある程度基礎を身につけたら、自己投資と思い
受講してみてください、本当にオススメです。

最後まで読んでくれてありがとうございました。

要約リスト

まずは行動!実行!実践!