4月28日 -positionの理解-
１．今日の目標
positionを理解する
２．結果・感想
「サルワカ」ってサイト、びっくりするほど分かりやすい。「サルでも分かる」の言葉は伊達じゃない。要点がしっかりまとめられている。
３．学んだことの書き出し
positionとは「要素の位置を決める」ためのプロパティ。
positionで出来ること
①要素を指定した分だけ動かす
②要素の上に別の要素を重ねる
③常に画面の同じ位置に要素を固定する
positionに指定する値
static:初期値
上下左右に動かせない。topやleftの効果がない。重なり順を変えられない。z-indexを指定しても０から変わらない。
relative:現在の位置を基準に相対的な位置を決める
absolute:親要素を基準に絶対的な位置を決める
fixed:画面の決まった位置に固定する
位置を指定する流れ
①positionで位置を決める
②top bottom left rightで具体的な位置を数値で調整
font-sizeに対する値の単位
①縦のピクセルの大きさで指定
②現在のフォントサイズに対する倍率
現在の設定が10pxの時に2.0emとすると20pxになる
colorに対する値の書き方
①色名
②カラーコード
http://www5.plala.or.jp/vaio0630/hp/c_code.htm
font-weight(文字の太さ)
bold:太く
lighter:細く
normal:通常
指定しているフォントで細字が用意されていない場合、細くならない
ChromeでCSSが反映されない場合で、キャッシュが原因の場合
F12→ページ再読み込み→キャッシュの消去とハード再読み込み
(F12を押せばデベロッパーツールが開く)
font-style: italicで斜体になる
line-heightで行間を変える
1.5~2にすると読みやすい行間になる
letter-spacingで字間を指定
emでの指定:emは文字の高さに対する比率で字間を指定する
0.1emだと文字の高さの1/10の大きさの字間
指定しない、0.05~0.1emがおすすめらしい
文字に下線を引く方法
text-decoration: underline;(色と太さは変更不可,下線の色=文字色)
border-bottomで指定できる線の種類
dotted(点線)
dashed(破線)
double(二重線)
background:linear-gradient(transparent 50%,yellow 50%);(下半分だけ引く)
%を大きくすると細く、小さくすると太くなり、０にすると全体に引ける
ストライプ線や途中で色の変わる線は疑似要素を使って書ける
https://saruwakakun.com/html-css/reference/border
text-decoration:line-through(取り消し線を引く)
文字を縦書きにする(webkit-writing-mode:vertical-rl:rl; -ms-writing-mode:tb-rl; writing-mode:vertical-r;width:xx; height:xx;)レイアウト崩れを防ぐために縦横も指定する
text-shadow:右への長さ 下への長さ ボケ具合 影の色(文字に影をつける)
おしゃれな見出しのデザイン例まとめ68
https://saruwakakun.com/html-css/reference/h-design
CSSデザインサンプル集
https://saruwakakun.com/html-css/reference/css-sample
wordpressはブログの運営を楽にするためのソフトウェア
wordpressがないと、1記事ごとに新しいHTMLファイルを作り、サーバーにアップロードする手間がある
wordpressには2種類あるが、サルワカで触れられているのは①
①～.org:サーバーに自分でインストール(一般的によく使われている)
②～.com:レンタルブログ
wordpressのメリット
サーバーをレンタルし、wordpressをインストールすればHTMLをいじらなくてもブログの更新が出来る
オシャレなテンプレートが簡単に使える
コードの知識がなくても使えるが、知識があるとより自由にカスタマイズできる
プラグイン:簡単(使いたいプラグインを探し、１クリックでインストールし、有効化するだけ)に、ブログに様々な機能をつけたすことが出来る仕組み
例:目次を自動表示、画像を自動圧縮、人気記事をサイドバーに表示、お問い合わせフォームを設置、自動でバックアップ、掲示板や問い合わせフォーム
記事やカテゴリーごとにデザインを変えられる
ウェブサービスも作れる(PHPやJavaScriptなどの知識が必要)
wordpressのシステムはPHPで構築され、ブログの記事内容や更新情報などはMｙSQLで管理されている
wordpressのカスタマイズで使う言語
HTML,CSS,PHP,JavaScript
４．明日の課題
５．参考URL
CSSのpositionを総まとめ！absoluteやfixedの使い方
https://saruwakakun.com/html-css/basic/relative-absolute-fixed#section5
https://saruwakakun.com/html-css/wordpress/whatis-wp
