30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS中級編終了【30DAYSトライアル DAY3~DAY4】

30DAYSトライアル

当たり前のように見て使っているいっこいっこの動作が裏では色んなコード1行1行の宣言で成り立ってるんだなーと思うと感動だし、面白い。
そういえば大学の頃C言語とかLinuxとかJavaとかいろいろやったけど、一番楽しかったのがHTMLのWebサイト作成だったんだよなぁ。
自分の書いたコードがサイトに反映されていくのすごく楽しかったし、新卒後入社した会社で転職先探しているときにWebデザインを学んでそっちに転職しようかなーって思っていたのはここだけの話。

学んだこと

中央寄せ~marginとtext-align

margin

  • ブロック要素の場合はmarginを指定
  • width指定必須
  • 上下のmarginにautoを指定することはできない

例)
width : 300px;
margin : 0 auto;

text-align

テキストやボタンのようなインライン(ブロック)要素を指定例)
text-align: center(left・light)

要素を透明~opacity~

opacity:0.5;

文字の間隔を指定~letter-spacing~

letter-spacing : 5px;

アニメーションをつける~transition~

  • 変化の対象にはcolorなどのプロパティを指定
  • 変化の対象をallにするとすべてのプロパティに適用
  • hoverと併用することが多い

transition : all 0.5s;

背景色を透明~rgba~

  • 4つの値をコンマ(,)区切り
  • 4つ目の値が透明にする度合いで、0 ~1の数値で指定(値が小さいほど透明になる)
  • opacityプロパティは要素全体を透明に。rgbaはその色だけを透明

行の高さを指定~line-height~

要素の高さとline-heightプロパティを同じ値にすると、文字が中央に配置される。

header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);

.header-right a {
line-height : 65px;

文字の太さを指定~font-weight~

  • <h1>~<h6>の要素は初期状態でfont-weight: bold;が指定
  • font-weight: normal;と指定すれば文字が細くなる

要素同士を重ねる~position(absoluteとrelative)~

  • absoluteはサイト全体(親要素)を基準とする。左上部
  • relativeは要素の左上部が基準

.lesson-icon p {
position : absolute;

.lesson-icon {
position : relative;

ボックスに影をつける~box-shadow~

box-shadow : 水平px 垂直px 色指定;

要素がクリックされている間だけCSSを適用~active~

.message :active {

要素を指定位置に固定~fixed~

position: fixed;

疑問に思ったこと

containerクラスを作成する意味

基本的に
<div class="container"></div>
の中にいろんな要素を書いていくのかな?
例えば

<footer>
<div class="container">要素</div>
</footer>

ってあったら、

<footer>
要素
</footer>

みたいに、container書かずにいろんなタグ要素書いていくのはナシ?
調べたらBootstrapなるものが出てきてじゃあBootstrapじゃなかったら別に書かなくてもいいの?
てかBootstrapってなに?
ってどんどん本筋とずれていって深みにハマりそうだったのでとりあえずメモとして残しておく。

Progate公式様も「containerクラスを作る意味は今は理解しなくて大丈夫です。後に便利になるので、作っておきましょう。」
と仰っていたので「後に便利になる定型文」として今はとどめておこうと思います。
CSSとかで便利になるのかな?

クラス名の指定について

例えばhtmlが、

<div class="btn blue"></div>
<div class="btn red"></div>

ってあって、この時のCSSの設定で

.btn {
/*共通のCSS*/

.blue {
color : blue;

ってなってて「btn blue」は「btn_」の部分が省略されてたけど、共通部分は省略OKなの?

と思っていたけどレッスン進めていって<span class="fa fa-facebook">書いててハッとした!
「fa」というクラス。「fa-facebook」というクラスで2つ宣言していてそれぞれ別なんだね!??
これだと「fa」クラスの中の「fa-facebook」クラス?ってこと??
とりあえず2つ宣言してるんだなー。ってことはわかった。

気づいたこと

paddingとmarginの値の指定

上下左右の値を指定するとき

上下200px 左右100px

padding 200px 100px

だけど、上200px下100pxで上下で値が違う時の指定っていっつも

padding-top : 180px;
padding-bottom : 100px;

って書いててめんどいなー、簡単に書く方法ないかなーって思ってたんだけど、今回何気なく公式の解答を見て「なるほど!」ってなった。
0指定すればいいだけやん。。

padding: 180px 0 100px 0;

よくミスっているところ

  • <div>タグの外に要素を書く(何回ミスれば気が済むのおぉぉおおぉ)
  • フッターはクラスじゃないから「.」はいらない。って書いてるのに付ける(説明ちゃんと読まない)
  • コロン入れるの忘れるー 例).message :active {

面白かったこと

  • 今回ボタンのカスタマイズいろいろやったけど、使うとそれっぽくってカッコイイ(安直)
  • ヘッダーを固定させて常に上に表示にくるようにさせる。Webサイトで当たり前に見ていたけど、こういうのも細かい設定でできてるんですね
  • Font Awesome(初めて知った)

困っていること

paddingとmargin

いまだにこういう時にpadding、こういう時にmarginという使い分けの区別がつかない
.message {
padding: 15px 40px;

padding

.message {
margin: 15px 40px;

margin

でもこのボタンがなんかわかりやすかった。
区切りがあるから。
paddingはボタンの面積の範囲が広くなってる。
marginは文章の方に向かってぎゅって詰めてる(ボタンの外の余白が広がっている)。
余白を宣言するものなんだけど「余白」と考えるから混乱するのかな。
これは余白というよりボタンの大きさを決めてる感じだよね。

これはボタンだからわかりやすいけど、文章だけの時はやっぱりわかりづらいよね。。。

どこにボーダー??

.message-wrapper {
border-bottom : 1px solid #eee;

一応画面が動くのて適用されているっぽいけど何がどう変わったのかわからない。
一体どこにボーダーを???

今日やること

上級編を1つでも進める。

-30DAYSトライアル, お勉強
-,

© 2021 文系女子とプログラミング