人気ブログランキング | 話題のタグを見る

授業12回目 CSS⑷ 2018.1.15(mon)

◼︎backgroundプロパティについて

background-color:キーワード
要素の背景色を指定する
キーワード:transparent/#rrggbb/#rgb/カラーネーム/rgb(r,g,b)/rgb(r%,g%,b%)/rgba(r,g,b,a)

background-image : url(画像ファイルへのパス)
要素の背景画像を指定する
キーワード:none/画像ファイルのURL

background-repeat : キーワード
背景画像の繰り返しパターンを指定する
キーワード:repeat/repeat-x/repeat-y/no-repeat

background-attachment : キーワード
背景画像のスクロールを指定する
キーワード:fixed/scroll

background-position : 左右方向、上下方向の順に半角スペースで区切る
背景画像の表示位置(表示開始位置)を指定する
キーワード:left/right/center/top/bottom
数値・単位:px/%/em/vwなど
*デフォルトでは左上を基準にして画像が配置される。
*値を横位置、縦位置の順に半角スペースで区切って記述する。

background
背景に関する指定をまとめて行う
*指定順序は問われない。
ex.
body {
background-color : #ff0000 ;
background-image : url(img/pink.png) ;
background-repeat : no-repeat ;
background-attachment : fixed ;
background-position : right bottom ;
}

body {
background : #ff0000 url(img/pink.png) no-repeat fixed right bottom ;
}



♣︎参考にした本・サイト♣︎

CSS Lecture
CSS backgroundプロパティについてのまとめ
http://www.css-lecture.com/log/css-beginner/041.html


HTMLクイックリファレンス
background

background-position


『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著) 技術評論社


# by zooori | 2018-01-16 22:53 | 授業まとめ(CSS編)

授業11回目 CSS⑶ 2018.1.13(sat)

◼︎子孫セレクタ

上位の要素:親要素
親要素の中にある要素:子要素

ex. 親要素が<header>、子要素が<p>の場合
<header>
<p>こんにちは</p>
</header>

特定の親要素に含まれる子要素だけを指定したい場合は、親と子のセレクタの間に半角スペースを入れて記述する。
このようなセレクタの指定方法を子孫セレクタという。

ex. header要素の中にあるp要素だけを指定する場合
header p {
color : blue;
}





◼︎セレクタの種類

①タイプセレクタ
指定された要素をセレクタとする
<h1>こんにちは</h1>
h1{ color : #00ff00 ; }

②idセレクタ
id属性で名前をつけた要素をセレクタとする
<h1 id="green">こんにちは</h1>
h1#green{ color : #00ff00 ; }

③classセレクタ
class属性で名前をつけた要素をセレクタとする
<h1 class="green">こんにちは</h1>
h1.green{ color : #00ff00 ; }





◼︎セレクタの組み合わせ

①シンプルセレクタ
要素のみ/idのみ/classのみなど単一セレクタ指定
h1{ color : #ff0000 ; }
#green{ color : #00ff00 ; }
.blue{ color : #0000ff ; }

②グループセレクタ
複数のセレクタをカンマでつないで一括指定する
h1,h2,h3{ color : #ff0000 ; }
#green,#blue{ color : #00ff00 ; }
.green,#green.blue{ color : #0000ff ; }

③子孫セレクタ
要素の親子関係を利用して親要素→子要素→孫要素と絞り込んで選択する
<div id="green">
<ul>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

#green ul li {color : #ff0000 ; }

中間要素(ul)は省略可能
#green li {color : #ff0000 ; }





◼︎属性セレクタ

与えられた属性や属性値の有無を使って要素を選択する。

①要素名[属性名]
特定の属性を持つ指定要素
a[target]{ color : green ; }

②要素名[属性名=”属性値”]
特定の属性値を持つ指定要素
a[target="_blank"]{ color : green ; }

③要素名[属性名~="属性値"]
属性値候補と一致した要素
p[class~="sample"]{ color : green ; }





◼︎構造擬似クラス 要素:nth-child(n)

構造擬似クラスとは、シンプルセレクタや子孫セレクタなどでは表現できないものを選択できるようにする擬似クラス。

要素 : nth-child(n)
最初からn番目の子である要素に適用
nth-child(2n)と指定すると2の倍数の要素に適用される。
ブロックレイアウトなどに使える。

ex. 2番目のli要素にだけ背景色を設定する
ul li : nth-child(2){
background : #0000ff ;
}





◼︎セレクタの優先順位(詳細度の順番)

セレクタには優先順位がある。
以下のように設定された点数を加算して、高得点のものが適用される。

タグのstyle属性 1000点
id        100点
class       10点
擬似クラス    10点
要素名      1点
擬似要素     1点
全称セレクタ   0点

ex.
style=" "     1000(style属性)        1000点
#wrap      100(id属性)            100点
h2.label  1(要素名)+10(class属性)      11点 
h1#wrap  1(要素名)+100(id属性)      101点
li:nth-child(3) 1(要素名)+1(擬似クラス)     11点

!important
詳細度に関係なく!importantをつけたスタイルが最優先される。
後に他のスタイルを記述しても上書きされない。
あくまで奥の手であり、あまり使わない方が良い。

ex.
h1{ color : #00ff00 !important ; }
h1{ color : #0000ff ; }→適用されない





◼︎セレクタ

background-image : url(画像ファイルへのパス)
要素の背景画像を指定する
キーワード:none/画像ファイルのURL

background-repeat:キーワード
背景画像の繰り返しパターンを指定する
キーワード:repeat/repeat-x(横方向へ繰り返す)/repeat-y(縦方向へ繰り返す)/no-repeat(繰り返さない)





♣︎参考にしたサイト・本♣︎

MDN web docs 属性セレクタ

HTMLクイックリファレンス セレクタの種類

LIG

Quite CSSセレクタの優先順位の計算方法

ぶぶりんブログ [CSS]CSSの詳細度による「適用順(優先順位)」と「上書き」


『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著)技術評論社

# by zooori | 2018-01-15 00:23 | 授業まとめ(CSS編)

授業10回目 CSS⑵ 2018.1.9(tue)

◼︎擬似クラス

要素が「どういった状態にあるのか」を指定するためのもの。
同じa要素でも条件によって別々のCSSを適用できる。

a:hover  カーソルが乗っている要素にスタイルを適用する
a:visited 訪問済みのリンクにスタイルを適用する
a:link  未訪問のリンクのリンクにスタイルを適用する
a:active  クリック中の要素にスタイルを適用する

*:hoverの後に:activeを書く。
逆の順番だと、:activeが反映されない。

*同じセレクタを書いた時は、後ろに書かれたセレクタが優先され、上書きされる。
(反映されるのは後に書かれたもの)




◼︎CSSプロパティ

①background-color:キーワード
要素の背景色を指定する
キーワード:transparent/#rrggbb/#rgb/カラーネーム/rgb(r,g,b)/rgb(r%,g%,b%)/rgba(r,g,b,a)


②text-align:キーワード
テキストや画像などの水平方向の揃え方を指定する
キーワード:left/right/center/justify


③font-size:キーワードor数値と単位
文字のサイズを指定する
キーワード:xx-small/x-small/small/medium/large/x-large/xx-large/lager/smaller
数値・単位:px/%/em/vwなど


④border:3つの各プロパティの値を半角スペースで区切る
border width/style/colorの3つのプロパティをまとめて指定する

・border width:キーワードor数値と単位
ボックスの境界線のを指定する
キーワード:thin/medium/thick
数値・単位:px/%/em/vwなど

・border style:キーワード
ボックスの境界線のスタイルを指定する
キーワード:none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset

・border color:キーワード
ボックスの境界線のを指定する
キーワード:#rrggbb/#rgb/カラーネーム/rgb(r,g,b)/rgba(r,g,b,a)/rgb(r%,g%,b%)

border-top/border-right/border-bottom/border-leftを省略して1つにしたものが、border

border-leftはボックスの左の境界線についてborder-width/style/colorの3つのプロパティをまとめて指定する。
ex.
h2{ border-left:10px solid #00ff00; }


⑤padding:数値と単位
ボックスの内側の余白を指定する
数値・単位:px/%/em/vwなど

padding-top:数値と単位
ボックス内側の上部の余白を指定する
padding-right:数値と単位
ボックス内側の右側の余白を指定する
padding-bottom:数値と単位
ボックス内側の下部の余白を指定する
padding-left:数値と単位
ボックス内側の左側の余白を指定する
*単位はいずれもpx/%/em/vwなど

ショートハンド(半角スペースで区切る)
上下左右を指定    padding:29px;
上下左右を指定   padding:20px 50px;
左右を指定  padding:20px 50px 100px;
を指定 padding:20px 50px 100px 0(px);


⑥margin:キーワードor数値と単位
ボックスの外側の余白を指定する
キーワード:auto
数値・単位:px/%/em/vwなど

margin-top:キーワードor数値と単位
ボックス外側の上部の余白を指定する
margin-right:キーワードor数値と単位
ボックス外側の右側の余白を指定する
margin-bottom:キーワードor数値と単位
ボックス外側の下部の余白を指定する
margin-left:キーワードor数値と単位
ボックス外側の左側の余白を指定する
*キーワードはいずれもauto
*単位はいずれもpx/%/em/vw


⑦font-weight:キーワード
文字のウェイト(太さ)を指定する
キーワード:normal/bold/bolder/lighter




◼︎リセットCSS

ブラウザのデフォルトのスタイルを解除するためのCSS

各ブラウザはデフォルトのスタイルがそれぞれ設定されている。
CSSで装飾する前に、このデフォルトのスタイルを解除する必要がある。
こうすることによって、ブラウザ間の表示の違いをなくし、まっさらな状態にしてからCSSを書くことができる。




◼︎classについて

class名は2個以上つけることもできる。
ex.
<span class="cat-type" "male">
<span class="cat-type" "female">


*"cat-type"という共通部分の指定をしてから、”male”,”female”という別々の装飾をしたい部分を指定する場合
.cat-type{
font-size: 80%
font-weight: normal;
}

.male{
color: #00ff00;
}

.female{
color: #ff0000;
}


*"male","female"で指定する中に、上記の"cat-type"で指定したものを書いてまとめることもできる。
.male{
font-size: 80%
font-weight: normal;
color: #00ff00;
}

.female{
font-size: 80%
font-weight: normal;
color: #ff0000;
}





♣︎参考にしたサイト・本♣︎

HTMLクイックリファレンス セレクタの種類

『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著)技術評論社


# by zooori | 2018-01-13 12:20 | 授業まとめ(CSS編)

授業9回目 CSS⑴ 2018.1.6(sat)

◼︎CSSの基本

何に対してセレクタ
何をプロパティ
どうする

セレクタ{
 プロパティ
 プロパティ;(複数記述してOK)
}

ex.
h1の(セレクタ
色を(プロパティ
赤にする(

h1{
 color: red;
}

CSSのコメントアウト
/* 〜 */
(〜)部分に書く



◼︎CSSの書き方(3つ)

①インライン
1つ1つのタグに対してstyle属性を使って記述する。
複数記述するときは「;」でつなげる。
ex.<h1 style="color:red;">見出し1を赤くする</h1>

②内部参照
<style>タグ(<style>〜</style>)に記述する。
head内に記述する。

③外部参照
「.css」を読み込む。
CSSを参照するための記述を各ページのhead内にする。

*インラインと内部参照はあまり使わない。一つのページだけ変更したい時などに使う。
*外部参照は一気に適用できる。



◼︎CSSの読み込み方(外部参照)

head内に<link>を記述する。
<link href="style.css" rel="stylesheet" media="all">
href リンクする外部ファイルのURLを指定する
rel  リンク先のファイルとの関係性を表す

*必ず、読み込まれているかを確認する。(何か書いてみて反映されるか)
*stylesheetのスペルミスを気をつける。



◼︎よく使用するセレクタ

①要素型セレクタ
要素名 要素名で指定した要素にスタイルを適用
h1{
color:red;
}

②classセレクタ
要素名.クラス名 クラス名をつけた要素にスタイルを適用
.class名{
color:red;
}

③idセレクタ
要素名#id名 idを付けた要素にスタイルを適用
#id名{
color:red;
}

④擬似クラス
要素名:link 未訪問のリンク
a:link{color:blue;}
要素名:visited 訪問済みのリンク
a:visited{color:blue;}
要素名:hover カーソルが乗っている要素
a:hover{color:blue;}
要素名:active クリック中の要素
a:active{color:blue;}
など

⑤子孫セレクタ
セレクタ セレクタ 下の階層の子孫要素、(何か)の中の(何か)
セレクタの間を半角スペースで区切る
2個以上の指定も可能
#cat dl dt{color:bule;}(dlを省略可)


idを使うとき
ページに一つしかなく、比較的広いエリアを表すものに使うことが多い。
ex.ヘッダー・グローバルナビゲーション・メイン・コピーライトなど

classを使うとき
運用していく上で、増える可能性がある場合。
デザインを使いまわせるか。

*省略について
h3のclass="pink"の色を指定したいとき、h3は省略可能。
h3.pink{color:pink;}
.pink{color:pink;}(h3を省略しても良い)
ただし、半角スペースで区切られている場合は子孫セレクタになる。



◼︎カラーコード

色を指定する場合は、カラーコード(#から始まる6桁の16進数 ex.#ff0000)を使うことが多い。
RGB値(0から255までの10進数)をカラーコード(16進数)に変換する。

RGBは、R(red)G(green)B(blue)の光の3原色を表す。
それぞれ0から255まで256段階の10進数の数字が入る。

rgb(0,0,0) #000000
rgb(255,255,255) #ffffff
rgb(255,0,0) #ff0000



◼︎単位

①px
モニターの解像度の最小単位を1pxとして指定
*一般的なブラウザでの文字表示の初期設定は16px。1文字が16px四方の正方形に収まるサイズ。

②%
親要素の文字サイズ1文字分を100%として指定

③em
親要素の文字サイズ1文字分を1emとして指定

*あらかじめ基準となる文字サイズを決めて、その相対的な数値で設定するための単位が%とem。
100%、1emは1文字分のサイズを表す。(1文字のサイズ16pxの時、1em/100%の文字サイズは16px、2em/200%の文字サイズは32px)

*親要素の文字サイズが15px、子要素の文字サイズは30pxにしたい場合
%→200%
em→2em
と指定する。

*emと%の指定は、タグが入れ子状になっている時、外側のタグで指定された数値を内側のタグが次々と継承していく。
複雑な階層状のタグ構成の場合は分かりにくくなってしまうこともある。

④rem
階層状のタグ構成の時でも、相対的な数値指定を継承しない。
常にhtml要素に対する設定からの相対で数値を設定できる。


授業9回目 CSS⑴ 2018.1.6(sat)_f0397237_00484529.png



♣︎参考にしたサイト・本♣︎
レンサバネット 外部参照・内部参照・インラインの書き方

HTMLクイックリファレンス セレクタの種類

PEKO STEP  RGBと16進数カラーコードの相互交換ツール

Mari`s IROENPITSU カラーコード変換ツール

『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著)技術評論社

『Webデザインとコーディングのきほんのきほん』瀧上園枝(著)浜俊太朗(監修)マイナビ出版

# by zooori | 2018-01-12 01:25 | 授業まとめ(CSS編)

授業8回目 お問い合わせフォームを作る(3)

◼︎<input>のtype属性の値
①radio
<input type="radio">
ラジオボタンを作成する。
選択肢から一つのみ選択できるボタンを作る。
<form>でデータが送信される時、name属性で指定した名前とvalue属性で指定した値が一組になって送信される。
複数の選択肢を一つの選択グループにするために、name属性で同じ名前をつける必要がある。

type="radio"で指定可能な属性
name属性 フォーム部品に名前をつける
value属性 送信される値を指定
checked属性 選択された状態にする
required属性 選択必須にする

②checkbox
<input type="checkbox">
チェックボックスを作成する。
複数の選択肢から複数選択できるボタンを作る。
<form>でデータが送信される時、name属性で指定した名前とvalue属性で指定した値が一組になって送信される。

type="checkbox"で指定可能な属性
name属性 フォーム部品に名前をつける
value属性 送信される値を指定する
checked属性 選択された状態にする
required属性 選択必須にする


③reset
<input type="reset">
リセットボタンを作成する。
入力内容をキャンセルして初期状態に戻すためのボタン。

④submit
<input type="submit">
送信ボタンを作成する。
ボタンに表示させるテキスト(ex.送信する)は、value属性で指定する。
*value属性の使い方が異なる。

type="submit"で指定可能な属性
name属性 ボタンに名前をつける
value属性 ボタンの値(ボタンのテキスト)を指定する
formaction属性formenctype属性formmethod属性formnovalidate属性formtarget属性

<input>タグインライン要素のため、改行したい時には<br><ul>を使って記述する。


◼︎autofocus属性
入力欄にカーソルを当て自動フォーカスする
<input>要素autofocus属性を指定すると、ページが表示された時に、指定した入力欄にカーソルが当たってフォーカスされた状態になる。


◼︎placeholder属性
入力欄に初期表示する内容を指定する
<input>要素placeholder属性で指定した値が、入力欄に初期値として表示される。


◼︎required属性
入力項目が入力必須であることを示す。
<input>要素のrequired属性を指定すると、入力項目が入力必須であることをブラウザに知らせることができる。


◼︎autocomplete属性
autocomplete属性は、オートコンプリートの有効/無効を指定する。
*オートコンプリート機能(入力内容の自動補完)
*前に入力したものを表示する。
autocomplete="on" オートコンプリートを有効にする (初期値)
autocomplete="off" オートコンプリートを無効にする
input要素form要素で使用できる。


◼︎checked属性
あらかじめその選択肢が選択されている状態になる。
HTMLではcheckedと記述して良いが、XHTMLではchecked="checked"と記述する。
input要素command要素menuitem要素で使用できる。


◼︎selected属性
初期状態で選択された項目を表す。
selected属性を指定されたoption要素は、初期状態で選択された状態になる。
option要素で使用できる。


◼︎<label>
フォーム部品と項目名(ラベル)を関連付ける
項目名をクリックすると、フォーム入力欄やラジオボタン、チェックボックスが選択されるようになる。

使い方
<label>タグfor属性の値とフォーム部品のidの値を一致させる
ex.<label for="female">女の子</label>

<label>〜</label>の中にフォーム部品を配置する



授業8回目 お問い合わせフォームを作る(3)_f0397237_16182024.png

授業8回目 お問い合わせフォームを作る(3)_f0397237_16271591.png
授業8回目 お問い合わせフォームを作る(3)_f0397237_16275209.png





◼︎W3Cの正しい記述かをチェックするツール
warningは注意。場合によってはそのままでも良いこともある。
errorは必ず直す。

◼︎HTMLのヴァージョンについて
HTML5の1つ前はHTML4.01、そのHTML4.01が派生したものがXHTML1.0。
それぞれstrict/transitionalに分けられる。

ヴァージョンが異なる場合は、書き換えれば良い。
*HTML5→HTML4.01はそのままでOK。
*XHTML1.0とHTML5はタグの閉じ方が異なる。
XHTMLは閉じタグのないものは「/」をつける。
ex. <meta 〜〜/>
<p></p>など閉じタグありのものは問題なし。


♣︎参考にしたサイト・本♣︎









# by zooori | 2018-01-11 00:15 | 授業まとめ(HTML編)

2017.11.27~webの学校の授業で学んだことをまとめています。


by zooori