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

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

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

＊JavaScriptでデータを格納・確認する方法についてです＊

JavaScriptでは様々なデータを取り扱うことが可能です。
その第一歩として、まずはデータを定数/変数と呼ばれる入れ物に格納し、格納したデータを確認することから始めてみましょう！

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

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

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

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

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

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

＊JavaScriptのコードを記入する場所について＊

JavaScriptを動かしてみたいと思っても、どこにコードを書いたら良いのかがわからないとできませんよね。

サンプルプログラムを書き込んだりする前に、まずはコードの記入場所や位置について学んでいきましょう！

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

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

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

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

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

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

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

＊JavaScriptの概要についてです＊

JavaScriptはWebページに動きや機能をつけることができるプログラミング言語です。

この記事では、そもそもプログラムとは？という基本的なところから解説していきます。

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

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

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

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

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

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

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

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

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