CRI BOOT CAMP 入門編で出てきたプロパティを掲載する。
入門編にでてくるぐらいだから超基本なんだろうね。
しっかり覚えなきゃ。
要素の設定する。
幅を指定する。
width: (単位付き数値) ;
| 800pxの横幅にしたい。 | width:800px; |
| 親要素の70％の横幅にしたい。 | width:70%; |
| 画面の40％の横幅にしたい。 | width:40vw; |
高さを指定する。
height: (単位付き数値) ;
| 800pxの横幅にしたい。 | height:800px; |
| 親要素の70％の横幅にしたい。 | height:70%; |
| 画面の40％の横幅にしたい。 | height:40vh; |
枠を表示する。
border: (-width) (-style) (-color) ;
| 幅2pxのロイヤルブルーの実線で囲む。 | border: 2px solid #4169e1 ; |
| 上辺に5pxのダークブルーの点線をひく。 | border-top: 5px dotted #00008b ; |
枠の外側の余白を設定する。
margin: (-top) (-right) (-bottom) (-left) ;
| 上下左右すべて20px空ける。 | margin: 20px ; |
| 上下10px、左右20px空ける。 | margin: 10px 20px ; |
| 上10px、左右20px、下30px空ける。 | margin: 10px 20px 30px ; |
| 中央に置きたい。 | margin: 0 auto ; |
枠の内側の余白を設定する。
padding: (-top) (-right) (-bottom) (-left) ;
| 上下左右すべて20px空ける。 | padding: 20px ; |
| 上下10px、左右20px空ける。 | padding: 10px 20px ; |
| 上10px、左右20px、下30px空ける。 | padding : 10px 20px 30px ; |
背景を設定する。
background: (-image) (-color) (-repeat) (-position)／(-size) (-attachment) ;
| 背景にスカイブルーの色を付ける。 | background-clolr: #87ceeb ; |
| 背景に画像を貼り中央に置く。 縦横比はそのままで画像が領域をすべてカバーする。 画像の繰り返しはない。 | background: url(images/top.jpg) center/cover no-repeat ; |
ボックスの影を指定する。
box-shadow: (-offset-右) (-offset-左) (-raduis-ぼかし半径) (-spread-広がり) (-color) (固定値) ;
| 右に2px、下に5px、ぼかし半径10px、色は赤。 | box-shadow:2px 5px 10px #ff0000 ; |
| 下に5px、ぼかし半径15px、色は黒。 | box-shadow:0 5px 15px rgba(0,0,0,15) ; |
| 上10px、左右20px、下30px空ける。 | padding : 10px 20px 30px ; |
文字の装飾をする。
フォントと行の高さを決める。
font: (-size)／(-line-height) (-style) (-family) ;
| 15pxのメイリオに太字に設定する。 | font: 15px bold ”メイリオ”,sans-serif ; |
| 明朝体に設定する。 | font-family: serif ; |
| 標準のスタイル(イタリック体ではない等)、 24pxの大きさで、行の高さは24pxの1.8倍、 ゴシック系のフォントの総称。 | font: 24px/1.8 normal sans-serif ; |
文字の色を指定する。
color: (色コード) ;
| 文字をブルーに変える。 | color: #0000ff ; |
文字の位置を決める。
text-align: () ;
| 文字を中央に揃える。 | text-align: center ; |
文字の間隔を決める。
letter-spacing: () ;
| 文字間隔を親要素のフォントの大きさを1として0.06倍にする。 | letter-spacing: 0.06em ; |
行の高さを決める。
line-height: () ;
| 行間をフォントサイズの1.8倍にする。 | line-height: 1.8 ; |
| 行間をどんとサイズの2.2倍にする。 | line-height: 2.2 ; |
傍線を設定する。
text-decoration: (-line) (-style) (-color) (-thickness) ;
| 傍線を表示しない。 | text-decoration: none ; |
リストマーカー(項目の印)を設定する。
list-style: (-type) (-position) (-image) ;
| リストマーカーを表示しない。 | list-style: none ; |
表のセル内や行内の縦方向の揃え位置を設定する。
vertical-align: () ;
| セルの中央に揃える。 | vertical-align: middle ; |
レイアウトを設定する。
要素の表示型を決める。
display: () ;
ブロック要素：積み木のように積みあがっていく要素。
インライン要素：行の中にある1部分の要素。
ブロック要素は、横幅、高さの指定が可能。インライン要素は不可能。
(まだよくわかってないので、自信ない。)
| フレキシブルレイアウトを定義する。 | display: flex ; |
| インラインレベルの子要素にする。 | display: inline ; |
| ブロックレベルの子要素にする。 | display: block ; |
| 子要素をインライン表示にするが、ブロック要素としての扱いにする。 | display: inline-block; |
| テーブル(表)のように表示する。 | display: table ; |
| テーブル(表)のセル(枠)のように表示する。 | display: table-cell ; |
要素を横の中心を軸にレイアウトする。
justify-content: () ;
| 横中心に設置する。 | justify-content: center ; |
| 親要素の右端に設置する。 | justify-content: flex-end ; |
| 親要素の両端と等間隔に設置する。 | justify-content: space-between ; |
| 親要素の両端も空間をあけ等間隔に設置する。 | justify-content: space-around ; |
| 子要素を親要素の中で等間隔に設置する。 | justify-content: space-evenly ; |
要素の縦の中心を軸にレイアウトする。
align-items: () ;
| 縦中心に設置する。 | align-items : center ; |
| 子要素の高さの指定がなければ伸ばして表示する。 | align-items : stretch ; |
| 子要素の上端を揃える。 | align-items : flex-start ; |
| 子要素の下端を揃える。 | align-items : flex-end ; |
| 子要素の中心を揃える。 | align-items : center ; |
| 子要素の1番目の文字の下端を揃える。 | align-items : baseline ; |
子要素で伸縮を設定する。
flex: (-grow) (-shrink) (-basis) ;
grow は幅の伸び率を、shrink は幅の縮み率を、basis は基本の幅を指定する。
| よくわからん | flex:1; | flex: 1 1 0 ; |
子要素の配置方向を指定する。
flex-direction: () ;
| 子要素を横に並べる。 | flex-direction: row ; |
| 子要素を縦に並べる。 | flex-direction: column ; |
| 子要素を横に逆順に並べる。 | flex-direction: row-reverse ; |
| 子要素を縦に逆順に並べる。 | flex-direction: column-reverse ; |
子要素の折り返しを指定する。
flex-wrap: () ;
| 子要素を折り返さない。(親要素からあふれる場合あり) | flex-wrap: nowrap ; | 規定値 |
| 子要素を折り返す。(親要素から溢れず複数行に) | flex-wrap: wrap ; | |
| 子要素を横に逆順に並べる。 | flex-wrap: wrap-reverse ; |
要素の回り込み位置を指定する。
float: () ;
| 先の要素が右に寄り、次の要素が左に回る。 | float: right ; |
| 先の要素が左に寄り、次の要素が右に回る。 | float: left ; |
要素の回り込み位置を解除する。
clear: () ;
| 先の要素の寄せる設定、回り込みを解除する。 | clear: both ; |
| 先の要素が左に寄り、次の要素が右に回る。 | float: left ; |
要素の配置を場所を指定する。
position: () ; z-index: () ;
z-index は、position で配置された要素にしか設定できない。数が小さいほど下の階層となる。
| 通常のフローで設置された親要素を基準に 上20px、右40px、下から3階層目としておく。 | position: relative ; top: 20px ; right: 40px ; z-index: 3 ; |
| 直近で設定された position の位置か、初期のブロックの位置を基準に 左から80px、底辺から30px、下から8階層目としておく。 | position: absolute ; left: 20px ; bottom: 40px ; z-index: 8 ; |
疑似クラスセレクタを指定する。
未訪問のリンクにスタイルを適用する。
a: link { }
| 未訪問のリンクを文字をピンクにする。 | a: link {color: #ffc0cb ; } |
マウスオーバーしたときの変化を指定する。
a: hover { }
| マウスオーバーさせると文字を深紫にする。 | a: hover {color: #9400d3 ; } |
最初の子要素にスタイルを適用する。
p: first-child { }
| 最初の子要素を太文字にする。 | p: first-child {font-style: italic ; } |
n番目の子要素にスタイルを適用する。
p: nth-child(n) { }
| 3番目の要素のフォントサイズを1段階大きくする。 | p: nth-child(3) {font-size: large ; } |
| 奇数番目の要素を太文字にする。 | p: nth-child(odd) {font-weight: bold ; } |
| 偶数番目の要素をインディゴ色に変える。 | p: nth-child(even) {color: #4b0082 ; } |
疑似要素セクレタを設定する。
<p class="note">基本となる文章。</p>指定したコンテンツを要素の前に挿入する。
要素名:: bofore { }
| 「基本となる文章。」の前に「注目!」を表示する。 | p .note:: before {content: “注目!” ; } |
指定したコンテンツを要素の後に挿入する。
要素名:: after { }
| 「基本となる文章。」の後に「new!」を表示する。 | p .note:: after {content: “new!” ; } |
要素の1文字目にのみスタイルを適用する。
要素名:: first-letter { }
| 「基本となる文章。」の1文字目の 「基」を2段階大きく表示する。 | p .note:: first-letter {font-size: x-large ; } |
属性セクレタを設定する。
<div>
<p class="1gyome">基本となる文章。</p>
<p class="2gyome">基本となる文章。</p>
<p class="3gyome">基本となる文章。</p>
</div>指定した属性と属性値を持つ要素にスタイルを適用する。
要素名[属性=”属性値”] { (スタイル) }
| 「基本となる文章。」の文字色を 1行目赤、2行目白、3行目黄色にする | p:[class=”1gyome”] {color: #ff0000 ; } p:[class=”2gyome”] {color: #ffffff ; } p:[class=”3gyome”] {color: #ffff00 ; } |
子セクレタを設定する。
<div>
<p>基本となる文章1。</p>
<span>基本となる文章2。</span>
</div>子要素のみスタイルを適用する。
要素名A > 要素名B { (スタイル) }
| <p>のスタイルの文章のみ太文字にする。 | div > p { font-weigth: bold ; } |
CRI Boot Camp を少しでも効率的に！
CRI Boot Camp とは、株式会社クリエイティブリソースインスティチュート( 略称CRI)が運営している無料オンラインプログラム学習サイトだよ。
そこの講座の入門3までに出てくるCSSをすべて書き出してみたら、頭が整理できた気がする。
あとはがしがしコードを書こう！
コメント