トラステックTorasTech

チュートリアルシリーズ 【CSS編】

コードのコピペ◯｜2日で学習も可｜セレクターや必須スタイル、レスポンシブデザイン、カフェ風ホームページ制作など開発現場レベルの全体的な知識も習得 ゆるっとプログラミング学習

https://www.amazon.co.jp/dp/B0F5V3466L

プログラミング学習のチュートリアルや基礎に特化した教材です。
現場で役立つCSSスキルをゆるっと5日間（最短2日）で身につけられる構成になっています。しっかりと基礎を学び、まずは「見た目を整える」Webページ制作に挑戦してみましょう！

※試し読みページ数 〜特別増量中〜「カフェ風ホームページ」制作の完成イメージが確認できます！

（前作のHTMLチュートリアル教材をまだ学習されていない方は、そちらを先に進めることをおすすめします）

本書は、プログラミング未経験の方を対象とした、CSSの実践入門教材です。
IT業界未経験からSES企業に就職を目指す方や、副業としてWeb制作を始めたい方を想定しています。

「CSSって何？」「デザインってどうやって整えるの？」という超初心者の方でも安心して学べるよう、
CSSの役割・書き方の基本から、レスポンシブ対応まで、丁寧に解説しています。

研修や学習講座での実用を前提とし、実務でよく使われるスタイルや構造を中心に構成。
この教材を終えた後は、CSSの土台をしっかりと身につけ、HTMLやJavaScriptと連携した開発にスムーズに進めるようになります。

対象読者

• IT業界未経験で、SES企業に就職を目指している方
• 副業でWeb制作を始めたいと考えている方
• 独学に不安があり、基礎からしっかり学びたい方
• CSSという言葉は知っているが、実際にスタイルを書いたことがない方
• Web制作やフロントエンドの知識がゼロの方

この教材で得られるスキル・未来像

• CSSを使ってWebページのデザインやレイアウトができるようになる
• よく使うスタイルやセレクターを理解し、実践的に使いこなせる
• ブラウザでスタイルを確認・修正できるようになる
• HTML・JavaScriptと連携する前提のCSS基礎力が身につく
• 実務に通じる保守しやすいスタイル設計や命名規則（BEMなど）がわかる

完成イメージ

本書を通じて、以下のような「おしゃれでスマホ対応もされたカフェ風のホームページ」を自作できるようになります

• フォント・色・背景・余白が整ったスタイリッシュなデザイン
• レスポンシブ（スマホでも崩れない）レイアウト
• Flexboxやpositionを使ったセクション分け
• 影・角丸・画像装飾などによる視覚的な強調
• メディアクエリを使った動きのあるインタラクション

※実際の完成ページは教材内の画像・コードで確認可能です。

目次
1日目：CSSとは？ 基本構文とHTML＆CSSの連携

• 1-1 CSSについて
• 1-2 基本構文を学ぶ
• 1-3 CSSをどこに書く？
• 1-4 環境構築（HTML・CSSファイルの作成と連携）

2日目：基本的なCSSセレクター

• 2-1 要素型セレクター
• 2-2 クラスセレクター
• 2-3 IDセレクター
• 2-4 属性セレクター
• 2-5 応用：擬似クラス・擬似要素

3日目：よく使うスタイルの基礎

• 3-1 フォントサイズ、種類、装飾
• 3-2 ボックスモデル
• 3-3 表（テーブル）の作成
• 3-4 表示・非表示

4日目：レイアウトと装飾の実践

• 4-1 Flexboxでのレイアウト
• 4-2 位置指定（position）
• 4-3 背景画像、影、角丸

5日目：実務で活かせるCSS応用テクニック

• 5-1 メディアクエリでレスポンシブ対応
• 5-2 クラス命名のベストプラクティス（BEMなど）
• 5-4 コードの整理整頓・コメントの習慣
• 5-5 Webページを模した演習
  • ■ 課題内容：カフェの紹介ページを作ろう！

今後の学習をサポートする特別サポートや教材シリーズもご用意しています。
少しずつ進んでいきましょう！

https://www.amazon.co.jp/dp/B0F5V3466L

今後ともTorasTech（トラステック）をよろしくお願いいたします。