半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録5日目

更新日:

こんばんは、こずえです。
プログラミング学習記録5日目です。
前回に引き続き「はじめてのCSS入門講座」を進めました。

所感:今日は学習とブログ合わせて就寝時間に間に合うように調整できてよかった!(∩´∀`)∩

記録0日目に書いた目標を「プログラミングで月収5万円」から「2019年中にプログラミングで月収5万円」に変更しました!
今年中に達成したいなとぼんやり考え続けていたので明記…!(`・ω・´)ノ

合計学習時間

前回までの時間:6.00[h]
今回の時間:1.50[h]
合計時間:7.50[h]

学習内容

はじめてのCSS入門講座

メモ

文字のスタイルの指定

font-style
  • normal:通常
  • italic:斜体
  • oblique:斜体

italicとobliqueの違いが気になったので検索して以下のサイトに目を通しました。

斜体とイタリック体は違うのか

欧文フォントの中には、「イタリック体」と「斜体」用にそれぞれ専用にデザインされたフォントが用意されているものがあるようです。イタリック体は筆記体っぽくデザインされたもので、斜体は単純に斜めに倒しただけのような形です。

font-variant
  • normal:通常
  • small-caps:全ての文字を大文字書体で表記(文字のサイズはそのまま)
  • inherit:親要素の指定を継承
font

プロパティの記述には順番が存在する。
font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> font-family

行間の指定

line-height

数値で指定する。

  • px
  • em
  • ex
  • %
  • 単位指定無し

ここでの行間は行を中心とした上下。
以下のサイトの説明が参考になりました。

行間の参考資料

文字の配置

text-align
  • left:左寄せ
  • right:右寄せ
  • center:中央寄せ
  • justify:両端揃え(英文字の文章について指定できる
    ※1 )

あくまでも文字の配置についてのみ使用可能。
画像やブロックの配置には使用不可。

※1:軽く検索した所使える?ような印象を受けましたが、よく調べていないので書き留めておく程度にしておきます。

リストの表示方法

list-style-type

ulで指定が可能なもの

  • disc:円形(中黒や中点と呼ばれるももの)
  • circle:中空円(白丸)
  • square:四角(塗りつぶされたもの)

olで指定が可能なもの(抜粋)

  • decimal:数値
  • decimal-leading-zero:数値(ゼロ埋め)
  • lower-roman:ローマ数字(小文字)
  • lower-alpha:アルファベット(小文字)

lower⇔upper:小文字⇔大文字

list-style-position
  • none:表示しない
  • inside:ブロックの内側
    →頭をそろえたい時に便利。
  • outside:ブロックの外側
  • inherit:親要素の指定を継承

paddingプロパティ

余白の一種でボックス(ボーダー)の内側に当たる部分。

4つに分けて記述することが可能

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

一括で指定することも可能

  • 2つの場合…上or下 左or右
  • 3つの場合…上 左or右 下
  • 4つの場合…時計回り(上右下左)

marginプロパティ

ボックス(ボーダー)の外側の余白

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

理解に役立つツール

padding、border、marginを視覚的に確認

pading、border、marginの確認はブラウザのデベロッパーツールを利用することで視覚的に確認ができます。

pading, border, marginの確認

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.