2Step CSS - リアルタイムCSSレイアウト講座 -

CSSレイアウト初心者用練習一覧ページ

CSSレイアウト初心者用練習エディタの使い方や、初心者用のCSS練習、初心者用のサイト構築練習などの問題です。CSSでのレイアウトに自信のない方はここから始めると良いかもしれません。

CSS htmlタグ練習一覧ページ

CSS htmlタグ練習 tableタグやaタグ、imgタグなどそれぞれのhtmlタグを集中して練習することにより苦手なタグがなくなり、コーディングの幅が広がると思います。

CSSレイアウトパーツ練習一覧ページ

CSSレイアウトパーツ練習テーブルやリスト、画像・テキストのレイアウトなど、サイトのパーツを部分的に練習します。デザイン毎の細かいCSSレイアウト方法などが身につきます。

2009/04/27ドットロックマン
2009/04/25ドットマリオ

CSSテンプレート作成練習一覧ページ

CSSテンプレート作成練習 CSS1テンプレートを作成する練習をします。様々なデザインに挑戦することで、CSSレイアウトに対する総合的なフローとテンプレート作成のテクニックが身につきます。

CSS Tips一覧ページ

CSSプロパティ CSSのテクニックを部分的にまとめています。時々使いやすいソフトや実際の練習問題にも出てくるようなことも解説しているので困ったら見てください。

CSSプロパティ一覧ページ

CSSプロパティをリアルタイムに試すことができます。練習ページでは簡易版も表示できるので確認しながら作業してください。

2009/04/16position
2009/04/06font-weight
2009/04/06text-align

超初心者用！2Step脱テーブルCSSレイアウト講座

テーブルレイアウトからCSSレイアウトにチェンジすることをテーマに初心者の方用に色々解説しています。本当に初心者の方はここでCSSの概念を見て取るのもいいかもしれません。

スタイルシート(CSS)デザインの基礎講座
本当に基礎的なことを解説していますスタイルシート(CSS)レイアウト知識
レイアウトに必要な知識を確認しましょうレヴェルアップ！練習問題
ひたすら練習して慣れましょう実践WEBデザインフローチャート
サイトをまるごと一つ作ってみましょう

サーバー

ロリポップ！: 右も左も分からない初心者時代に初めて借りたサーバー。今は借りる気になれませんが、初心者の方にはいいかもしれません。
レンタルサーバー Xserver: 何個かサイト持つようになり、一つのスペースにまとめるために借りたマルチドメインサーバー。速いし使いやすいし、今まで使ってたロリポップがかすんで見えました。
CORESERVER.JP: 現在使用しているサーバー。データベースを際限なく使用できるので色々勉強になります。ただ、使い心地はエックスサーバーの方が良かったですね。
チカッパ！: ちょこっとだけ借りたことある。不満はなかったです。
We host your creativity. 『 HETEML 』: チカッパの上位サーバー。今度借りて試してみようと思ってます。

2StepCSS.comについて

リアルタイムにレイアウトを確認できるCSS練習サイトです: １文字打ち込んだら１文字プレビューされる、そんなリアルタイムな感じでCSSレイアウトを確認できます。
レイアウト崩れなんかもリアルタイム: 記述内容やCSSの使い方が間違ってたらレイアウト崩れしたり反映されないので、間違いにすぐ気付くことが出来ます。
たぶん様々な対応力が身につきます: デザインパターンによるCSSレイアウトを問題としているので、CSSの対応力が強化されるんじゃないかと思ってます。
サイトを丸ごと作ったりします: えらい長丁場になりますが、デザインをどんな風にサイトとしてコーディングしていくのかなど、説明しづらい部分を練習できるかと思います。
色んなテクニック満載かもしれません: 何々をする方法！みたいな感じじゃないですが、CSSレイアウトに役立つささやかなテクニックを見ることができるかもしれません。
問題には解説もついてます: 投げっぱなしではなく解答もありますので、そこでコードや内容を確認してください。
コピペorタグ打ちしなくてはなりません: Dreamweaverのように親切ではないですが、その分理解も深まると思います。でも、CSSプロパティの一覧表は付けてみました。
強い人はHTMLタグの構造も考えてみて下さい>: 問題ページのサンプルのコードも見ることができますが、強い人はサンプルみてHTMLの構造も考えてみて下さい。
まずはエディタに慣れていただくため、ウォーミングアップからお試し下さい。

上書き方法問題更新中

CSSの上書きはレイアウトをする上でとても大切なポイントだと思っています。最初のうちは余計な記述が多く、知らない間に上書きしていることが多いのですが、上書きの優先順位を把握することで、問題点もすぐに発見できるようになると思います。
しばらくは初心者用のコンテンツを念頭に問題を更新していきたいと思いますが、なんかネタができたら、テンプレートなどの問題もつくり、初心者用でやったことが全て繋がるような感覚をお見せしたいなって思います。