チャートが「７．レスポンシブサイトを作ってみよう【英語】」に突入したのでいよいよ下手くそながらもサイトを作り始めるのか？と思ってたのですがそんなことありませんでした。引き続きCSSの勉強が続くみたいなので今日も元気にやっていきましょう。 本日…

前回から大分時間が空いちゃいましたね。年末はあれこれしてると時間が経つのがあっという間ですね！今まで下記のチャートに沿ってHTMLとCSSを勉強してきたわけですが、今日は次のステップである「開発者ツール」についてまとめていきたいと思います。 manab…

さてさて、CSSを勉強し始めて4か月。のろのろながらも教材の全動画を勉強し終えたました。HTMLの時同様遅すぎでは？？？という感が否めませんが、途中でやめずコツコツ続けてるだけいいとしよう！ 今まで勉強してきたことを記事にまとめてきたわけですが、1…

本日の教材動画はこちら 今回はボックスに影（ドロップシャドウ）をつける方法です。色々なものにつけれるようですが、基本的な使い方は同じとのこと。 box-shadow の使い方について ボックスに影をつけるには box-shadow プロパティを使います。6つの値があ…

本日の教材動画はこちら 今回は引き続きボーダー関連について。前回はボーダー線のあれこれでしたが、今回はボーダーの角についてお勉強していきます。 border-radius について ボックスには必ず左上、右上、右下、左下と四隅がありますよね。border-radius…

本日の教材動画はこちら 今回はちょくちょく利用してきたborderについて掘り下げてみていきましょう。今までは黒色の実線を使う事が多かったかと思いますが、borderプロパティでより細かく姿勢ができるようです。 border について そもそもボーダーの範囲っ…

本日の教材動画はこちら 引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。今回は背景のサイズ指定についてと、背景の適応範囲について勉強していきましょう。 background-size で指定できる値について background-sizeは文字通り背景…

本日の教材動画はこちら 前回に引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。動画の後半が死ぬほど説明不足だったため、実践される人は一旦最後まで読んでいただけるとわかりやすいかと思います。 背景の繰り返し設定について 前回…

本日の教材動画はこちら いままで当たり前のように使ってましたが、今回は背景の指定について深く掘り下げて勉強していきます。 背景の指定方法のあれこれ 背景プロパティには色々な指定をかけることができます。下記に代表的なものをいくつか記載しました。…

本日の教材動画はこちら 前回勉強したpositionプロパの関係性が深い、z-indexについて勉強していきます。 z-indexについて z-indexとは、主に奥行きを指定するためのプロパティです。positionプロパでブロックの位置を固定したり、前後の位置関係がありまし…

本日の教材動画はこちら 本日もボックスの配置に関係するpositionについてみていきます。今回も動画を見てもいまいち理解に苦しんでしまったので自分で調べたながら書いてます。もし理解などが間違ってたら是非ご指摘ください...。 position プロパティにつ…

本日の教材動画はこちら 本日はボックスの配置に関係するfloatとclearプロパティについて勉強していきます。clearについては動画をみても正直よく理解できなかったので自分で調べたことを書いてます。よしなに。 float プロパティについて float についてで…

本日の教材動画はこちら 今回はboxサイズの指定について習っていきます。boxというよりはブロック要素ってイメージでもいいのかしらね…？（imgとかにも使えるみたいだから厳密には違うけども） 幅・高さの最小値と最大値の指定の仕方 テキストエリアやdivタ…

本日の教材動画はこちら 今回はdisplayとvisibilityというプロパティを勉強します。あまり聞きなれないのでどんなのかまったく想像がつかない…。 display について display プロパティは、「そのHTML要素をどのように表示するか」を指定する際に利用されるよ…

本日の教材動画はこちら 前回 padiing と margin の違いをかる～～く触れたんですが、普通に次の動画でmarginについてやってました。というわけで今回はmarginの余白についての指定方法です padding 同様4つに分けて指定することができる 指定についてですが…

本日の教材動画はこちら padiing ってなんやねん？って話ですが、どうやら「ボックス（ボーダー）の内側に当たる余白を指定」するプロパティのようです。marginとどう違うの？？って話は最後に調べるとして、ひとまずpaddingの使い方をみていきましょう。 pa…

本日の教材動画はこちら 今日は箇条書きなどによく使われるリストの装飾についてのお勉強です。 リストの表示を変える方法 まずは何もしていない場合のリスト表示を見てみましょう。 ページのソース内容 こちらがソース内容で、表示されるページは下記のよう…

本日の教材動画はこちら 文字（文章）の配置の仕方について学んでいきます。 text-aling について 文字の配置を指定する場合は「text-aling」というプロパティを使います。値に指定できる種類はいくつかありますが、代表的なのが下記の4つです。 left → 左寄…

本日の教材動画はこちら 今回はさらなる文字装飾について勉強していきます。 ＜font-style＞について 主に文字を斜体にしたい時に指定します。指定はの3通り。 normal → 通常（初期値） italic → 斜体 oblique → 斜体 inherit → 親要素の指定を継承 斜体につ…

本日の教材動画はこちら 前回はフォントの指定方法をやりましたので、今回は文字の太さの指定方法についてです。 文字の太さの指定方法 使うのは「font-weight」というプロパティになります。値となる太さの指定方法には下記の2種類があります。 ◆単語で指定…

本日の教材動画はこちら 本日はページ表示時に使われるフォントの指定方法についてです。今回も文字だけの記事になりますが座学ってことで！ フォントの指定方法について フォントは「font-famil:"フォント名";」で指定します。場合によっては""が不要になり…

本日の教材動画はこちら 今回も前回の「数値の指定方法」に続き、当たり前に使っていた「色の指定方法」について深く勉強していきたいと思います。 色の指定方法にはいくつかある 1. 色名で指定をする方法 redとかgreenとか、色名を記載して指定する方法です…

本日の教材動画はこちら 今回は数値ではなく単語を使ったCSSのデザイン指定方法についてみていきます。今まで当たり前に使ってきてましたが、今回は底の部分を不可彫りしていきます。 プロパティに対して決まっているもの プロパティってなんだっけ？って一…

本日の教材動画はこちら 今までなんとなく使っていたサイズの指定方法ついて詳しく勉強していきたいと思います。 ＜絶対的なサイズ＞について 絶対的なサイズとは、名前の通り誰がどの端末でみても同じ大きさをたたき出してくれるサイズの指定方法です。種類…

本日の教材動画はこちら 今回は子要素にかかる動的判別によるセレクタについて勉強しました。これは文字では伝わりづらいため、一先ず概要を書いてから画像でみていきたいと思います。 最初の子要素 最初の子要素に何か指定をかけたい場合、「:firs-child｛…

本日の教材動画はこちら 擬似要素とは、動的に発生する事象を要素としてセレクタに使うためのものらしい。例えばまだ訪問していないリンクや訪問済みのリンク、マウスポインタが乗っている、フォーカス（選択）されているなど、見る側が何かしらアクションを…

本日の教材動画はこちら HTMLには「属性」が指定されているものがある。と言っていたが、どれが指定されてるのかよくわからないし今まで当然のようにでてきてた属性ってそもそもなんだってばよ？となって調べてみた。 属性とは、どうやら「要素の何かしらの…

本日の教材動画はこちら 前回他にも色々細かくまとめられるらしいけど難しくてよくわからん！って言ってたら、今回少し触れることができた。というわけで今回は特殊なセレクタの設定方法をみていきます。 ＜親要素＞と＜子要素＞について理解する セレクタを…

本日の教材動画はこちら まとめて指定→同じ設定にしたいということ。同じ設定をするためだけに、何行も同じこと書くのは無駄だよね？ならまとめて書いちゃおう！という考え方です。CSSをまとめて指定する方法は下記の2つがあります。 CSSファイルでまとめる …

本日の教材動画はこちら CSSを指定するのに必須なセレクタは、大きく分けて3種類あります。今回はそれぞれの特徴と書き方を見ていきましょう。 1. タイプセレクタ HTMLタグのこと。HTMLが記載してあれば、適応させるために新しく一文を書き加える必要などは…