CSSを学ぶ - コーディング講座 — スマートフォンでCSSコーディングを練習できる、ライブHTML・CSSエディター搭載アプリ

初心者のレイアウト問題の多くは、3つのポイントが原因です。まずボックスモデルです。デフォルトでは、paddingとborderが要素に指定した幅に加算されるため、入力した数値よりボックスが広くなります。次に詳細度です。別の場所にある、より詳細度の高いルールが、気づかないうちに自分のルールを上書きします。そして、間違ったレイアウトツールを使っているケースです。1行の配置向けに作られたflexboxで、2次元のページレイアウトを無理に実現しようとしてしまうのです。CSSを学ぶ - コーディング講座では、この3つを試行錯誤で偶然見つけるのではなく、この順番で理解できるようにコースを構成しています。

少し知っていれば十分です。先にHTMLを修了しなくても、レッスンと並行して身につけられます。CSSはHTML要素がどのように表示されるかを定義するものなので、ページが見出し、段落、リスト、画像などの要素で構成されていると知っていれば、始めるための基礎として十分です。アプリのライブエディターではHTMLとCSSを同時に表示できるため、最初のレッスンから両者の関係を確認できます。

Flexboxは、ボタンの横並びやナビゲーションバーのように、1本の線に沿ってアイテムを配置し、その1つの軸に沿って余ったスペースを配分します。Gridは行と列を同時に定義するため、marginで少しずつ位置を調整するのではなく、実際の2次元グリッドにアイテムを配置できます。ページ全体のレイアウトには通常gridを使い、その中にある1行のコントロールには通常flexboxを使います。このコースでは、どちらも学んだうえで自分で使い分けられるようになります。

CSSは、競合するルールをまず詳細度、次にソース順で解決します。IDセレクターはクラスセレクターより優先され、クラスセレクターは単純な要素セレクターより優先されます。スタイルシートのどちらが下に書かれているかは関係ありません。そのため、正しそうに見えるルールが、別の場所にある忘れていたルールに負けることがあります。アプリのSpecificity & Cascadeコースは、こうした優先順位を謎ではなく予測可能なものとして理解するために用意されています。

はい、CSSを直接学ぶ価値は今もあります。TailwindのようなユーティリティフレームワークはCSSの概念をもとにしたレイヤーであり、CSSそのものに取って代わるものではありません。ユーティリティクラスが期待どおりに動かないとき、ボックスモデルや詳細度、その下にあるレイアウトシステムを理解していれば、問題を解決できます。また、変更がすぐページに表示されるため、成果を実感しやすいスキルの一つでもあります。

大切なのは、合計時間よりも継続することです。毎日短いレッスンに取り組めば、ほとんどの初心者は数週間以内に、詳細度の特殊なケースやcontainer queriesのような難しい分野を学ぶ前に、セレクター、余白、タイポグラフィ、基本的なflexboxやgridのレイアウトを自信を持って扱えるようになります。アプリの20のガイド付きプロジェクトは、実際のページを1つずつ作りながら、この段階を練習するために用意されています。

アプリはApp StoreとGoogle Playから無料でダウンロードできます。最初のコース、最初のガイド付きプロジェクト、2つのバグ探しミッション、ライブエディターは無料で、1日あたりのAI Mentor利用枠も付いています。Proでは、すべてのコース、20のプロジェクトと20のミッション、修了試験、AI Mentorの無制限利用が解放され、広告もなくなります。

CSSを学ぶ - コーディング講座はApp StoreでiPhoneとiPad向けに、Google PlayでAndroid向けに利用できます。インターフェースは22言語に対応し、対象年齢レーティングは4+です。まったくの初心者、自分でページをスタイリングしたいデザイナー、フロントエンド面接の準備をしているキャリアチェンジャーや学生に適しています。

インスタントプレビューでは、HTMLとCSSをレンダリングするために接続が必要です。アプリはこの点を明示しており、ひそかに機能を低下させることはありません。レッスンの文章と読み物は接続が不安定でも使い続けられるように作られているため、通勤中の多くの状況には対応できます。ただし、完全にオフラインでライブプレビューを使うことは、このエディターではできません。

CSSを学ぶ - コーディング講座は、App Storeを通じてiOSで、Google Playを通じてAndroidで利用できます。アプリは22言語に対応しています。レーティングは4+です。最終試験に合格すると、アプリから修了証が発行されます。これは取り組んだ学習の証明となり、説明できるガイド付きプロジェクトとともに履歴書で役立ちますが、認定資格ではありません。