CSSコードサンプル

作成日: 2021/07/31 更新日: 2023/03/25 サイトの紹介と使い方

• top
• プログラム言語
• HTMLとCSS
• 役立つHTMLの一覧
• [ CSSコードサンプル ]

初めに

WordPressで使用していますが、他のホームページにも流用可能です。
WordPressの場合＞ファイル：（Cocoon child の） Style.css

記事管理（リスト用）

CSS 分類コード：01xx

パンくずリスト

/*<--- 0101 */
my-bread-crumb{
  padding:			0rem;
  margin:			0rem;
}

.my-bread-crumb li{
  display:          inline;
  list-style:       none;
  font-size:        1.5rem;
  font-weight:      bold;
}

.my-bread-crumb li:after{
  content:          ">";
  padding:     		0.3rem;
}

.my-bread-crumb li:last-child:after{
  content:          "";
}

.my-bread-crumb li a {
  text-decoration: none;
  color:           #52b5ee;
}

.my-bread-crumb li a:hover {
  text-decoration: underline;
}
/* 0101 --->*/

Menuリスト

/*<--- 0102 */
my-menu-list{
  padding:     0rem;
  margin:      0rem;
}

.my-menu-list li{
  display:          inline;
  list-style:       square-button;
  border-style:		solid;
  border-radius:	1rem;
  font-size:        1.5rem;
  font-weight:      bold;
  padding:			0.3rem;
}

.my-menu-list li a {
  text-decoration: none;
}

.my-menu-list li a:hover {
  text-decoration: underline;
}
/* 0102 --->*/

記事一覧

/*<--- 0103 */
my-link-list{
  padding:     0rem;
  margin:      0rem;
}

.my-link-list li{
  display:          block;
  list-style:       none;
  font-size:        1.5rem;
  font-weight:      bold;
  padding:			0.3rem;
}

.my-link-list li a {
  text-decoration: none;
}

.my-link-list li a:hover {
  text-decoration: underline;
}
/* 0103--->*/

エディタブロック

CSS分類コード：05xx
WordPressのエディタ　ブロックをカスタマイズします。

コードブロック

/*<--- 0501 */
.my_code_block{
  border:			3px solid #006400;
  padding:			1rem;
}
/* 0501 --->*/

画像ブロック

/*<--- 0502 */
.my_img_block{
  border:			2px solid #000000;
  padding:			1rem;
}
/* 0502 --->*/

メールアドレス：

お問合せ・御要望

お問合せ