css プロパティ一覧(ボックスモデル、文字、画像)

(作成中)

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

ボックスモデル

ボックスモデルとは

cssでは
このボックスモデルという枠組みが
全ての基本となります。

このボックスモデルを
タテに並べたり、
ヨコに並べたり、
ボックスモデル中にボックスモデルを入れ込んだりして
ウェブサイトを作っていきます。

内側から
content = 文字や写真などを入れる場所(子要素もここへ入る)
padding = 最内のスペース(バックスクリーンを含む)
border = 境界枠線
margin = 最外のスペース

画像blog-css-list01-01

予備知識の
記事を用意しました。

よければご覧ください。

幅           :width

widthは、
幅の数量を決めるプロパティ。


widthは、
幅を決定するプロパティ2種の1つ。

 1:width   = 数量を決める
 2:box-sizing = ボックスモデルのどこまでを
           幅にするか(ボックスモデルへの適用)


widthは、
数量指定の他に、
width: 100%(パーセント指定)
width: auto
の設定があります。

width: 100%(パーセント指定)は、
親要素のcontent幅を100%として
子要素をパーセント指定できます。

width: autoは、
かなり特殊で
displayの状態で結果が変わります。

詳しい
機能は以下の通りです。

display: inline
display: inline-block
width: auto文字列の幅が
contentの幅になる
(文字幅でcontentが自動調整)
display:blockwidth: auto親要素content幅を
引き継いでwidthとし
その中へ
自らのボックスモデル全てを入れる
(content+padding+border+margin)

予備知識の
記事を用意しました。

よければご覧ください。

高さ          :height

heightは、
高さの数量を決めるプロパティ。


heightは、
高さを決定するプロパティ2種の1つ。

 1:height   = 数量を決める
 2:box-sizing = ボックスモデルのどこまでを
           幅にするか(ボックスモデルへの適用)


その他
heightには、

具体的な数値でない

 height: auto
 height: 100%

などもあります。

height: autoは、
 親要素で使います。

 親要素が中身に合わせて、
 自動で伸び縮みします。

height: 100%は、
 子要素で使います。

 親要素の高さをを100%として
 子要素の高さを%で決めることができます。

その他、
heightについての
予備知識の記事を用意しました。

よければご覧ください。

内側領域        :padding

conten外側のスペースを作る
プロパティです。

画像blog-css-list01-01

backgroundの色や画像も入り、
スペース確保は
主にこれを使います。

しかし、
display:inlineの上下では使えないので
そこだけは注意が必要です。

さらに、
paddingは、初期値に0ではない
数字が入っているので

*{
padding: 0;
}

を入れておくと良いでしょう。

詳しくは、
下の記事をご覧ください。

囲み線         :border

paddingとmarginの間に入る
線のプロパティです。

画像blog-css-list01-01

線だけでなく画像も入れられるので便利です。

しかし、
プロパティborder-imageは、
扱いが非常に難しいため

記事を分けて別で
用意しました。

詳しくは、
下の記事をご覧ください。

外側余白        :margin

一番外の空白のプロパティです。

画像blog-css-list01-01

box-sizingに含まれなかったり、
margin相殺問題を起こしたりと、

非常に扱いづらいプロパティでもあります。

詳しくは、
下の記事をご覧ください。

改行ごとにボックス生成 :box-decoration-break

改行で文章がぶつ切りになっても
それぞれの文章ごとに
ボックスモデルを作ってくれるプロパティです。

このプロパティを使うと
コードが読みにくくなるので、

利用は避けたいプロパティでもあります。

影をつける       :box-shadow

ボックスモデルに
影の装飾をつけるプロパティです。

詳しくは、
下の記事をご覧ください。

ボックスモデル領域設定 :box-sizing

box-sizingは、
幅、高さを決定する
プロパティのひとつ。

width、heightは、
数値を決めるのに対し

box-sizingは、
ボックスモデルのどこまで
適用させるかを決める。

値は、
 content-box
 border-box
の2種類がある。

詳しくは、
下の記事をご覧ください。

振る舞い設定      :display

そのボックスモデルが、
一体どのような目的で利用されるのか
を決めるプロパティです。

非常に重要で
非常に難しい
プロパティでもあります。

しかし、
これを覚えないと
ウェブサイトが作れないくらい
重要なので

ボックスモデルの次に
覚えてください。

詳しくは、
下の記事をご覧ください。

(作成中)

読み手がサイズ変更できる:resize

ユーザー自身がボックスモデルを
拡大縮小できるようになる
プロパティです。

右下に
ボックスモデルの
大きさを変更できるつまみが出て

それを使い
自由に拡大縮小できるようになります。

しかし、
読み手に手間をかけない方が良いので

このプロパティを使う時は
よく考えてからの方が
良いでしょう。

詳しくは、
下の記事をご覧ください。

存在をのこして非表示  :visibility

visibilityは、
ボックスモデルの
幅、高さを残したまま非表示にする
プロパティです。

(幅、高さを0にして非表示は、display: none)

HTML<table>の
1セルだけ非表示にも使えます。

詳しくは、
下の記事をご覧ください。

文字

文字色変更      :color

文字の色を変更する
プロパティです。

指定方法は6つあります。

名称指定red
green
blue

black
white

orange
yellow
など
#16進数#101010
(R16 G16 B16)
rgbrgb(R, G, B)A
A=alpha(透明度)
0〜1
透明〜見えている
hsl色相、彩度、輝度
(超高度な方法)
transparent文字色が透明
(取扱注意)
currentcolor色指定できるプロパティ同士で
使いまわせる

詳しくは、
下の記事をご覧ください。

cssから文字挿入   :content

擬似要素::before、::after専用
プロパティです。

このプロパティを使うと
擬似要素::before ::afterで作成された
擬似要素に文字を入れることができます。

詳しくは、
下の記事をご覧ください。

文章開始点変更(左上、右上):direction

右上から文章が始まる外国語を
使わない限り
使うことはないでしょう。

direction: ltr = 左上が文章の開始点
direction: rtl = 右上が文章の開始点


文字そのものを右から左へするには
unicode-bidiと
directionを使います。

画像blog-css-list01-02
unicode-bidi: bidi-override;
direction: rtl;
text-align: end;

フォント設定     :font

フォントを操作する
プロパティです。

ここでは書ききれないので、
下の記事をご覧ください。

文字間スペース    :letter-spacing

letter-spacingは、
文字と文字の間を広げたり、狭めたりする
プロパティです。


letter-spacingは、
プラス、マイナスの数値を
入れる事ができます。

プラス  = 文字間が広がる。
マイナス = 文字間が狭まる。


letter-spacingのプラスは、
文字の後ろにスペースが入るため

画像blog-letter-spacing01

場合によっては
均等割を使うのもあり。

text-align-last: justify;
width: 300px;
display: inline-block;
画像blog-letter-spacing02

ただし
text-align-last: justify は、
display: inline では使えないので
注意。

詳しくは、
下の記事をご覧ください。

句読点の禁則処理設定 :line-break

、  。 (句読点)が、
行の先頭に来ないようにする
禁則処理を
変更するプロパティです。

特に触ることのない事のない
プロパティでもあります。

行の高さ設定(行間) :line-height

行間を設定するプロパティです。

行間と書いてありますが、

設定するときは
行間だけでなく、
文字と行間を含めた高さを設定します。

(例)
font-size = 10px
行間 0px
line-height: 10px;
font-size = 10px
行間 5px
line-height: 20px;


詳しくは、
下の記事をご覧ください。

文字を枠線で囲む   :outline

文字、文字列を枠線で囲む
プロパティです。

詳しくは、
下の記事をご覧ください。

文章が下へはみ出た設定:overflow

overflowは、
文章が下へはみ出た時

それらをどうするか
決めるプロパティです。

値は4つあります。
 1:visible = はみ出たまま
 2:hidden = はみ出た所だけ消す
 3:scroll  = スクロールバー機能追加
 4:auto  = はみ出た時だけスクロール機能追加

詳しくは、
下の記事をご覧ください。

引用符の設定     :quotes

content: open-quote;
content: close-quote;
の引用符を変更をする
プロパティです。

このプロパティを使うなら
直接contentに入れた方が良い。

あああああ

blockquote::before {
  content: "\201C";
}

blockquote::after {
  content: "\201D";
}

あああああ

blockquote::before {
  content: "\201F";
}

blockquote::after {
  content: "\201E";
}

文字の左、中央、右配置:text-align

ヨコ方向の配置を決める
プロパティです。

文字列、画像、display:inline、display:inline-blockで
使われます。

中央寄せでも
よく使われるので
知っておくと良いでしょう。

中央寄せについては、
下の記事をご覧ください。

文字装飾線      :text-decoration

下線、上線、打ち消し線など
文字装飾のプロパティです。

詳しくは、
下の記事をご覧ください。

字下げ        :text-indent

最初の行を字下げする
プロパティです。

複雑な手法を用いれば
1行目は字下げせず、
2行目以降から字下げ

などもできます。

詳しくは、
下の記事をご覧ください。

文章が右に、はみ出た設定:text-overflow

text-overflowは、
 ・overflow: hidden;
 ・white-space: nowrap;
を使って文章が右にはみ出ている時、

そのはみ出た部分をどうするか決める
プロパティです。

詳しくは、
下の記事をご覧ください。

文字に影をつける   :text-shadow

文字に影をつけるプロパティです。

詳しくは、
下の記事をご覧ください。

文字右から左へ変える   :unicode-bidi

文字方向そのものを変えるには
unicode-bidi
direction
を同時に使います。

画像blog-css-list01-02
unicode-bidi: bidi-override;
direction: rtl;
text-align: end;

文字の上下配置設定    :vertical-align

小さな文字を上下配置する
プロパティです。

display:inline
display:inline-block
でのみ動作します。

親要素の文字を基準に
上下の配置をするプロパティなので、

heightの上下配置をするときは
flexboxを使った方が良いでしょう。

vertical-alignの詳しい説明は、
下の記事をご覧ください。

ホワイトスペースと、右側の折り返し :white-space

空白、タブ、改行の
ホワイトスペース処理と
右側の折り返しを

同時に決めることができる
プロパティです。

ホワイトスペースとは、

タブ、改行、頁送り、復帰、空白が
コード内で書かれた時

コード内に書かれた
タブ、改行、頁送り、復帰、空白を
そのまま表示せず、
半角スペース1個に変換して表示する処理のこと。

さらに
タブ、改行、頁送り、復帰、空白が
連続でたくさん入力された場合

それらを連続してたくさん表示したりはせず、
半角スペース1個に変換してから表示する。

詳しくは、
下の記事をご覧ください。

自動改行設定(英文用):overflow-wrap

overflow-wrapは、
英文の
右側の自動改行をコントロールする
プロパティです。

URLが枠からはみ出た時、
このプロパティを使うと

URLを枠内に収めることができます。

overflow-wrap: normal

画像blog-overflow-wrap01

overflow-wrap: break-word

画像blog-overflow-wrap02

詳しくは、
下の記事をご覧ください。

overflow-wrap: normal;
overflow-wrap: break-word;

自動改行設定(日本語用):word-break

このプロパティを使うことは
おすすめしません。

単語間隔(英文用)   :word-spacing

word-spacingは、
単語間のスペース幅を変える
プロパティです。

英文は、
単語の間を半角スペースで区切ります。

その半角スペースの間隔を変える
プロパティがword-spacingです。

日本語は、単語を半角スペースで区切らないため
word-spacingは、
日本語とは関係のないプロパティです。

タテ書き、ヨコ書き設定:writing-mode

writing-modeは、
タテ書き、ヨコ書きの設定を変える
プロパティです。

値は3つ
 1:writing-mode: horizontal-tb = ヨコ書き
 2:writing-mode: vertical-rl   = タテ書き(右から左)
 3:writing-mode: vertical-lr   = タテ書き(左から右)


1:writing-mode: horizontal-tb;

画像blog-css-list01-03

2:writing-mode: vertical-rl;

画像blog-css-list01-04

3:writing-mode: vertical-lr;

画像blog-css-list01-05
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

画像

背景設定      :background

背景色、背景画像を設定する
プロパティです。

多機能で扱いも少し難しいため
別記事を用意しました。

よければそちらを
ご覧ください。

画像の切り抜き   :clip-path(調査中)

(調査中)

画像加工      :filter(調査中)

画像に特殊効果をかける
プロパティです。

しかし、
今現在では、
これらのプロパティを使うのではなく

画像加工ソフトを使う方が良いでしょう。

(調査中)

拡大縮小      :image-rendering(調査中)

(調査中)

画像のはめ込み設定 :object-fit(調査中)

(調査中)

画像の位置設定   :object-position(調査中)

(調査中)

タイトルとURLをコピーしました