33歳主婦プログラマーを目指す

リストの表示方法について

本日の教材動画はこちら 今日は箇条書きなどによく使われるリストの装飾についてのお勉強です。 リストの表示を変える方法 まずは何もしていない場合のリスト表示を見てみましょう。 ページのソース内容 こちらがソース内容で、表示されるページは下記のようになります。 出来上がったページ 特別何をしたわけでもないので、ulの表示は・、olの表示は1,2,3...となっています。この「・」「123..」の表示部分を変えていく方法を見ていきましょう。 list-style-type で表示を変える 頭の部分を変更するには list-style-type というプロパティを使用します。主に以下の種類があります（…

2020/09/29 16:42

文字の配置について

本日の教材動画はこちら 文字（文章）の配置の仕方について学んでいきます。 text-aling について 文字の配置を指定する場合は「text-aling」というプロパティを使います。値に指定できる種類はいくつかありますが、代表的なのが下記の4つです。 left → 左寄せ right → 右寄せ center → 中央寄せ justify → 両端揃え 注意しなければいけないのは、これらはあくまで「文字配置」の指定方法であり、画像やブロック配置には利用できません。（一部サイトで画像にも利用可の表記を見かけましたが、更新日時が古かったので今回は動画通りに学習します） また、justifyは「ア…

2020/09/28 16:17

文字スタイルの指定について

本日の教材動画はこちら 今回はさらなる文字装飾について勉強していきます。 ＜font-style＞について 主に文字を斜体にしたい時に指定します。指定はの3通り。 normal → 通常（初期値） italic → 斜体 oblique → 斜体 inherit → 親要素の指定を継承 斜体についてですが、italicがなければoblique、obliqueがなければitalic文字を表示。指定フォントにそのどちらもなければ、通常文字をブラウザが斜体にして表示させるようです。 ＜font-variant＞について フォントにsmall-caps（スモールキャップ）指定したい場合に利用。スモール…

2020/09/25 13:57

文字の太さの指定について

本日の教材動画はこちら 前回はフォントの指定方法をやりましたので、今回は文字の太さの指定方法についてです。 文字の太さの指定方法 使うのは「font-weight」というプロパティになります。値となる太さの指定方法には下記の2種類があります。 ◆単語で指定する normal → 通常の太さ bold → 太め border → やや太め lighter → やや細め inherit → 親要素の指定を引き継ぐ ◆数字で指定する 100～900の間で指定ができる。100単位で指定することが多い。 同じ太さの指定になる単語と数字 normalの太さ＝400、boldの太さ＝700 と、指定方法は違…

2020/09/24 22:44

フォントの指定方法について

本日の教材動画はこちら 本日はページ表示時に使われるフォントの指定方法についてです。今回も文字だけの記事になりますが座学ってことで！ フォントの指定方法について フォントは「font-famil:"フォント名";」で指定します。場合によっては""が不要になりますので、詳しく見ていきましょう。 指定するフォント名について フォントには大きく分けて「フォントファミリー名」と「総称フォント名」があります。フォントファミリー名は「メイリオ」や「Arial」など、具体的なフォント名のことです。逆に総称フォント名は「ゴシック体」や「明朝体」などの、フォントが属するカテゴリのことを指します。 総称フォントに…

2020/09/24 13:50

色の指定方法について

本日の教材動画はこちら 今回も前回の「数値の指定方法」に続き、当たり前に使っていた「色の指定方法」について深く勉強していきたいと思います。 色の指定方法にはいくつかある 1. 色名で指定をする方法 redとかgreenとか、色名を記載して指定する方法です。単純な色味ならこれで十分ですが、「特定の色しか指定できない」というデメリットを併せ持ちます。この特定の色はW3Cという団体が決めており、定められた色以外は使用することができません。 2. RGBで指定する方法 恐らくこれが一番一般的な指定方法ですね！RGBでの指定は2通りあります。 【10進数で記載する場合】 rgb（赤の値，緑の値，青の値）…

2020/09/14 16:50

数値ではなく単語による指定方法について

本日の教材動画はこちら 今回は数値ではなく単語を使ったCSSのデザイン指定方法についてみていきます。今まで当たり前に使ってきてましたが、今回は底の部分を不可彫りしていきます。 プロパティに対して決まっているもの プロパティってなんだっけ？って一瞬なりますが、CSSの基本書式（セレクタ・プロパティ・値）を思い出すとわかりやすいです。このプロパティ部分に対して決まっている値（単語）があれば使う事ができます。 align → center（中央） / left（左） / right（右） vertical-align → middle（上端揃え） / top （中央揃え）/ bottom（下端揃え）…

2020/09/10 16:47