ブログの設定

技術的な問題

ページネーションの作成

画像

1200×675を基本とする

・YouTubeのサムネに対応したアスペクト比、16:9に合わせる

web計。 黄金比・白銀比などの計算
webデザイナ向けアレコレ計算式、略してweb計。

目次

タイトル色の変更

.toc-title {
position: relative;
padding: 10px 0;
background: #6ec4db;
color: #fff;
font-weight: bold;
}

1.Webデザインとしてカラーを考える

2.別のジャンルからベースカラーを考える
・インテリア
・ファッション

  • 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;
}

省略1
.logo1{
 padding: 20px 10px 20px 10px;
     top,right,bottom,left
}

省略2
.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日 公開

著 者  相沢睦

発 行  瓊葩社

©2024 Mutsu Aizawa
掲載の記事・写真・イラスト等のすべてのコンテンツの無断複写・転載を禁じます。