コーディング

CSSで2カラムや3カラムのデザインを作る方法はいくつもあり、細かな要望によって最適な方法は異なるため多くの方法を知っておくに越したことはありません。この記事ではその中でも扱いやすく出番の多い4つの方法をご紹介します。

メニュー項目が多すぎる場合や、ファーストビューで全項目を見れるようにしたい場合、長い注釈を入れたい場合などに便利な「折りたたみメニュー」。実はHTMLで簡単に実装できてしまいます。

表を作成する際に使用するtableタグですが「表の大きさを調整したい」「セルの大きさを変えたい」「文字を中央寄せにしたい」など細やかな悩みが付きものです。こういったレイアウトやデザインの悩みを解決してくれるCSSのプロパティを特集してみました。

画像を中央揃えにしようと、img要素「text-align: center;」や「margin: auto;」を適用して「あれぇ～？効かねぇぞぉ？」ってなったことのある方は少なくないのではないでしょうか。この記事では解決法と、そもそも何故前述の方法では中央揃えにできないのかを解説します。

マニュアルやノウハウなどの記事はボリュームが大きいだけに縦長になってしまいがちです。そういった記事の頭に目次があればユーザーは記事全体の概要を把握しやすく、特定の内容のみ読みたい場合にも該当箇所にスムーズに遷移できます。HTMLで簡単に実装できたのでまとめてみました。

名前が似ている疑似要素と疑似クラスですが、具体的に何がどう違うのか。また、どんな疑似要素と疑似クラスがあり、どのような表現ができるのかをご紹介します。

見出しタグの頭やフロー図などを書き込む際の矢印など、絶妙な使い勝手の良さがある三角形。当サイトでもフロー図の矢印がわりに三角形を使うことにしたので、サイトの表示速度のことも考えて画像を使わずにCSSで表示させてみました。