2016年11月7日(月)
[CSS]レスポンシブ対応、高さ可変のアコーディオンをピュアCSSで実装するテクニック
* {
box-sizing: border-box;
}
.block > div{
margin: 0;
padding: 0;
}
.block {
max-width: 400px;
width: 100%;
height: 100%;
float: left;
padding: 15px;
z-index: 10;
background-color: white;
overflow: hidden;
}
@media screen and (max-width: 599px) {
.block {
max-width: 100%;
}
}
.block > div {
display: block;
position: relative;
padding: 0 0 0 35px;
border-bottom: 1px solid white;
background-co...
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
商用利用無料!質感アップに効果的な透過で利用できるテクスチャ素材のまとめ -Transparent Textures
NEXT ›
ecbeing スマホアプリ不要の「動画自動再生機能」提供開始
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『[CSS]レスポンシブ対応、高さ可変のアコーディオンをピュアCSSで実装するテクニック』についてまとめています。
この記事は特にレスポンシブ・アニメーションについて書かれており、 HTML+CSSコーディング、スマホ対応のカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。