技術的な問題
画像
1200×675を基本とする
・YouTubeのサムネに対応したアスペクト比、16:9に合わせる
目次
タイトル色の変更
.toc-title {
position: relative;
padding: 10px 0;
background: #6ec4db;
color: #fff;
font-weight: bold;
}
色
１.Webデザインとしてカラーを考える
２.別のジャンルからベースカラーを考える
・インテリア
・ファッション
- c1-紫
- c2-京紫
- c3-御召御納戸
- c4-紅鬱金
- c5-葡萄鼠
- c6-樺色
- c7-緑
- c8-若草色
- c9-紅紫
- c10-紅梅色
- c11-赤
- c12-紅桔梗
- c13-紅桔梗
- k1-緑マーカー
- k2-黄マーカー
CSS
○余白（絶対値：10px or 相対値：10%）
個別指定
.logo1{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
省略１
.logo1{
padding: 20px 10px 20px 10px;
top,right,bottom,left
}
省略２
.logo1{
padding: 20px 10px;
上下,左右
}
枠線（border）
枠線
枠線の余白は内側にpadding,外側はmarginを使う
.logo1{
border: 5px solid red;
太さ,種類,色
}
※下線の場合は「border-bottom」になる
none
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
hidden
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
solid
1本線で表示されます。
double
2本線で表示されます。
groove
立体的に窪んだ線で表示されます。
ridge
立体的に隆起した線で表示されます。
inset
上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
outset
上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
dashed
破線で表示されます。
dotted
点線で表示されます。
参照 http://www.htmq.com/style/border.shtml
■ボーダー太さの値
数値で指定
数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。
キーワードで指定
thin（細い）、medium（普通）、thick（太い）のうち、いずれかを指定します。キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。
■ボーダー色の値
色
#000000などの記述やカラーネームで色指定をします。
transparent
ボーダーの色を透明にします。
2022年3月19日 公開
著 者 相沢睦
発 行 瓊葩社
©2025 Mutsu Aizawa
掲載の記事・写真・イラスト等のすべてのコンテンツの無断複写・転載を禁じます。