CSS基礎– tag –

Webサイト制作で欠かせないのが、CSSでスタイルを指定する際に使用するclass属性（クラス属性）です。「なんとなく付けているけど、正しい使い方や命名方法まではわかっていない…」「idとの違いは？詳細度（specificity）って何？」という初心者〜中級者の...

CSSのカリキュラム一覧 CSSとは？ CSS（Cascading Style Sheets）は、HTMLで作った「ページの構造」に対して「見た目」を指定するための言語です。たとえば、 文字の大きさや色を変える コンテンツの配置やレイアウトを整える スマートフォンとパソコンで...

CSSで本格的なレイアウト（横並びや複数列）を組む前に、まずは基本となる display プロパティの動きを理解しておきましょう。ここでは、以下のようなdisplayの違いを実際に比較して学びます。 display: block display: inline display: inline-block disp...

CSSの装飾で最もよく使われる「border」「border-radius」「box-shadow」 の基本をまとめて学びます。これらのプロパティは、ボックスや見出し、カードデザインなどの装飾に欠かせない要素で、Webデザインの“見た目の差”を作る重要なテクニックです。 枠線...

フォント関連のプロパティ プロパティよく使う値説明font-family'Arial', 'sans-serif'フォントの種類を指定font-size16px, 1remフォントの大きさを指定font-weightnormal, bold, 400フォントの太さを指定font-stylenormal, italicフォントのスタイル（斜...

クラスを使うと、HTMLの要素に「名前」をつけて、CSSでまとめてスタイルを当てることができます。 1.class属性の基本 HTMLのタグに class をつけることで、「この要素だけ特別」という指定がしやすくなります。以下のように多くのp要素が使われている中で...

figure + figcaption で、画像にキャプションを重ねて表示 GridやFlexを使ってレイアウトを統一させる ::before / ::after を使って見出しにデザインを加える :root に色指定を集約してテーマ化を進める 作成ファイル...

サイトの上部にナビゲーションメニュー（<nav>）を設置する Flexbox を使って <h1> と <nav> を横並びにする ページ内リンクを使ってセクションへの移動を行えるようにする ページ内リンク（href="#id"）で、...

複数の記事（<article>）を Grid を使ってスマホでは1列／PCでは2列のカード型レイアウトに切り替える方法を学びます。また、記事単位で <header>・<footer> を使い、1つ1つが独立した情報ブロックであることを意識した構造を練習します。 この課...

<section> と <aside> を使った2カラムレイアウトを Flexbox で構築し、画面幅に応じて1カラムに切り替えるモバイルファーストでのレスポンシブ設計の基本と応用を学びます。また、記事本文に画像を含めたり、<dl> を使った構造的なお知らせレイ...

Flexboxを使用して制作実績をパソコン表示では2列×2行、スマートフォン表示では1列になるようレイアウトします。また、@media を使って画面サイズによってデザインを切り替えるレスポンシブ対応を学びましょう！ 作成ファイル・保存場所 css-basic フ...

フォームレイアウトを <dl><dt><dd> 構造で整理し、CSSで見やすく整えます。Flexboxを使って ラベルと入力欄を横並びにし、input[type=...] や input[name=...] などの属性セレクターを活用して入力欄の幅やスタイルを整える力を身につける。 作...