LoginSignup
0
1

More than 5 years have passed since last update.

【アウトプット】HTMLとCSSの基礎についての学習

Posted at

【目的】
HTMLとCSSについて知識が皆無に等しいので、理解したことをここにアウトプットすることで理解を深める
【実施内容】
スラスラわかるCSSのデザインのきほんをもとに理解したことをまとめていく
わからないとこのみかな
【いざ実施】

一章:WebとHTML

・画像の表示方法
 imgタグを用いる。
 src属性:画像のパスを記述する。
 →相対パスと絶対パス
 →基本相対パス。相対パスは、現在のフォルダから目的のファイルまでの道のりを記述したもの。
 alt属性:画像の説明を記述する。
 width属性:画像の幅を指定する。
 height属性:画像の縦を指定する。
 -画像フォーマット
  ・jpeg:標準的な画像フォーマット。べた塗りとかの画像には向いていない
  ・gif:容量を抑えるために、使える色彩を限定したもの
  ・png:一番容量を食う。どっちのフォーマットにも対応できる。

二章:CSSの基本

・idセレクタ
 htmlのタグについているid属性(id=hoge)で要素を選択するセレクタ
 cssとしては(#hoge{宣言})の形式で記述
・classセレクタ
 htmlタグについているclass属性(class=hoge)で要素を選択するセレクタ
 cssとしては(.hoge{宣言})の形式で記述
・疑似クラス
 状態に対して装飾を行うこと
 a:hoverセレクタはaタグにマウスが重なっている状態を表せ、その状態の時の装飾を宣言できる
・font-familyプロパティ
 そのページのフォントを定義するもの

三章:ボックスモデル

https://nulab-inc.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/
→要素の領域の編集にあたるkey:marginとpadding
・背景画像の挿入方法
 cssのbackground-imageセレクタに:url(パス情報)で指定した領域に対して背景画像が埋め込める
・ボーダーラインの記述方法
 定義すべき項目:色 太さ 線の形状→solid(実線など)
・テーブルの記述方法
 callapse:テーブルボーダーが一重であること。
 separate:テーブルボーダーが二重で引かれること。
 tr td:first-child:テーブルの最初の要素にマッチする

四章:フロート・ポジションについて

・フロート:ある要素にfloatを設定(ex float:left)すると、その要素は文要素のボックス内でできるだけ左に配置しようとする。つまり横並びの表現が可能
・ポジション:ボックスの位置を座標で指定して配置するための機能。
 absolute:rerativeで定義された親ボックスからの座標位置をしていることでその位置に配置できる。
 →absolute指定で文字が重なるのは、浮かせているから。論理的に他の要素からこの要素が見えなくなているから次の要素が詰められて重なる

0
1
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
0
1