訓練日誌-2024/1/29（CSS・サーバーについて）
目次
- CSS
- サーバーFFFTPの設定
CSS
- position
本来は左詰めで文字が書かれていくが、このpositionを使うと自由な場所に動かせる
スクロールしてもなくならないように固定することも出来る
入力例）
position: 配置方法;
top: 上からの位置;
bottom: 下からの位置;
left: 左からの位置;
right: 右からの位置;
positionの種類
static：初期値
relative：ほかの要素を被っても動かせる 上にくる 他の要素は動かない 動かしたいものだけ動かせる
absolute：ほかの要素も行が上がったり動いてしまう
fixed：固定できる
sticky： - z-index
上記のpositionとしか一緒に使わない positionがないとなんの意味もない
レイヤーみたいな要素がある 被っている要素があった時、どの要素を前に置くかきめるもの
数字を大きくすれば一番前にくる
入力例）
position: relative;
top: 0;
z-index: 2; - border-style
線を書く要素
border-styleの種類
none（初期値）：ボーダーは、表示されず太さも 0 になります。他のボーダーと重なる場合は、他の値が優先されます。
hidden：ボーダーは、表示されず太さも 0 になります。他のボーダーと重なる場合は、hidden の値が優先されます。
solid：ボーダーを 1 本線で表示します。doubleボーダーを 2 本線で表示します。
dashed：ボーダーを破線で表示します。dottedボーダーを点線で表示します。
（ボーダーのスタイル）は、複数指定でき指定した個数により対象位置が異なります。
1 つ指定「上下左右」のすべての指定になります。
2 つ指定「上下」と「左右」の順で指定します。
3 つ指定「上」と「左右」と「下」の順で指定します。
4 つ指定「上」と「右」と「下」と「左」の順で指定します。 - border-color
線の色を変える要素
ボーダーの色に transparent を指定すると透明になります。
ボーダーのスタイルは、複数指定でき指定した個数により対象位置が異なります。
1 つ指定「上下左右」のすべての指定になります。
2 つ指定「上下」と「左右」の順で指定します。
3 つ指定「上」と「左右」と「下」の順で指定します。
4 つ指定「上」と「右」と「下」と「左」の順で指定します。
※３と４の線と色は一緒にまとめて指定できる
入力例）border: 1px #000 solid; （白黒の細い一本線）
border: 4px #000 double; （白黒の太い二重線）
border: 4px #f00 dashed; （赤の太い点線）
参考URL:https://html-css.hamaya2020.com/lesson-4.html
- border-radius
丸を作る
入力例）border-radius:50%50%50%70%/50%50%70%60%;
ふにゃふにゃの円書きたい時このサイトを使うといい：https://9elements.github.io/fancy-border-radius/
詳細：https://www.webcreatorbox.com/tech/border-radius
https://html-css.hamaya2020.com/lesson-4.html#L4-6-1 - box-shadow
四角に影をつける
入力例）box-shadow: 10px 10px; （右下に影ができる） マイナスを入れると左側や上に行く
box-shadow: 0px 0px 10px 10px #0f0; （外側全体に緑の光彩みたいな影ができる）
box-shadow: 0px 0px 10px 10px #00f inset; （内側全体に青の光彩みたいな影が出来る） - box-sizing
ボックスサイズを指定する width プロパティ、height プロパティの算出方法を指定します。
種類
border-box：width プロパティ、height プロパティの指定値にパディングとボーダーの幅と高さを含める。
詳細：https://html-css.hamaya2020.com/lesson-4.html - content ・ before/after
この２つはセットで使用する
入力例）
.pelement3 p::before {
content: “◆”;
padding-right: 5px;
color: skyblue;
}
詳細：https://html-css.hamaya2020.com/lesson-6.html#L6-5-3 - object-fit
img タグや video タグのコンテンツのはめ込み方法を指定します。
種類
contain：形は保ったまま、要素内に収まるようにする。 （正方形の要素内に長方形の画像入れたら左右が余る）
コンテンツのアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小してはめ込みます。
cover：要素内にいきわたるように拡大縮小及び切り捨てて当て込む。（正方形の要素内に長方形のが画像入れたら拡大されて上下が切れる）
コンテンツのアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。
オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトの方が合うように切り取られます。
fill：画像が縦長になったりするのであまり使わない。
要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。
オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトが合うように拡大縮小されます。（初期値）
none：コンテンツは、拡大縮小されません。
scale-down：コンテンツは、none または contain が指定されたかのようにサイズが決められ、オブジェクトの実際のサイズが小さい方を採用します。
詳細：https://html-css.hamaya2020.com/lesson-4.html#L4-6-5 - object-position
iframe タグ、img タグ、video タグのコンテンツの配置位置を指定します。
配置位置は、以下の値で指定します。初期値は、「50% 50%」で、指定は、片方を省略することも可能です。
順番はｘ→ｙの順
入力例）object-position: 50% 50%; （真ん中に配置）
object-position: right; （画像が右に寄る）
object-position: bottom; （画像が下に寄る）
object-position: right 80% bottom 20%; （画像が左下に寄る）
詳細：https://html-css.hamaya2020.com/lesson-4.html#L4-6-6
サーバーFFFTPの設定
会社ごとにサーバーを何個も持っているのは現実的ではない
FFFTP 無料 Windowsしかない
Macは「ファイルジラ」が良い
・ホスト名
日本語可能 入力例）A会社のサーバー など
シンクラウドがいい
バックアップ・お引越し手順
サーバーにwordpressをダウンロードする
WordPressのプラグイン「All-in-one-wp」選択→エクスポート→エクスポート先→ファイル→ダウンロードが終了したらUSBかどこかに保存
こまめにバックアップとっておくこと！
手順
接続する→左側のを右側にコピーする
