PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。 それにはslickのオプションを使ってブレイクポイントを指定すれば、スライドの表示枚数を変えることが出来ます(ブレイクポイントは複数指定できます) 今回はコピペ可能なコードとデモを使って解説していきます。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
ホームページの「よくある質問」などでよく使うアコーディオン。 カスタマイズしやすいように最低限のコードに絞って残します。 CSSのみで作る方法などを見かけますが、 なるべく余計なコードを書きたくないのでjQueryとのセットがおすすめ。 今回は2パターン作りますが、クリックアイコンのデザインが違うだけで開閉の仕組みはほぼ同じです。 1. プラスマイナスアイコンのアコーディオン 2. 矢印アイコンのアコーディオン プラスマイナスアイコンのアコーディオン プラスアイコンをクリックすると、隠れていた内容が表示され、マイナスアイコンに変わるアコーディオンです。 See the Pen rNjQePY by kei (@momoi) on CodePen. 重要部分のみ抜粋。 <ul class="ac"> <li> <div class="ac-label"> <p>Label</p> <div
スマホで現れるハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニューを遠くから見ると「三」のように見えるからだろう. ちなみに「三」を押すと「×」に表示が切り替わって「閉じる」ボタンのようになる. 「三」が「開く」で「×」が「閉じる」になるわけだ. ここではこのハンバーガーメニューの css のみでの作り方を紹介・解説する. つまり,javascript (jQuery も当然含む) を使わずに実装する方法をサンプルコード付きで掲載する. jQuery は読み込まないで済むならその分,重くなるので読み込みたくないし,javascript を使わずとも実現できるものは使わずに実現したい. javascript を使わない css のみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く