【楽しいHTMLとCSS】初めてのホームページ作製

どうも、どせぜんです。最近昼夜逆転状態になって、迷惑をかけてしまう事が多いと感じているので、そろそろ直さないとと本気で考え出しました。
とりあえず今日はちょっと昼寝して夜にもちゃんと寝ることにします。


そんなこんなでSkill Hacks 3日目。今日もやってきました。
三日坊主という言葉もある通り、明日も継続してできるかどうかは重要なので、いかに4日目にうまく繋げるかも意識して取り組みました。

けど今めちゃくちゃモチベ高いからきっとできる。いこうか。

HTMLとCSSでホームページ作製



今日は1日目、2日目にやったHTMLとCSSを利用して自分のホームページを作製しました。

1日目に学んだこと、2日目に学んだ事がどんどん現れ、最近のワンピースみたいに伏線回収されてく感じありました。ガチで。

もちろん新しい知識も得ました。

例えば、marginとpaddingについて、marginやpaddingで指定する余白によって、そのコンテンツをいい感じに上下または左右中央に持ってきたい場合は「auto」が使える事です。

○{
width:100%
margin: 0px auto 0px auto;
}

とすれば、○のコンテンツをページ幅の中央に持ってくる事ができるんですね。すごい。

また、文字に影をつける方法も学びました。

○{
text-shadow: 10px 10px 0px blue;
}

と入力すれば、

text_shadow

というようになります。text-shadowに入力する数字は左から順に、(下)(右)(ぼかし半径)(色)です。こんな手軽に自由自在の影つけれちゃう。

あとは、コンテンツの丸め(画像とかテキストボックスの角をとる)は

border-radius: 10% ; (50%にすると丸になる)
border-radius: 10px(左上) 10px(右上) 0px(右下) 0px(左下) ;

などでできます。

さらに、別々のコンテンツ(画像とかテキストボックス)の幅を揃えたい時とかに、width、margin、paddingのそれぞれの意味を理解している必要があるなあと感じました。例えば、同じwidthを指定してmarginで左右をauto指定して揃えたものと、margin左右をauto指定して揃えたものにさらにpaddingを当てた場合は、paddingの左右幅分大きくなってしまいます。

margin_padding

 

これはなぜ起こるのかというと、widthはあくまでコンテンツサイズ(テキストボックスとか画像とかのサイズ)を指定しているだけで、marginやpaddingは境界線の外側、内側の余白を決めているからです。

 

つまり、

margin_padding2

こんな状態だと思います。緑の矢印がpaddingで指定した左右の幅に対応しています。
これを解決するために、widthの値からpaddingで指定した左右幅を引いてあげるときれいに揃いますね。

また、marginとpadding は 1つだけ値を入れると、上下左右の全てにその値が適用されることになります。

○{
margin: 10px;
}

とすると、上下左右に10 pxの余白ができるということです。

さらに、marginとpaddingはマイナスの値も取れる(めり込ませられる)ことや、値が上下と左右同じにするなら、

○{
margin:10px auto ;
}

というようにすれば、上下は10 px間隔を開けて、左右はautoで中央にセッティングする事ができます。

 

作製したホームページ


以上のような知識から、作製した僕のうんこみたいなホームページがこちらになります。

スクリーンショット 2020-04-10 5.47.43

違うんです。迫さんはすごいんです。僕がうんこなんです。
しかし、一応形にする事はできました。感無量です。

という事で3日間でHTMLとCSSを完了し、自分のホームページを作製する事ができました。

ちょっとWordPressのブログの開設の仕方とか調べ調べやっていって、シェアできたらなとか思っています。


そして明日はBootstrapについてです。正直全然知らない。

皆さんもコロナで大変ですが頑張りましょう!!!


それでは、また。


〜Skill Hacksが気になった方〜
-Skill Hacks- 動画で学ぶWebアプリ開発講座


〜迫さんは他にも色々やられてるみたいです〜

-Design Hacks- 今日から使える実践デザイン講座

-FrontHacks- フロントエンドプログラミング

-PHP Hacks- PHPプログラミング学習講座

-DietHacks- 現役パーソナルトレーナーのオンラインダイエット講座

-Instagram Hacks- 現役法人コンサルが教えるインスタ運用術

-Blog Hacks- 完全サポート付きブログ講座

-Movie Hacks- YouTubeに特化した動画編集講座

コメントを残す

メールアドレスが公開されることはありません。