＊【CSS】要素の表示⇔非表示の切り替えについてです＊

要素の非表示自体はdisplayプロパティなどで簡単にできますが、アニメーションにして表示と非表示を切り替えたい場合などは注意が必要です。
opacityとvisibilityの違いなどについても解説しています。

＊改行（br要素）の注意点についてです＊

brタグの挿入で改行ができることは、コーダーでなくとも知っている人が多いのではないかと思います。
使い方もタグを挿入するだけなので、とても簡単です。

ですが簡単であるがゆえに、無意識的に適切ではないbr要素の使い方をしてしまうことも…！？
今一度、br要素の注意点について確認していきましょう。

＊【CSS】画像の形に合わせてテキストの回り込ませる方法です＊

画像とテキストを横並びにすると、通常であれば四角形の枠で区切られて規則正しく画像とテキストが並べられます。
規則正しいレイアウトは見やすいのですが、面白みに欠けて退屈な印象を与えてしまうことも…。

そこで、画像の形（丸とか色々）に合わせてテキストを回り込ませる、ちょっとオシャレなレイアウトを実装する方法をご紹介します！

＊picture要素とそれに関連する要素・属性についてです＊

スマホとPCで表示画像を切り替えたいケースは多いと思います。
今回は、必要ない画像は読み込まないようにしつつ、表示画像をデバイス（ブラウザ）幅に合わせて切り替える方法をご紹介します。

CSSを使うことなく、HTMLだけで簡単に切り替え設定ができますよ！

＊【CSS】マウスカーソルを変更する方法＊

ボタンなどクリックできるオブジェクトの上にマウスカーソルが乗っかった時に、マウスカーソルが指指しの形に変わると、「これはクリックできるものだ」と直感的に分かります。

このように、状況に応じてマウスカーソルを変更することはUIの改善にもつながるので、ぜひ覚えておきたいテクニックです。

＊srcset/sizes属性についてです＊

Webページがスマホから閲覧される場合、画面が小さいので大きなサイズの画像は必要ありません。

一方、PCは画面が大きいので画像サイズも大きい（高画質である）ものが良いと言えます。
このようにデバイスによって適切なサイズの画像を自動で切り替えてくれるのが、srcset/sizes属性です。

＊CSSだけで作れる見出しデザインのサンプル集です＊

Webデザインで意外と難しいのが「見出しデザイン」ではないかと思います。

文字を大きくして太字にするだけだとちょっと地味ですし、テキストシャドウをかけたりしてみても何か違う…となりがちです。

そこで今回は、CSSだけで作成可能な見出しデザインを9種類ほど用意してみました！

＊ファイルのURL指定方法についてです

HTMLのimgタグやlinkタグでは画像ファイルやCSSファイルを読み込むために、ファイルのURLを指定する必要があります。

ファイル名やURLの指定方法が間違っているとファイルが読み込まれないので、URLの指定方法はしっかり押さえておきましょう！

＊基本的なCSSアニメーションの実装方法についてです＊

アニメーションというと、細かいプログラムが必要なのではないかと身構えてしまう方もいるかもしれませんが、シンプルなアニメーションであればごく単純なCSSで実装することが可能です。

他のCSS調整と違った複雑さや難しさが全くないとは言いませんが、イメージだけで「自分には無理そう…。」と思い込んでしまうのはもったいないです。

この記事ではCSSアニメーションの基本に的を絞って、余計な情報を省いて必要なポイントだけお伝えしていきます。

シンプルなアニメーションであれば、この記事の内容を把握しておくだけOKです。

＊HTML：articleタグとsectionタグの使い分けについてです

HTMLはマークアップ言語であり、タグはWebページコンテンツの役割や意味を明確にするためのものです。

しかし、マークアップの対象の違いが分かりづらいものも中にはあります。その代表が、articleタグとsectionタグではないでしょうか？

より分かりやすい構造のHTMLを作成できるよう、両者の違いについてあらためて確認していきましょう！