中東の砂漠沿いの道から見た景色

ブログ詳細記事ページSEO対策と集客に強いWeb制作の
FMP

群馬県栃木県埼玉県東京都神奈川県長野県新潟県茨城県千葉県のWeb制作。
検索エンジン最適化を施したコーディング実装をいたします。

群馬県桐生市のWebクリエーターFREEMAKE-Productionの ブログ記事詳細ページです。
SEO対策に強いホームページ作成ならFMP。お客様のこだわりとわがままを叶えるWeb制作。検索順位対策やWeb広告運用、テンプレート格安制作など、柔軟に対応いたします。繁忙期のWeb制作会社やデザインは自社できる企業、デザイナー様向けのコーディング代行も承ります。FMP にご相談ください。お見積もりは無料ですので、お気軽にご連絡ください。

2019.03.10 web制作

web制作のコーディングスニペット。脱jQuery。cssのみで、入れ子のリストアコーディオン。要素の高さ可変対応。

脱jQuery。当方のコーディング は、バージョン3系のjQueryを使用し、モバイルの3g環境の読み込み速度5秒以内で施工しておりますが、「早ければ早いほうが良い」ので処理速度を突き詰める為に、jQueryを使用しない方向にシフトして行こうと思っています。

とりあえず、タイトルにあるように、CSSのみでアコーディオンリストを作ってみました。入れ子構造は、いくらでも深くできます(z-indexと色の調整はしてください)。

【HTML(imgやaのリンクは書き換えてください。クリックポイントは画像にしています。)】↓

<div id=”cate_select”>
<ul>
<b>>をクリックすると詳細が展開。</b>
<li>
<input type=”checkbox” id=”toggle01″ />
<span>
<label for=”toggle01″>
<img src=”../images/shop/top/sankaku-01.png” alt=”” />
</label>
<a href=”../shop/catalog/4/”>祖父アイテム1</a>
</span>
<ul>
<li>
<input type=”checkbox” id=”toggle01-01″ />
<span>
<label for=”toggle01-01″>
<img src=”../images/shop/top/sankaku-02.png” alt=”” />
</label>
<a href=”../shop/catalog/5/”>親アイテム1 </a>
</span>
<ul>
<li>
<span>
<a href=”../shop/catalog/9/”>子アイテム1 </a>
</span>
</li>
<li>
<input type=”checkbox” id=”toggle01-01-02″ />
<span>
<label for=”toggle01-01-02″>
<img src=”../images/shop/top/sankaku-03.png” alt=”” />
</label>
<a href=”../shop/catalog/10/”>子アイテム2 </a>
</span>
<ul>
<li>
<span>
<a href=”../shop/catalog/11/”>孫アイテム1 </a>
</span>
</li>
<li>
<span>
<a href=”../shop/catalog/13/”>孫アイテム2 </a>
</span>
</li>
<li>
<span>
<a href=”../shop/catalog/14/”>孫アイテム3 </a>
</span>
</li>
<li>
<span>
<a href=”../shop/catalog/15/”>孫アイテム4 </a>
</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div> <!– /cate_select –>

【CSS】↓

div#cate_select b {
color: #F00;
font-size: 18px;
font-weight: 400;
}

div#cate_select > ul {
background-color: rgba(157,136,131,0.2);
padding: 18px;
}

div#cate_select > ul > li > ul {
background-color: rgba(80,173,180,0.4);
}

div#cate_select > ul > li > ul > li > ul {
background-color: rgba(80,173,180,0.4);
}

div#cate_select > ul > li > ul > li > ul > li > ul {
background-color: rgba(80,173,180,0.4);
}

div#cate_select > ul li:before {
display: none;
}

div#cate_select ul li input {
}

div#cate_select > ul > li {
margin-bottom: 18px;
}

div#cate_select > ul > li span {
display: block;
padding: 0px 15px;
}

div#cate_select > ul > li > span {
background-color: rgba(80,173,180,0.3);
padding: 10px 15px;
}

div#cate_select ul li {
-webkit-transition: all 1s;
transition: all 1s;
}

div#cate_select ul li label {
margin: 0;
padding: 0;
width: 50px;
height: 50px;
transition: all 0.3s;
border-radius: 50%;
}

div#cate_select ul li label:hover {
background-color: #50ADB4;
}

div#cate_select ul li label img {
}

div#cate_select ul li span {
overflow: hidden;
letter-spacing: -0.5em;
}

div#cate_select ul li span label {
display: inline-block;
vertical-align: middle;
}

div#cate_select ul li span a {
display: inline-block;
vertical-align: middle;
}

div#cate_select ul li span label+a {
width: calc(100% – 50px);
}

div#cate_select > ul > li > span a {
}

div#cate_select > ul > li a {
color: #fff;
letter-spacing: 0.5em;
font-size: 18px;
}

div#cate_select > ul li > ul {
visibility: hidden;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
padding-top: 0;
padding-bottom: 0;
height: 0;
}

div#cate_select input {
display: none;
}

div#cate_select input:checked ~ span label img {
transform: rotate(90deg);
}

div#cate_select input:checked ~ ul {
opacity: 1;
visibility: visible;
height: auto;
}

div#cate_select > ul li > ul > li {
line-height: 0;
opacity: 0;
visibility: hidden;
transition:
line-height .3s ease-out,
opacity .1s linear,
visibility .1s linear;
}

div#cate_select > ul input:checked ~ ul li {
line-height: 1.5;
opacity: 1;
visibility: visible;
transition:
line-height .3s ease-out,
opacity .1s linear .1s,
visibility .1s linear .1s;
}

div#cate_select > ul > li > ul > li a {
padding: 10px 0;
display: inline-block;

}

div#cate_select > ul > li > ul > li a:first-child {
padding-left: 19px;
margin-left: 47px;
letter-spacing: 2px;
}

div#cate_select > ul > li > ul > li a:first-child:before {
content: “・”;
margin-left: -33px;
}

div#cate_select > ul li {
position: relative;
}

div#cate_select > ul > li {
z-index: 2;
}

div#cate_select > ul > li > ul > li {
z-index: 1;
}

div#cate_select > ul > li > ul > li > ul > li {
z-index: 0;
}

チェックボックスを使えば、CSSだけでクリックイベントの実装ができます。

「要素をクリックした時に、他の要素のアコーディオンは閉じる」みたいな動きは、javascriptを使わないとできません。

ブラウザのwidthやheightを取得する、スクロールイベント、セレクタコントロールをjavascriptで、他のアニメーションはcss3で制御する方法が良さそうです。

cssは、メンテナンス性を重視した書き方をしますが、なるべく行数は少なくしています。

もちろん画像サイズの最適化もしています。

フォントフェイスの読み込みに、eotファイルを除外し、「font-display: swap;」を追記するなど、タイミングに合わせて(ブラウザの対応状況など鑑みて)仕様のアップデートを行っています。

日本のサイト(4g環境だけ)の場合、ある程度リッチなエフェクトを実装していても(amp化しなくても)十分な速度が出せます。

スピードの足切りだけでなく、amp化がseoのランキングの要件に入るようなことがあれば(もしくはクリック率が大きく変わるというような統計情報などが見られるようになれば)、すぐに導入しようと思っています。

フロントの技術を追いかけるのは大変ですが、最低限必須なことは取りこぼしなくやって行きたいと思っています。

LINEで送る
Pocket

【出張可能な地域】

記載のない地域は、メール、電話、skypeなどでの打ち合わせを基本といたします。

群馬県
栃木県
埼玉県

【オンライン打合せ地域】

重要事項のみ出張して打ち合わせに伺います。

最新実績PORTFOLIO

PORTFOLIO Web制作実績一覧を見る >
ページトップに推移する上矢印と丸ボタン