1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

30代からのプログラミング勉強 4日目【HTML/CSS入門編】

Last updated at Posted at 2020-11-28

はじめに…

編集リクエストやご指摘のコメントをいただきありがとうございます。
正直「誰も見ていないっしょ!」というノリで自分用復習メモ兼学習意欲継続の為のルーティンとして始めた事だったので驚きました。

そもそも書き方があまり分かっていないのでお見苦しくなってしまう事も多々あるかとは思いますが、気になる点があればご指導頂けると幸いです。

学習内容

引き続きUdemy講座です。もっと時間が欲しい…

HTML/CSS

領域
<div></div>

タグ自体は意味を持たない。領域を区別(division)するためのタグ…らしい。

クラス
<div class="クラス名"></div>

グローバル属性。上記の様に書く事で区別するためのグループ名をつける事が出来る。

余白の一括指定
div {
  margin: 長さ;
}

上記の様にすると、上下左右の余白を任意の絶対値や相対値で一括指定できる。autoと入力するとウィンドウサイズに合わせて自動で調整される設定になる。

余白の個別指定
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

この様に入力する事で上下左右それぞれ個別に余白を指定する事も可能。

余白のショートハンドプロパティ
div {
  margin: 10px 20px 30px 40px;
  /*
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    と同じ
  */
}

の順でショートハンドプロパティでも書ける。
また、 において同値の場合は後半の記述を省略できる。

余白(内側)
div {
  padding: 長さ;
}

内側の余白が設定出来る。幅の指定の仕方はmarginと共通。

背景色
div {
  background-color: カラーコード;
}

RGB(rgb(0, 0, 0))やHEX(#000000)など指定出来る他、whiteblackなどの色の名前も使える。

枠線
div {
  border: 長さ;
}

線のタイプ、線の色も指定が可能。

所感

少しづつ覚えることが増えてきたがまだまだ初歩の段階なので復習しつつ身に付けよう。
CSSの記述真っ赤だし見やすい書き方を調べようと思います。

追記:taiy様より編集リクエストいただき格段に見やすくなりました。ありがとうございます。自分だけでも見やすく書ける様にならなくては…

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?