ProgText – プログラミング学習のWeb教材

このサイトは、プログラミングの基本的なことから、Webアプリ開発の学習や制作の手助けになるような情報を紹介しています。

CSS入門

CSS入門

Webページを制作するには、HTMLと合わせてCSSで見た目を整える必要があります。

まずはCSSの書き方や代表的なスタイルを見ていき、どのように反映されるか知っていきましょう!

CSS入門 サムネ
【CSS入門】 まずはHTMLにCSSを読み込ませよう
【CSS入門】 まずはHTMLにCSSを読み込ませよう
CSS (Cascading Style Sheets) は、HTMLなどの見た目を整えるために用いる言語です。 まずはCSSを作成して、HTM…
【CSS入門】 CSSの構造
【CSS入門】 CSSの構造
CSSは、対象となるHTMLのタグ群 (セレクタ)、見た目の項目名とその値の3つで構成されています。 ここではそれらの基本的な書き方を学んでいき…
【CSS入門】 文字や領域の大きさと単位
【CSS入門】 文字や領域の大きさと単位
文字や領域には、大きさを指定できます。大きさにはpxや%といった単位を利用します。 ここでは、実際に大きさを指定する方法と単位を紹介します。 文…
【CSS入門】 文字や背景の色を変えるには
【CSS入門】 文字や背景の色を変えるには
テキストや背景などの色を指定する際は、色の名前だけでなく、カラーコードという値やRGBA値も用います。 様々な色の付け方を見ていきましょう! 文…
【CSS入門】 要素にスペースを設ける方法 (margin, padding)
【CSS入門】 要素にスペースを設ける方法 (margin, padding)
要素の内側にスペースを付けたり、周囲の要素との間にスペースを付けたいという場合に、`padding`と`margin`を利用します。 特に`ma…
【CSS入門】 文字や要素に影を付ける方法
【CSS入門】 文字や要素に影を付ける方法
各要素には、`box-shadow`や`text-shadow`を利用して影をつけることができます。 影をつけることで、Webサイトにほんのりと…
【CSS入門】 境界線を引く方法
【CSS入門】 境界線を引く方法
要素に対して境界線を付けたり、角丸にできたりします。 例えば画像の表示を角丸にする、うっすら境界線をつけて悪目立ちしないように区別しやすくする、…
【CSS入門】 適用される見た目の優先順位を知ろう
【CSS入門】 適用される見た目の優先順位を知ろう
CSSでは1つの要素に複数の宣言 (見た目) を適用できますが、宣言がかぶった場合にどれが適用されるかは、優先順位で決まります。 ここでは、セレ…
【CSS】見た目の適用対象を指定する種類 (セレクタ)
【CSS】見た目の適用対象を指定する種類 (セレクタ)
プロパティを適用する対象を指定するのに使うもののことをセレクタと呼びます。子要素だけ対象にする、チェックボックスがついていたら対象にするなど、幅…

より高度にCSSを扱いたい方は下のページもご覧ください

CSS発展
CSS発展
CSS発展 Javascriptを用いずとも、CSSだけでアニメーションをすることができます。 他にも、フレックスボックスやグリッドレイアウトな…