今回はjQueryを使わずに、CSSだけでアコーディオンをサクッと実装する方法を紹介します。どれもレスポンシブ対応です。なお、後半では矢印アイコン付きのものも載せています。コピペして使って頂いてOKです。

今回はCSSの便利なセレクタを一挙にまとめていきます。セレクタをマスターしておくと、効率的なCSSを書くことができ後々ラクになるはずです。

右端に表示されるもの 上の画像の枠内が、”パネル”が表示されているところです。この部分で画像編集を効率化するための様々な機能を実行することができます。パネルにはたくさんの種類があります。たとえば、書式設定を変えるもの、画像の色調補正をするものなどがあります。 2. パネルの基本的な使い方 まず、基本的なパネルの操作方法を覚えましょう。すでに知っているという方は、読み飛ばして頂ければと思います（3.おすすめの配置へスライド） 2-1.パネルメニューを表示 パネルメニューでもろもろの設定ができます。表示するときには、各パネルの右上にある「▼≡」をクリックしましょう。 2-2.不要なパネルを消す（非表示に） 不要なパネルがある場合、作業スペースをスッキリさせるために非表示にしましょう。非表示にする方法は、パネルメニュー内の「閉じる」をクリックするだけです。 2-3.表示されていないパネルを表示さ

今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え

この記事では、HTMLとCSSで要素を中央配置する方法をパターン別に紹介していきます。縦方向と横方向それぞれの方法を全てまとめます。また「中央寄せできない」というときの対処法もパターン別にまとめておきます（スキップする）。 横センタリング（左右中央寄せ） まずは、横方向に中央寄せする方法を見ていきましょう。 その1：文章を中央揃え 文章を左右中央に揃えたいときは、その文章が含まれる要素、もしくはその親要素に対してtext-align:centerを指定します。