＊CSSで要素を縦の中央揃えにする方法です＊

横方向の中央配置テクニックは頻繁に使うので、既にやり方を知っている人も多いと思います。

しかし縦方向の中央配置は、時々必要になるという程度なので、やり方を詳しく知らなかったり、うろ覚えだったりしますよね。

今回はなるべく簡単で応用が効く縦の中央揃えの方法をご紹介します。

＊HTML：ブロックレベル要素とインラインレベル要素の違いについてです

2021年11月時点で最新のHTML5では、ブロックレベル・インラインレベルで要素が分けられている…というわけではありません。

ですが、CSSのdisplayプロパティではblockやinlineという値がありますし、ブロックレベル要素とインライン要素があると考えた方がわかりやすい場合も多いです。

ということで、HTMLのブロックレベル要素とインラインレベル要素について解説していきます。

＊CSSの擬似要素についての記事です＊

プログラムではないCSSでは本来、要素を作り出すという命令は出せません。

しかし擬似要素という仕組みを使うことで、CSSでも擬似的な要素を生成し、HTMLファイルを編集することなくテキストを付け足したり、画像を挿入したりすることができます。

やや扱いが難しい擬似要素ですが、基礎からしっかり解説していきます。

＊HTML：リストの挿入についてです

グローバルメニューや、ブログの目次など、Webサイト制作では「情報をリストで表したい」という場合があります。

そこで今回は、HTMLでリストを挿入するタグと方法について解説していきます。

リストの挿入は決して難しいものではありませんが、入れ子（ネスト）にする場合などは少し注意が必要です。

＊CSSでマウスオーバーアクションを実装する方法です＊

クリックできるボタンにマウスポインタが乗っかった時、ボタンが光ったり、色が変わったりするのを見たことがある人も多いと思います。

これは、ただ単におしゃれとかカッコイイとかだけではなく、クリックできることが分かりやすいようにという、UIとしての役割も果たしています。

UI設計にも欠かせない、マウスオーバーアクションをマスターしていきましょう！

＊HTMLの見出しの挿入についてです

SEO対策としても重要と言われる見出しタグ（h1〜h6）ですが、重要なタグである分様々な情報が飛び交っていて、結局どう使えば良いのか悩んでしまいやすいタグでもあります。

そこで今回は、初心者が悩まなくて済む、基本的な見出しタグの使い方について紹介していきます。

＊CSSで画像を白黒にする＋さらに加工する方法です＊

風景や人物の画像を白黒にすることで、ノスタルジーな雰囲気を醸し出すデザインテクニックは、雑誌やポスターでもよく見かけます。

こういったテクニックはもちろんWebサイトでも有効ですが、問題は画像を白黒にする方法ですよね。

実は画像編集ソフトに頼らずとも、なんとCSSだけでも簡単にできます。

その他、画像加工のテクニックなどもお伝えします。

＊HTMLの表の挿入についてです

会社概要や店舗の営業日・時間など、Webページに掲載する内容を表でまとめたい場合も多々あります。

そんな時に活躍してくれるのが、HTMLのtableタグとそれに関連するタグです。

今回は、HTMLに表を挿入することができる、table・tr・th・tdタグについて紹介していきます。

＊CSSでストライプ柄を作る方法です＊

PhotoshopやIllustratorで画像を作成する時にもよく使われる「ストライプ」（しましま模様）ですが、CSSでもストライプ柄を作ることが可能です。

背景がベタ塗りばかりだと、色やデザインによっては重たいイメージや単調なイメージになりがちですが、ストライプを取り入れることでデザインにアクセントや変化を加えることができます。

＊Webページの基本構造についてです

Webページは様々なブロック・パーツから成り立ちますが、基本的な構造はだいたい決まっています。

今回はheader・footer・mainタグを紹介しながら、Webページの基本的な構造について説明していきます。