参照一覧Reference List

投稿一覧Posts List

タグデザイン

テンプレートのタグ出力

写真レシート等


デザイン「デフォルト」

コピー

H2表題です。H2TITLE

段落や文章のpタグです。基本的にタイトルのhタグの後には説明のためにp等が付きます。

H3表題です。H3TITLE

段落や文章のpタグです。基本的にタイトルのhタグの後には説明のためにp等が付きます。

H4表題です。H4TITLE

文章の後にリンクやイメージ画像で補足説明を入れるのも効果的です。

リンクとPDFアイコン
H5表題です。H5TITLE

文章の中でここが大事である!と表現するemタグや、
文章の中でここが強調したい!と表現するstrongタグも使えます。

H6表題です。H6TITLE

H2表題です。H2TITLE

段落や文章のpタグです。基本的にタイトルのhタグの後には説明のためにp等が付きます。

H3表題です。H3TITLE

段落や文章のpタグです。基本的にタイトルのhタグの後には説明のためにp等が付きます。

H4表題です。H4TITLE

文章の後にリンクやイメージ画像で補足説明を入れるのも効果的です。

リンクとPDFアイコン

H5表題です。H5TITLE

文章の中でここが大事である!と表現するemタグや、
文章の中でここが強調したい!と表現するstrongタグも使えます。

H6表題です。H6TITLE

デザイン「エントリースタイル」

コピー

H2表題です。H2TITLE

段落や文章のpタグです。基本的にタイトルのhタグの後には説明のためにp等が付きます。

H3表題です。H3TITLE

段落や文章のpタグです。基本的にタイトルのhタグの後には説明のためにp等が付きます。

H4表題です。H4TITLE

文章の後にリンクやイメージ画像で補足説明を入れるのも効果的です。

リンクとPDFアイコン
H5表題です。H5TITLE

文章の中でここが大事である!と表現するemタグや、
文章の中でここが強調したい!と表現するstrongタグも使えます。

H6表題です。H6TITLE

H2表題です。H2TITLE

段落や文章のpタグです。基本的にタイトルのhタグの後には説明のためにp等が付きます。

H3表題です。H3TITLE

段落や文章のpタグです。基本的にタイトルのhタグの後には説明のためにp等が付きます。

H4表題です。H4TITLE

文章の後にリンクやイメージ画像で補足説明を入れるのも効果的です。

リンクとPDFアイコン

H5表題です。H5TITLE

文章の中でここが大事である!と表現するemタグや、
文章の中でここが強調したい!と表現するstrongタグも使えます。

H6表題です。H6TITLE

リンクタグ


グリットデザイン

コピー

  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 4
  • ITEM 5
  • ITEM 6
  • ITEM 7
  • ITEM 8
  • ITEM 9
  • ITEM 10
  • ITEM 11
  • ITEM 12
  • ITEM 13
  • ITEM 14
  • ITEM 15
  • ITEM 16
  • ITEM 17
  • ITEM 18
  • ITEM 19
  • ITEM 20
  • ITEM 21
  • ITEM 22
  • ITEM 23
  • ITEM 24
  • ITEM 25
  • ITEM 26
  • ITEM 27
  • ITEM 28
  • ITEM 29
  • ITEM 30
  • ITEM 31
  • ITEM 32
  • ITEM 33
  • ITEM 34
  • ITEM 35
  • ITEM 36
  • ITEM 37
  • ITEM 38
  • ITEM 39
  • ITEM 40
  • ITEM 41
  • ITEM 42
  • ITEM 43
  • ITEM 44
  • ITEM 45
  • ITEM 46
  • ITEM 47
  • ITEM 48
  • ITEM 49
  • ITEM 50
コピー

/* ●●● グリットデザイン ●●● */

.designsample_gridlayout {
	padding:20px;
	border:3px solid #88dddd;
	width:100%;
}

.designsample_gridlayout ul {
	display: grid;
	grid-template-columns: repeat(8, 1fr);/* fr=比pxもOK */
 	grid-auto-rows: 50px;/*箱の縦の長さ*/
	column-gap: 5px;/*横の隙間*/
	row-gap: 15px;/*縦の隙間*/
}

.designsample_gridlayout ul li {
	padding:10px;
	text-align:center;
	border: solid #666 2px;
	background-color:#ddffff;
	box-sizing: border-box;/*padding+border含めた計算*/
}

/*BOX範囲の指示*/
.box1 {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 3;
}

.box2 {
	grid-column-start: 1;
	grid-row-start: 3;
	grid-row-end: 5;
}

.box5 {
	grid-column-start: 6;
	grid-column-end: 7;
	grid-row-start: 2;
	grid-row-end: 6;
}
  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 4
  • ITEM 5
  • ITEM 6
  • ITEM 7
  • ITEM 8
  • ITEM 9
  • ITEM 10
  • ITEM 11
  • ITEM 12
  • ITEM 13
  • ITEM 14
  • ITEM 15
  • ITEM 16
  • ITEM 17
  • ITEM 18
  • ITEM 19
  • ITEM 20
  • ITEM 21
  • ITEM 22
  • ITEM 23
  • ITEM 24
  • ITEM 25
  • ITEM 26
  • ITEM 27
  • ITEM 28
  • ITEM 29
  • ITEM 30
  • ITEM 31
  • ITEM 32
  • ITEM 33
  • ITEM 34
  • ITEM 35
  • ITEM 36
  • ITEM 37
  • ITEM 38
  • ITEM 39
  • ITEM 40
  • ITEM 41
  • ITEM 42
  • ITEM 43
  • ITEM 44
  • ITEM 45
  • ITEM 46
  • ITEM 47
  • ITEM 48
  • ITEM 49
  • ITEM 50