@vercel/og
みかんめがね大事そうなところ
- display
- position
- color
- margin
- Position
- Size
- Min & max size
- border
- borderRadius
- Flex
- Font
- fontSize
- fontWeight
- Text
- textAlign
- textOverflow
- textDecoration
- textShadow
- lineHeight
- Background
- backgroundColor
- backgroundImage
- backgroundPosition
- backgroundSize
- transform
- transformOrigin
- objectFit
- opacity
- boxShadow
- overflow
- filter
みかんめがね- display none ... 要素を画面から消す。（あんま使わなそう）
みかんめがね- display flex ... 要素を縦や横に並べる
flex-direction で縦か横を指定する。
flex-wrap で子要素を折り返すかどうかを指定できる
- wrap-reverse にすると電卓みたいにできる
justify-content で水平方向の並び方を指定できる
- flex-start で左
- flex-end で右
- center で中央
- space-between で子要素同士の間に空白を入れる
- space-around で子要素の左右に空白を入れる
みかんめがね参考にするURL一覧 css display URL
css position URL
css color URL
css margin URL
css margin position URL
css size URL
css min & max size URL
css vorder URL
css vorde-radius URL
css flex URL
css font size URL
css font weight URL
css text align URL
https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/css/text-overflow_css.php?
css text overflow URL
css text decoration URL
css textshadow URL
css text lineheight URL
css backgroundcolor URL css backgroundImage URL css backgroundposition URL css backgroundsize URL
css transform URL
css transform origin URL
css object fit URL
css opacity URL
css boxshadow URL
css overflow URL
css filter URL
みかんめがね調べて分かったこと
display - cssのプロパティの一つで要素の表示形式を決めるもの。例としてp {display: block} span {display: inline}が使われている。
とることができる値はblock,inlone,inline-block.noneの４つ
ほとんどのタグはblockまたはinlineが初期値になっている。
displayプロパティにより要素の表示のされ方や高さ・幅の設定が変わる。
「値の表示のされ方」
block⇒要素が横までいっぱいに広がり、縦に並んでいく
inline⇒要素が平ぺったく横に並んでいく
inline-block⇒blockとinlineの中間
none⇒非表示になる
webではほとんどがblockかinlineのどちらか
みかんめがねposition - 要素の位置を決めるためのプロパティ。例：要素の位置を20pxだけ右に動かす、要素の上に別の要素を重ねて乗せることができたり、画面の決まった位置に要素を固定して表示することができる。
◯◯ {position : 値} 〇〇には以下の４つが入る
static：初期値はこれ。指定することはほとんどない
relative：現在の位置を基準に相対的な位置を決める
absolute：親要素を基準に絶対的な位置を決める
fixed：画面のきまった位置に固定する
class名が”test”の要素の相対的な位置を指定したいときには、.test {position: relative}というように書く
positionは基本的にtop、bottom、left、rightというプロパティとセットで使います。
positonで基準を決める
top bottom left rightで具体的な位置を数字で調整
たとえば、top:10pxとleft:10pxと指定した要素は、基準の左上から右に10px、下に10pxの位置に配置されます。
top:0とleft:0にした場合は、基準の左上にぴったりとくっつきます。
また、bottom:10pxとright:10pxを指定された要素は、右下から上に10px、左に10pxの位置に配置されます。
bottomとrightを0にした場合は、基準の右下にぴったりとくっつきます。
leftとright、またはtopとbottomを同時に指定することは殆どありません。
staticは基本指定しない
staticは位置が変えられない
top:10pxなどと指定しても効きません。位置を変えたいときはrelativeやabsoluteにしましょう。
z-indexを指定できない
z-indexとは要素の重なり順を決めるプロパティです。staticではz-index:0の状態になっており、変えることができません。
みかんめがねcolor - 要素内の 文字の色や前景の線の色 を指定します。
要素の色を設定するプロパティとしては、ほかに background-color（背景色）， border-color（境界色）， outline-color（輪郭色） の３つがあります。
色を使うメリット
イメージ・デザインの統一、デザイン性の向上、オリジナリティ。
赤字やマーカーと同様で目立たせる。 文字色が浮き出て立体感がでる。
目に優しい色が使える。 画像に合う色を適応。透明化も可能。
色を使うデメリット
背景と文章の同色部分が被ったり、使いすぎると読み難くなる。
目が疲れる場合もある。 青系色はリンクアンカーと間違える。
みかんめがねmargin - marginは「外部余白」を設定するものになります。
要素の外側に向かって余白を設けるものがmarginです。
逆に要素の内側に余白を作るのがpaddingと呼ばれるものになります。
marginのショートハンドでの書き方
先程のmarginのコードはそれぞれ方向を指定して書いていましたが、その場合では冗長に感じられる場合があります。
その場合はショートハンドで書くことで記述量を減らすことができます。
.sample {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
/ショートハンドで書いた場合/
.sample {
margin: 10px 20px 30px 40px;
}
一部同じの場合などは以下のように書くこともできます。
.sample {
margin-top: 10px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 40px;
}
/ショートハンドで書いた場合/
.sample {
margin: 10px 40px;
}
ショートハンドの注意点
marginの値をショートハンドで書くことは、記述量が減らせて一見すると良いように思えます。しかし、CSSで重要なのは拡張性と保守性であり、ショートハンドは正しい使い方をしないとそれらを損ねる場合があります。
たとえば以下のような場合です。
.samplr {
margin: 0 0 20px 30px;
}
みかんめがねsize - ページボックスのサイズと向きを指定 します。
sizeプロパティは，CSS2.1では削除されています。
指定できる値の形式は，以下のとおりです。
値 説 明
auto ブラウザーの仕様に任せます。 （初期値）
数値（長さ） ページボックスの大きさを幅と高さで指定します。 値1 の１つのみを指定した場合は幅と高さ両方に，値1 と 値2 の２つを指定した場合は順に幅と高さに適用されます。
ページサイズ A5，A4，A3，B5，B4，letter，legal ，ledger のうちから１つを選んで指定します。
landscape ページサイズを指定した場合に横長配置を指定します。
portrait ページサイズを指定した場合に縦長配置を指定します。
てべすてんsize - ページボックスのサイズと向きを指定 します。
sizeプロパティは，CSS2.1では削除されています。
CSS の size プロパティではなく、width プロパティとheight プロパティについてみた方がいいです。
みかんめがね調べて分かったこと
border - 線の太さ、色、種類を指定することで簡単に枠線を作ることができ、それぞれ細かい指定ができる。枠線を応用することにより、図形などオシャレなデザインを実装できるようになる。
一般的にborderプロパティでは、下記3つのプロパティを一括で記述します。
border-color：線の色
border-style：線の種類
border-width：線の幅
複数のプロパティをまとめて記述する記述を”ショートハンド”といいます。
border-colorは枠線の色を制御するプロパティ
特定の方向の線だけに色を指定する場合は下記のようなプロパティを使用します。
border-top-color
border-right-color
border-bottom-color
border-left-color
<div>
上下左右の線の色を変えます。
</div>
div {
padding: 10px;
border: 4px solid;
border-top-color: black;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
}
線の色を一括で指定する場合
div {
padding: 10px;
border: 4px solid;
border-color: red blue green yellow;
}
border-styleは枠線の種類を指定することができる。
border-top-style
border-right-style
border-bottom-style
border-left-style
none 線無し（規定値）
solid 実線
dashed 粗い点
dotted 点線
double 2重線
groove 谷線
ridge 山線
inset 内線
outset 外線
inherit 継承
<div class="dotted">
点線を引きます。
</div>
<div class="solid">
実線を引きます。
</div>
<div class="double">
2本の線を引きます。
</div>
<div class="groove">
へこんだように見える境界線
</div>
<div class="ridge">
出っ張ったように見える境界線
</div>
<div class="inset">
要素が埋め込まれて見える境界線
</div>
<div class="outset">
要素が出っ張って見える境界線
</div>
みかんめがねborder-radius - 「border」とついているものの、border プロパティーの指定がなくても大丈夫でbackground によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。
四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装できます。
div {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
左上、右上、右下、左下の順で、左上を基準に時計回りで書いていきます。
div {
border-radius: 10px 20px 30px 40px;
}
みかんめがねlinear-gradient(45deg, rgba(255,250,140,1) 0%, rgba(255,229,94,1) 50%, rgba(255,229,94,1) 75%, rgba(255,250,140,1) 100%)
候補