ドットインストール、あと変数編を残すのみとなっているのだけど、昨日までで終わったところで、いくつか理解が不確かなところがあるので、今日は前に進まず、いったん復習。 アニメーション レスポンシブデザイン グリッド 今朝は時間がなく、グリッドは途…

さて、グリッドデザイン編がおわりました。 おそらく慣れなんだと思いますが、見えないグリッドを頭の中で想像する必要があり、ちょっと頭の体操っぽいですね。

ドットインストールグリッドデザイン編が佳境に入ってきました。 レッスンがさくさく進むのですが、ボックスの配置とコマンドのつながりが、どんどん増えてきていて、ちょっといっぱいっぱい。 あしたはちゃんと復習から入ろう。

グリッド学習の画面 さて、今日からはグリッドレイアウト編です。 詳解CSSシリーズは、後半になるほど、小刻みに説明をしてくれていて、理解が早ければ学習しやすいようです。 今回は画像のようなレイアウトを作りました。 でも、これってどんなとき使うの？…

グリッド学習の画面 さて、今日からはグリッドレイアウト編です。 詳解CSSシリーズは、後半になるほど、小刻みに説明をしてくれていて、理解が早ければ学習しやすいようです。 今回は画像のようなレイアウトを作りました。 でも、これってどんなとき使うの？…

RGB 昔から美術とかお絵かきとかが得意ではなく、あんまり色について興味がなかったのですが、webデザインをするからには、学習しないわけにはいきません。 hslやrgbaなどについて、お勉強しました。 qiita.com www.i-ryo.com また、box-shadowについては、…

レスポンシブデザイン アニメーション編が終わり、今日からレスポンシブデザイン編。 画面幅に応じて、表示を変えるテクニック。 あまり難しくはないけど、整理が必要だね。

アニメーション編が終了しました。 16あたりから実践的なものを作り始めたのですが、box-shadowやcursol、border-right-colorなど初出のコマンドもありました。 ここはちょっと復習が必要ですね。

アニメーションも実践スタイルをつけるようになってきました。 さりげない色の変化とかが付けられるんですね。 おもしろいです。

アニメーション、やっぱり作ったものが動くのは楽しいですね。 今日は、ちょっと複雑な動かし方や、アニメーションプロパティを使いました。 思ったより、アニメーションはわかりやすいので、進みが早いです。

ドットインストールの「詳解CSSセレクター編」の最終回で出来上がったのは、こんなかんじのレイアウト。 今朝は、このレイアウトを、レッスンを見ずに記憶だけで作ってみた。 <header>部分は疑問点もあったので、ドットインストールに質問を投げた。 justify-content</header>…

CSSアニメーションでroteteからの移動 さて、今日からCSSアニメーションです。 面白いですねぇ、絵が動きました。 ドットインストールのすごいところは、続けていくと楽しくなるところですね。

講座ではフレックスボックスとフレックスアイテムについての説明が終了。 自分のPCで具体的に作ってみたいのだけど、alignの幅の指定の仕方がわからず、実感がない。 講座を聞いただけではマスターはできないけど、とりあえず仕組みを理解していこう。

さて、今日からフレックスボックスです。 本日は、#1-#4までをやりました。 レッスン聞いているだけじゃよくわからないので、flex-directionをrowやrow reverseにして、いじってみました。 やっぱり実際にいじって、どうちがうのか調べないと実感わかないで…

セレクター編は、奥が深そうでレッスンで覚えるというよりは、実践で「こんな使い方あったな」と思い出すのが大切なようです。 なので、セレクター編いったん終了しますが、自在に使えるようになったわけではないのです。。。 #01 CSSの基本セレクターを学ん…

昨日からはじめた、セレクター編。 セレクターは、数学っぽいところがあって、ちょっと頭を使うけど、早朝の勉強には丁度いいみたい。 ＃1-＃4を復習していろいろ、いじっていたら、30分終わってしまいました。

さて、今日から「詳解CSSセレクター」の講座を受けます。 全12回なので、サクッと行きたいです。 今日は3回まで。 いろんな指定の仕方があるんですね。

少しだけ残っていた「基礎文法編」を今日終わらせました。 基礎文法編は、24レッスンあたりからboxについての説明が多くなり、いろいろな概念を理解する必要ができきました。 今日は時間がありましたので、24からの復習をできたので、少し頭が整理されました…

今日は、boxについて、#24から復習、一つ進んで#27までおわりました。 boxは長い付き合いになりそうなので、ゆっくり進めていきます。

position property さて、BOXモデルに入ってきました。 今日は復習に時間がかかり、あまり進めませんでしたが、BOXモデルは難解とも聞いていますので、ゆっくりいきます。 .box2{ background-color: green; width: 100px; height: 100px; /* position: stati…

おはようございます。 今日は復習に時間がかかり、3つしか進みませんでした。 まぁ、それもよし。ゆっくりやります。 margin/paddingについて学習しました。

今日はBOXモデルが中心でした。 まだまだ基礎編ですが、BOX内の文字を隠したり、スクロールしたり。 BOXの枠をつけてみたり。 3分以内で1レッスンが終わるドットインストールは、わかりやすくていいですね。 .box1{ background-color: orange; width: 200px;…

おはようございます。 本日は、詳細CSS基礎文法編#15まで来ました。 入力をして覚える事柄以外に、概念として知識として覚えておく内容を1レッスンで紹介してくれている場合も多く。33レッスンとボリュームがありますが、キーボードを叩かないレッスンも頻繁…

会社やらライティングやらもあるので、今のところドットインストールに当てる時間は一日30分と決めている。 ドットインストール講座 これを見てもわかるように、この講座全部が終わるには100レッスンぐらいある。 毎日３～５レッスンづつ進んでいるので、毎…

フォーム部品編は8講座しかなかったので、いったん終了。 <form>などは、今後phpなどでまとめるときに、ふたたび出てくるでしょう。 本日は、1時間時間を取ったので、次の講座「詳細CSS基礎文法編」をはじめます。 33講座もある！ 今日は8講座まで進む。７までは前</form>…

昨日から始まった「詳細HTMLフォーム部品編」 毎日前日の復習をしてから、新しい講座に進むのですが、本日の30分は昨日の復習で終わってしまいました。 入力フォームで選択をする際に、はじめから数行表示させるためにsizeを使いますが、それがなくてもmulti…

さて、今日からのドットインストールは、「詳細HTMLフォーム部品編」です。 今日はさまざまな入力フォームを作成しました。 毎日、新しいことができるようになるドットインストール、スゴイ！ #1-#3まで 一行テキスト パスワード入力 複数行テキスト 一行テ…

今日はドットインストールを見ずに、この基礎文法編で習ったことを、記憶だけで書いてみた。 毎日同じコードを書いているので、記憶していることも多かったが、head部分など記憶が曖昧な部分は、またあしたも書いてみる。 今日でいったん、「詳細HTML基礎文…

今朝は、「詳細HTML基礎文法編」を#1から復習。 やはり、表の作り方がスラスラ行かなかったので、自分で表を作ってみた。 #15-#19は、リンク（外部、内部）と文章の構造マークアップ とくに悩むところはなかった。 ショートカットキーは使い慣れるしかないの…

今朝は、ドットインストール「詳細HTML」の#1-#10を、自分で書き直してみて、#11-#14へすすみました。 リストについては、以前から作れていたのでだいじょうぶだと思います。 表については、<th>やら<td>やらいろいろ出てきますが、なんどか自分で書きながら、慣れて</td></th>…