CSS基礎– tag –
-
CSSのclass属性の使い方・命名ルール・詳細度（specificity）まで徹底解説
Webサイト制作で欠かせないのが、CSSでスタイルを指定する際に使用するclass属性（クラス属性）です。「なんとなく付けているけど、正しい使い方や命名方法まではわかっていない…」「idとの違いは？詳細度（specificity）って何？」という初心者〜中級者の... -
CSS
CSSのカリキュラム一覧 CSSとは？ CSS（Cascading Style Sheets）は、HTMLで作った「ページの構造」に対して「見た目」を指定するための言語です。たとえば、 文字の大きさや色を変える コンテンツの配置やレイアウトを整える スマートフォンとパソコンで... -
ここからのレイアウトのために：displayプロパティを理解しよう
CSSで本格的なレイアウト（横並びや複数列）を組む前に、まずは基本となる display プロパティの動きを理解しておきましょう。ここでは、以下のようなdisplayの違いを実際に比較して学びます。 display: block display: inline display: inline-block disp... -
ここまでの振返確認：CSS基礎01から05までの理解度チェック
CSSの装飾で最もよく使われる「border」「border-radius」「box-shadow」 の基本をまとめて学びます。これらのプロパティは、ボックスや見出し、カードデザインなどの装飾に欠かせない要素で、Webデザインの“見た目の差”を作る重要なテクニックです。 枠線... -
CSS：プロパティ一覧（用途別）
フォント関連のプロパティ プロパティよく使う値説明font-family'Arial', 'sans-serif'フォントの種類を指定font-size16px, 1remフォントの大きさを指定font-weightnormal, bold, 400フォントの太さを指定font-stylenormal, italicフォントのスタイル（斜... -
付録：CSSの class 属性とは？
クラスを使うと、HTMLの要素に「名前」をつけて、CSSでまとめてスタイルを当てることができます。 1.class属性の基本 HTMLのタグに class をつけることで、「この要素だけ特別」という指定がしやすくなります。以下のように多くのp要素が使われている中で... -
画像にキャプションを重ねよう（Gridとアニメーション）
figure + figcaption で、画像にキャプションを重ねて表示 GridやFlexを使ってレイアウトを統一させる ::before / ::after を使って見出しにデザインを加える :root に色指定を集約してテーマ化を進める 作成ファイル... -
ナビゲーションとページ内リンクを作ろう（Flexとスクロール演出）
サイトの上部にナビゲーションメニュー（<nav>）を設置する Flexbox を使って <h1> と <nav> を横並びにする ページ内リンクを使ってセクションへの移動を行えるようにする ページ内リンク（href="#id"）で、... -
独立した記事カードをCSSのGridでレイアウトしよう（rem設計）
複数の記事（<article>）を Grid を使ってスマホでは1列／PCでは2列のカード型レイアウトに切り替える方法を学びます。また、記事単位で <header>・<footer> を使い、1つ1つが独立した情報ブロックであることを意識した構造を練習します。 この課... -
記事とサイドバーをCSSでレイアウトしよう（Flex + レスポンシブ応用）
<section> と <aside> を使った2カラムレイアウトを Flexbox で構築し、画面幅に応じて1カラムに切り替えるモバイルファーストでのレスポンシブ設計の基本と応用を学びます。また、記事本文に画像を含めたり、<dl> を使った構造的なお知らせレイ... -
制作実績をCSSのFlexboxとレスポンシブでレイアウトしよう
Flexboxを使用して制作実績をパソコン表示では2列×2行、スマートフォン表示では1列になるようレイアウトします。また、@media を使って画面サイズによってデザインを切り替えるレスポンシブ対応を学びましょう！ 作成ファイル・保存場所 css-basic フ... -
お問い合わせフォームをCSSで装飾しよう（Flexboxと属性セレクター）
フォームレイアウトを <dl><dt><dd> 構造で整理し、CSSで見やすく整えます。Flexboxを使って ラベルと入力欄を横並びにし、input[type=...] や input[name=...] などの属性セレクターを活用して入力欄の幅やスタイルを整える力を身につける。 作... -
Tableを装飾しよう（罫線・背景色・nth-child）
テーブル（<table>）の見た目をCSSで装飾し、枠線・背景色・行の区切り・整列などの基本的な表デザインを学びます。また、行ごとのスタイル分けに使える :nth-child() セレクターの使い方も体験します。 作成ファイル・保存場所 html-basic フォル... -
CSSでリンクリストを装飾しよう（:last-child とボックスデザイン）
複数のリンクを箇条書き（リスト）で整理し、CSSでリンクリスト全体をカード風に装飾します。また、セレクターの応用（:last-child）や(:hover)ホバー効果を使って、より実用的なリンクUIの作り方を学びます。 作成ファイル・保存場所 css-basic フォ... -
画像とレイアウトにスタイルを追加しよう
画像とキャプションのセットをCSSでスタイリングし、全体のレイアウトと視覚的な見せ方を学びます。背景色・枠線・影などを使って、情報をカード風にまとめるデザインを体験します。 作成ファイル・保存場所 css-basic フォルダの中に以下の2つのファ... -
リストや用語集にスタイルを追加しよう
リスト（ul, ol, dl）や定義リストの見た目をCSSで整え、装飾されたリストと枠線（border）の基本を学びます。また、前回同様に簡易リセットと基本的な全体スタイルも指定します。 作成ファイル・保存場所 css-basic フォルダの中に以下の2つのファイ... -
趣味紹介ページに外部CSSを追加しよう
外部CSSファイルを使ってスタイルを分離し、ページ全体の文字スタイル・余白（padding / margin）・背景色の基本を理解する。また、リセットCSSを導入してブラウザごとの初期スタイルの違いを整える方法を学びます。 作成ファイル・保存場所 css-basic&nbs... -
CSSを使って自己紹介ページにスタイルを追加しよう
まずは作成ファイルと保存場所 css-basic フォルダを作成し、その中に 01.html というファイルを作成します。HTMLコードは以下のコードをコピーして使います。このファイルのhead要素内に、cssを適用していきます。 01.htmlは下記からコピ... -
CSS基礎
この「CSS基礎」では、Web制作でよく使うプロパティを中心に学習していきます。それぞれのプロパティがどのような役割を持ち、どんな値を指定できるのかを、実際にコードへ適用しながら確認していきましょう。 手を動かしながら試していくことで、CSSの基...
1
