コーディング

tableタグを使う時に便利なCSSのプロパティ12選

table_css_mini

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

CSSで画像を中央揃えにする2つの方法

image_center_mini

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

HTMLタグのページ内リンクで目次やメニューを作成

html_internal_page_links_mini

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

CSSの疑似要素、疑似クラスとは

psedo_class_pseudo_element_mini

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

画像を使わずにCSSだけで三角形を表示する方法

css_triangle_mini

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