CSS記述/検証ツールの実践

<概要>

●CSSの記述方法について
●Webページ制作実践
●FTPについて

●復習

●新しく覚えたもの
全称セレクタ「*」:得点は0で最優先されるセレクタであり、すべての要素に適用される。
例)* {box-sizing: border-box;} をCSS記述の最初に入れると、以下記述に影響されず、必ずborder-boxが作用する。

marginは相殺される(=Collapsing Margins)。
垂直マージンを指定した2つのブロックレベル要素が並んだ時に起こり、2つのマージンのうち大きい方(等しい場合はいずれか)が1つのマージンとしてみなされる。
例)「margin-bottom: 10px;」「margin-top: 30px;」を垂直に配置するとマージンは30pxになる。
参考:https://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html

text-align: 行揃えを指定するためのプロパティ。
値は以下。
 left 左寄せにする
 right 右寄せにする
 center 中央寄せにする
 justify 行の両端を揃える

display: flex;:要素を横並びにしたいときに親に使うとflexコンテナに、子がflexアイテムとなり、自由に動かせるようになる。
その下に以下を記載すると、動かし方を指定できる。

  flex-direction … 子要素の並ぶ向き
    row(初期値)… 子要素を左から右に配置
    row-reverse … 子要素を右から左に配置
    column … 子要素を上から下に配置
    column-reverse … 子要素を下から上に配置
  flex-wrap … 子要素の折り返し
    nowrap(初期値)… 子要素を折り返しせず、一行に並べる
    wrap … 子要素を折り返し、複数行に上から下へ並べる
    wrap-reverse … 子要素を折り返し、複数行に下から上へ並べる
  ※flex-flow … flex-direction と flex-wrap をまとめて指定(「: row nowrap;」などと記述)

  justify-content … 水平方向の揃え

    flex-start(初期値)… 行の開始位置から配置。左揃え。
    flex-end … 行末から配置。右揃え。
    center … 中央揃え
    space-between … 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
    space-around … 両端の子要素も含め、均等に間隔をあけて配置

  align-items … 垂直方向の揃え

    stretch(初期値)… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
    flex-start … 親要素の開始位置から配置。上揃え。
    flex-end … 親要素の終点から配置。下揃え。
    center … 中央揃え
    baseline … ベースラインで揃える

  align-content … 複数行にした時の揃え

    stretch(初期値)… 親要素の高さに合わせて広げて配置
    flex-start … 親要素の開始位置から配置。上揃え。
    flex-end … 親要素の終点から配置。下揃え。
    center … 中央揃え
    space-between … 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
    space-around … 上下端にある子要素も含め、均等に間隔をあけて配置
参考:https://www.webcreatorbox.com/blog/css-flexbox-cheat-sheet
※検証ツールで予測変換が出てくるため、覚えなくてOK。

FTP(File Transfer Protocol)について
サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル(通信する際の手順や規約)の一つ。
Webサイトを公開するためには、作成したデータ(HTMLファイルやCSSファイル、画像など)をWebサーバーに転送する必要があるが、FTPソフトを使ってFTPサーバに接続することでファイルを転送することができる。
よく使われるのはWindowsなら「FFFTP」、Macなら「CyberDuck」や「FileZilla」。
一般にソフトでサーバーにFTP接続を行うためには、以下の情報が必要。

サーバー名
接続するサーバーのドメイン名。
「サーバー名/ホスト名/FTP ホスト名」などと呼ばれている。
ユーザー名
接続するサーバーに登録されているユーザー名。
「ユーザー名/アカウント名」などと呼ばれている。
パスワード
接続するサーバーに登録されているユーザーのパスワード。

●本日のまとめページ