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

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

CSS

boxサイズの考え方と指定について

CSS

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

displayとvisibility プロパティについて

CSS

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

margin プロパティについて

CSS

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

padding プロパティについて

CSS

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

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

CSS

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

文字の配置について

CSS

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

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

CSS

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

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

CSS

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

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

CSS

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

色の指定方法について

CSS

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

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

CSS

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

サイズの指定方法について

CSS

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

構造的な擬似要素について

CSS

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

擬似要素について

CSS

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

属性セレクタでCSSを指定する

CSS

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

特殊なセレクタの記述方法について

CSS

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

CSSをまとめて指定する方法

CSS

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

セレクタの種類と書き方について

CSS

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

ブロック要素とインライン要素について

CSS

本日の教材動画はこちら CSSを取り扱う際に大事な要素となる、ブロック要素とインライン要素の違いについて勉強していきます。 <ブロック要素>とは ブロック要素とは、その名の通りブロック単位で扱われる要素のこと。pタグやhタグ、tableタグなどがブロッ…

外部ファイルによるスタイル適応について

CSS

本日の教材動画はこちら 今日はいよいよ最後のスタイル適応方法である、「外部ファイルを読み込んでCSSを適応させる」を勉強していきたいと思います! 外部ファイルからCSSを読み込む方法 CSSファイルを用意し、それをページに読み込ませるにはLinkタグを使…

styleタグによるスタイル適応の仕方

CSS

本日の教材動画はこちら 前回は直接CSSを書き込む方法をみましたが、今回はオーソドックス?なheadにCSSを書いて適応していく方法を勉強。 <styleタグ>によるスタイルの適応方法 styleタグによる適応は、head内にCSSを記載する必要があります。type属性(t…

直接CSSを書き込む方法

CSS

本日の教材動画はこちら CSSについて勉強した際、CSSの書き方は3種類あることがわかりました。今回はその中の1つ目の方法「(style属性を利用して)直接タグの中にCSSを書く方法についてみていきたいと思います。 <style属性>をタグの中に使う 直接CSSを書…

CSSの書き方について

CSS

本日の教材動画はこちら 前回はCSSの概要的なものを確認しましたが、今回はもう少し突っ込んだCSSの書き方についてみていきたいと思います。 <CSSの適用・優先順位>について HTMLは書いた箇所に書いた通り適応されましたが、CSSは基本別ヵ所(headや外部フ…

CSSとは?

CSS

本日の教材動画はこちら ついにCSSのお勉強に突入です。今回はCSSとはなんぞや?という概念的なものからみていきましょう。 <CSSの役割>について HTMLでページの構造(ここに文字、ここで改行して、リンクはこれで...などなど)を決めるために書いていまし…