−リスト−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

リストの中央寄せ

ULタグはブロック要素なので、リストを横並びにして、尚且つ中央寄せする場合リストをインライン要素にするとよい！

display を使ったliの中央寄せ。これすごい！
http://taneppa.net/display-inline-block/

【 CSS 】
.testUL{text-align:center;}
.testUL li{display: inline-block;}

左右に余白がつくけど。　flort　で横並びにするよりいいかも！！！！便利です。

リストの種類

list-style-type:none;

disc	黒丸	●
circle	白丸	○
square	四角	■
lower-alpha	アルファベットの小文字	a,b,c,
upper-alpha	アルファベットの大文字	A,B,C,

list-style-position:outside;

• outside・・・ボックスの外側に表示（通常はこっち）
• inside・・・　内側に表示

【 CSS 】
.testUL{
	list-style-position:outside;
	margin-left:-20px;
	_margin-left:20px; #IE6用
}



OLタグで数字を丸文字にする方法

/* --------------------------
    OLスタイル
-------------------------- */ 
.content_ol ol {
  counter-reset:num;
  list-style-type: none!important;
  padding:0;
  margin:0;
}
.content_ol ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.content_ol ol li:before {
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display:inline-block;
  background:transparent;
  border:#555 1px solid;
  color: #555;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  font-size: 12px;
  border-radius: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  top: 8px;
}

.li-btm{margin-bottom:20px;}

なぜだかIE6以上のリストタグは右にズレて表示されるようになった。 なので、margin-left　で30px前後右にズラす必要がある。

マウスオーバー

【 HTML 】
ul#menu_list {list-style-type: none;}
ul#menu_list li {float: left;}


【 CSS 】
<ul id="menu_list">
	<li><img src="./img/button/btn02.jpg" alt="宝石買取専門店【一宝】" width="367" height="84" /></li>
	<li><a href="delivering.html"><img src="./img/button/btn03.jpg" alt="宅配買取" width="140" height="84" onmouseover="this.src='./img/button/btn033.jpg'" onmouseout ="this.src='./img/button/btn03.jpg'" /></a></li>
	<li><a href="business.html"><img src="./img/button/btn04.jpg" alt="出張買取" width="140" height="84" onmouseover="this.src='./img/button/btn044.jpg'" onmouseout ="this.src='./img/button/btn04.jpg'" /></a></li>
	<li><a href="shop.html"><img src="./img/button/btn05.jpg" alt="店頭買取" width="153" height="84" onmouseover="this.src='./img/button/btn055.jpg'" onmouseout ="this.src='./img/button/btn05.jpg'" /></a></li>
</ul>

リストの一番上の線を消す

• メニュー1
• メニュー2
• メニュー3
• メニュー4
• メニュー5

【 CSS 】
#menulistUL{
	_zoom: 1;
	overflow:hidden;
}
#menulistUL li{
	margin-top:-2px;#ここの数値はborderの線の太さと同じにする
	border-top:solid 2px #000000;
}

リストのボタン化

• menu
• menu
• menu
• menu

display: block; を入れると間が詰まって、キレイに並ぶ。

【 CSS 】
#menulistUL2{list-style-type:none;}
#menulistUL2 a{
	background-color:#006600;
	color:#FFFFFF;
	text-decoration:none;
	display: block;
	padding:10px 0px;	
}
#menulistUL2 a:hover{background-color:#113366;}
#menulistUL2 li{border-bottom:solid 2px #003300;}

ページ送りナビゲーション風なリスト

• TOPページ
• 会社概要
• コミックナビ
• お問い合せ

【 CSS 】
#menulistUL3 li{
	list-style-type:none;
	display: inline;
}
#menulistUL3 a{
	text-decoration:none;
	background-color:#000000;
	color:#FFFFFF;
	display:inline-block;
	padding:10px;
}

基本のテキスト

【 HTML 】
<nav><ul>
	<li><a href="#"><img class="circle-image" src="<?php echo get_template_directory_uri(); ?>/img/iconnav1.png" alt="icon" /><span>TOPPAGE</span><br />トップページ</a></li>
	<li><a href="#"><img class="circle-image" src="<?php echo get_template_directory_uri(); ?>/img/iconnav2.png" alt="icon" /><span>LOHAS</span><br />クリーン＆ケア</a></li>
	<li><a href="#"><img class="circle-image" src="<?php echo get_template_directory_uri(); ?>/img/iconnav7.png" alt="icon" /><span>DELIVERY</span><br />デリバリー</a></li>
	<li><a href="#"><img class="circle-image" src="<?php echo get_template_directory_uri(); ?>/img/iconnav3.png" alt="icon" /><span>CLEANING</span><br />匠抜き</a></li>
	<li><a href="#"><img class="circle-image" src="<?php echo get_template_directory_uri(); ?>/img/iconnav9.png" alt="icon" /><span>REFORM</span><br />衣類のお直し</a></li>
	<li><a href="#"><img class="circle-image" src="<?php echo get_template_directory_uri(); ?>/img/iconnav5.png" alt="icon" /><span>COMPANY</span><br />会社概要</a></li>
	<li><a href="#"><img class="circle-image" src="<?php echo get_template_directory_uri(); ?>/img/iconnav4.png" alt="icon" /><span>RECRUIT</span><br />採用情報</a></li>
</ul></nav>



【 CSS 】
/* --------------------------

    グローバルナビ設定

-------------------------- */
nav{
	border-top:solid 1px #e6e6e6;
	border-bottom:solid 1px #e6e6e6;	
}
nav ul{
	width:1100px;
	margin-left:auto;
	margin-right:auto;
	display:table;
	border-right:solid 1px #e6e6e6;
	font-size:80%;
	line-height:140%;
}
nav ul li{
	display:table-cell;
	border-left:solid 1px #e6e6e6;
}
nav ul img{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2px;
}
nav ul span{
	font-weight:bold;
	font-size:120%;
}
nav ul a{text-decoration:none; display:block; padding:10px 0px;}
nav ul a:link{color:#a3a3a3;}
nav ul a:visited{color:#a3a3a3;}
nav ul a:hover{color:#a3a3a3; background-color:#EEEEEE; }
nav ul a:active{color:#a3a3a3;}

nav ul a:link span{color:#333333;}
nav ul a:link span{color:#333333;}
nav ul a:visited span{color:#333333;}
nav ul a:hover span{color:#333333;}
nav ul a:active span{color:#333333;}


/*画像を回転させる*/
.circle-image {
  transition: 1.0s;
}
a:hover .circle-image {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transition: transform 0.2s ease-out;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
}

プルダウンメニュー

【 HTML 】
<nav id="head"><ul class="menu">
	<li><a href="https://pettaxi.pro/"><img class="img_center" src="<?php echo get_template_directory_uri(); ?>/img/iconnav1.png" alt="icon" /><span class="st1">トップページ</span><br /><span class="st2">toppage</span></a></li>
	<li class="menu_single"><a href="https://pettaxi.pro/siten" class="init-bottom"><img src="<?php echo get_template_directory_uri(); ?>/img/iconnav6.png" alt="icon" /><span class="st1">各支店・料金表</span><br /><span class="st2">siten</span></a>
		<ul class="menu_second-level">
			<li><a href="https://pettaxi.pro/siten">東京・千葉支店</a></li>
			<li><a href="https://pettaxi.pro/siten">名古屋・浜松支店</a></li>
			<li><a href="https://pettaxi.pro/siten">大阪・和歌山支店</a></li>
		</ul>
	</li>
	<li><a href="https://pettaxi.pro/kyuukyuu"><img src="<?php echo get_template_directory_uri(); ?>/img/iconnav2.png" alt="icon" /><span class="st1">夜間ペット救急搬送</span><br /><span class="st2">kyuukyuu</span></a></li>
	<li><a href="https://pettaxi.pro/kameiten"><img src="<?php echo get_template_directory_uri(); ?>/img/iconnav3.png" alt="icon" /><span class="st1">加盟店募集</span><br /><span class="st2">kameiten</span></a></li>
	<li><a href="https://pettaxi.pro/cleaning"><img src="<?php echo get_template_directory_uri(); ?>/img/iconnav4.png" alt="icon" /><span class="st1">ブログ</span><br /><span class="st2">blog</span></a></li>
	<li><a href="https://pettaxi.pro/blog"><img src="<?php echo get_template_directory_uri(); ?>/img/iconnav5.png" alt="icon" /><span class="st1">会社概要</span><br /><span class="st2">campany</span></a></li>
</ul></nav>


【 CSS 】
/*-----headerナビ---------*/
nav#head{
	/*border-top:solid 1px #e6e6e6;*/
	/*border-bottom:solid 1px #e6e6e6;*/
	background-color:#ff6a00;	
}
nav#head ul{list-style:none;}
nav#head ul a{text-decoration:none; display:block;}
nav#head ul a:link{color:#FFFFFF;}
nav#head ul a:visited{color:#FFFFFF;}
nav#head ul a:hover{color:#ffffb8; background-color:#feb811; }
nav#head ul a:active{color:#FFFFFF;}

nav#head ul a:link span.st1{color:#FFFFFF;}
nav#head ul a:visited span.st1{color:#FFFFFF;}
nav#head ul a:hover span.st1{color:#ff6a00;}
nav#head ul a:active span.st1{color:#FFFFFF;}

nav#head ul a:link span.st2{color:#ffffb8;}
nav#head ul a:visited span.st2{color:#ffffb8;}
nav#head ul a:hover span.st2{color:#FFFFFF;}
nav#head ul a:active span.st2{color:#ffffb8;}


.menu {
    position: relative;
    width: 100%;
    height: 100px;
    max-width: 1100px;
    margin: 0 auto;
	list-style:none;
}

nav#head img{
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:-30px;
	padding-top:10px;
}

.menu > li {
    float: left;
    width : -webkit-calc(100% / 6) ;
	width : calc(100% / 6) ;
    height: 100px;
    line-height: 100px;
    background: rgb(255, 106, 0);
}

.menu > li a:hover {
    height:100px;
	/*padding:0px;*/
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
.menu > li:hover {
    background: #072A24;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu__second-level li {border-top: 1px solid #111;}


/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {clear: both;}
.menu {*zoom: 1;}
.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 100px;
    width: 100%;
    background: #072A24;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
    top: 100px;
    visibility: visible;
    opacity: 1;
}

.st1{
	font-size:1.1em;
	font-weight:bold;
}

.st2{
	display:block;
	font-size:85%;
	margin-top:-80px;
	color:#ffffb8;
}

リストのテーブル化

<nav class="globNav-row">
<a>HOME</a>
<a>メニュー１</a>
<a>メニュー２</a>
<a>メニュー３</a>
</nav>


.globNav-row{
 display: table;
 width: 100%;
}
 
.globNav-row > a{
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

横並びのリスト

ul li 全体ではなく、li一つ一つにclassをつけてfloatをかけるのがポイント！

<nav>
<label for="Panel34"><h2>メニュー</h2></label>
<input type="checkbox" id="Panel34" class="on-off" />
<ul>
	<li class="menu1"><a href="#menu">TOPページ</a></li>
	<li class="menu2"><a href="#menu01">めざすもの</a></li>
	<li class="menu2"><a href="#menu02">講座・セミナー</a></li>
	<li class="menu2"><a href="#menu03">無料メルマガ登録</a></li>
	<li class="menu2"><a href="#menu04">お問い合わせ</a></li>
</ul></nav>


【CSS】
nav{
	font-size:120%;
}
nav ul{
	list-style:none;
	background-color:#ffcccc;
	text-align:center;
}
nav ul li.menu1 {border:solid 1px #31a86f; float:left; border-top:none; border-bottom:none;}
nav ul li.menu2 {border:solid 1px #31a86f; float:left; border-top:none; border-bottom:none; border-left:none; }
nav a{
	display:block;
	width:218px;
	text-decoration:none;
	color:#FFFFFF;
	padding:10px 0px;
}
nav a:hover{
	background-color:#31a86f;
}
nav a:link{color:#FFFFFF;}
nav a:visited{color:#FFFFFF;}
nav a:hover{color:#FFFFFF;}
nav a:active{color:#FFFFFF;}

プルダウンリスト-最新情報

【CSS】
.menu-menu-container{
	position:absolute!important;
	left: 0;
	right: 0;
	margin: auto;
	z-index:100;
}
header{margin-bottom:12px;}
#head-navi{
	width:1000px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	display: -webkit-flex;
	display: flex;
	align-items:flex-start;
	justify-content: space-between;
	margin-top:-25px;
}
#head-navi li{
	width : -webkit-calc(100% / 6 - 2px) ;
	width : calc(100% / 6 - 2px) ;
	background-color:#023a8c;
	margin:0px 2px 20px 0px;
}
#head-navi a{
	text-decoration:none;
	color:#FFFFFF;
	display:block;
	transition: .4s;
	padding:5px 3px;
}
#head-navi a:link{color:#FFFFFF;}
#head-navi a:visited{color:#FFFFFF;}
#head-navi a:hover{color:#FFFFFF; background-color:#0068ff;}
#head-navi a:active{color:#FFFFFF;}

header ul{list-style:none;}

/*sub-menu*/
.sub-menu{
	display:none;
	transition: .4s;
}
.sub-menu li{
	width :100%!important;
	margin:0px!important;
}
.menu-item-has-children:hover .sub-menu{
	display:block;
}

プルダウンリスト

visibility: hidden;/*ボックスを隠す*/ と　visibility: visible;/*ボックスを出す*/　これがすごい！！！

【HTML】
<ul class="menu_nav">
	<li><a href="#">トップ画面</a></li>
	<li class="menu_single"><a href="#">案件管理　<i class="fas fa-angle-down"></i></a>
		<ul class="menu_single_level">
			<li><a href="#">案件登録画面</a></li>
			<li><a href="#">配布員設定画面</a></li>
			<li><a href="#">作業状況入力画面</a></li>
			<li><a href="#">請求書作成画面</a></li>
			<li><a href="#">入金状況入力画面</a></li>
		</ul></li>
	<li><a href="#">支払管理</a></li>
	<li class="menu_single"><a href="#">マスタ管理　<i class="fas fa-angle-down"></i></a>
		<ul class="menu_single_level">
			<li><a href="#">得意先登録</a></li>
			<li><a href="#">配布員登録</a></li>
			<li><a href="#">配布禁止エリア登録</a></li>
		</ul></li>
	<li class="logout"><a href="#">ログアウト</a></li>
</ul>


【CSS】
/*--------------------------------------------------------
ナビゲーション―プルダウンメニュー
--------------------------------------------------------*/
/*基本一定*/
.menu_nav a{text-decoration:none;}
.menu_nav {
    position: relative;
    width: 100%;
    height: 30px;
}
.menu_nav > li, .menu_single_level{width:170px;}/*メニューの画面幅*/
.menu_nav > li:hover, .menu_single_level{background: #29abe2;}


.menu_nav > li {
    float: left;
    height: 30px;
    line-height: 30px;
	background-color:#16559b;
	text-align:center;
}
.menu_nav > li a {
    display: block;
    color: #fff;
}

/*マウスオーバー*/
.menu_nav > li a:hover {/*乗ったら・・色変更*/
    color: #000000;
}
.menu_nav > li:hover {/*マ乗ったらゆっくり背景色変更*/
    -webkit-transition: all .5s;
    transition: all .5s;
}

/*サブリンク設定*/
.menu_single_level {/*サブリンクを非表示*/
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
.menu_single_level{
    position: absolute;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
	text-align:left;
	font-size:100%!important;
}

.menu_single:hover .menu_single_level{
    visibility: visible;
    opacity: 1;
}
.menu_single_level li {
    border-top: 1px solid #FFFFFF;
}
.menu_single_level li a:hover {
    background: #eaecf9;
}
.menu_single_level li a{padding:0px 5px;}