昨日苦労していたdisplay:flex;はhtmlを書き直したら効くようになりました。昨日の段階でスペルミスとかは無いと何度も確認していたのですが。今日になってコードを見返して見たらどこがどうなってるのか理解できず書き直しました。毎日少しづつ進めていると…

初めてfloatを触ったのですが、floatで右寄せした要素の中身をdisplay:flex;で横並びにしようとしても何故かできません。原因は違うところにあるのかもしれないけど、floatは癖があって少し難しいという感覚が少しわかりました。

vscodeのショートカット使い始めたけどかなり便利。手に馴染んできたらかなり早くなりそう。ワイヤーフレームで細かくブロック分けしてコードを書いていくっていうの、基本っぽいけど今まで適当に書いてたから目からうろこ状態。

emmetだのskitchだのfull page screen captureだの便利なツール紹介してもらえるのがありがたい。emmetなんて知らなかったからコード全部手打ちしてたもんね。あと、今までSafari一択で使ってたけど、Google Chromeの拡張機能はやはりかなり便利っぽいですね…

プログラミングコミュニティの模写を粗方終えたので解説の動画をみていましたが、解説丁寧プラス講師の方の使っている便利ツールとかも紹介してもらえて、プログラミング仲間の少ない初心者にはかなりありがたい情報がつまってるなーと。sectionタグとかfoot…

１日ほぼひきこもりでコードを書く１日。作業中にぼーっとしてしまう事が多いので集中力を維持する方法考えないとなーあ。

仕事終わりは集中力の維持が難しかったり、時間がみじかかったりで少ししか作業が進まないです。まぁでもゆっくり進めるしかないのだよ！

tableを始めて作ってみました。なかなか思うように表現されず。猛烈な眠気で簡単な表も作成できなかったのが悔しかったので明日はさくっと仕上げてページ完成させたい！着実にコードを書き進める事はできているけど、もう少し早く進められるようになりたいな…

リンクにマウスを乗せると時間をかけて色が変わるというエフェクトを、transitionとhoverを使って表現できて喜んでいたのですが、ページの更新をするとなぜか一瞬文字が大きくなって、徐々に本来の文字サイズに戻る。なにこれ〜

一旦Airbnbの模写はお休みにしてプログラミングコミュニティの課題に取り組み始めました。各課題は難易度調整がうまくされていて、学習しやすそうです。

背景が途中まで薄いグレーになっていて途中から白い背景になっている。要素と要素の間から色が変わるんじゃなくて、要素の真ん中あたりで背景色が変わっているのはどうやって表現するんだろう。absoluteを使って背景を作るのかな？

模写ほんの少ししか進まなかったけど毎日やる事が大事だからとりあえずの及第点という事で満足してぐっすり寝たいと思います。自分に甘いやつ。

Airbnbの模写、概要のページは模写ある程度できたから準備のページに。同じようなところはコピペで必要な箇所修正した方が早いと思うのですが、練習のために１から書き始めています。いろんな書き方を試しつつ、１から書き始めるのは気分がすっきりして楽し…

昨日は半ば諦めていた、『CSSのみで要素を上下逆にする』という方法をGoogle先生に教えてもらってできるようになりました！ 親要素にdisplay: flex;とflex-direction: column;を指定しておいて、並べ替えたい要素にorder: 1,order: 2;と指定すると位置が綺麗…

コード上はテキストの下の画像があるけれども、画像を上に表示させてテキストを下に表示すると、画面幅を調整した時に縦幅が画像だけ拡大されてテキストに重なってしまう。position: relative;やabsolute;では解決できなさそうな。floatとclearを使えばでき…

特定のimgタグのwidthが反映されない。heightは反映される。ググってもこれといってwidthだけ反映されないケースは出てこない。時間がかなりかかりましたが、結局数行下でwidth: 100px;が指定されていたのでした。こういう凡ミスを繰り返して、この先簡単な…

position: absolute;を指定したらオブジェクトがどっか飛んでいっちゃう問題で悩まされていましたが、親要素にposition: relative;を指定すると親要素の中でレイアウトされるという事が分かってスッキリ。ドットインストールの動画で「親要素にposition: rel…

750px以下のスマホ用ページのCSSに入りました。今回はタブレット用ページのCSSを一旦すべてコピペして、そこから修正していくスタイルで進めようとしています。手探りで色々とやってると学習効率は悪いかもしれませんが、楽しいです。

とりあえずタブレットサイズのCSSを下まで進めたものの今進めている概要以外のページの事を考えると少し愕然としつつ。やはりコーディングしつつもプラスアルファで勉強も続けないと幅は広がらないですよね。今はとりあえずアウトプットが新鮮で勉強になって…

シンプルなサイトの模写にどれだけ時間がかかっているんだという感じですがタブレットサイズの模写が終盤にさしかかっております。今度の休日はしっかり時間使ってコード書きこむぞ！

ぐぬぬ。レスポンシブ苦戦。タブレット表示とPC表示でガラッとレイアウトを変えたい時はHTMLもいじりたくなる。でもHTMLをいじると他の画面サイズのレイアウトがぐちゃぐちゃになってしまう...とりあえず今日は寝ますzzz

レスポンシブ、bootstrapがよくわからないからブレークポイント毎に一からCSSを書き直すという力技を行っているのですが、合っている気がしない。でもCSS書く練習になるし、先に進めずに手を止めちゃうくらいならと押し通しています。完全に独学は進むのは遅…

模写を少し進めました。Airbnbのサイトは本当にシンプルに作ってあるんだなと模写をしていると感じます。他のサイトは作れないけどAirbnbのサイトならある程度真似できる。それでも表現の方法がわからないところはいくつかあるのですが。

模写を。今日はなんだか眠くて少ししか進められませんでした。明日は休日だから少し多めに取り組みたい。

今日は本業の事務のお仕事が暇で自社webサイトの模写を無駄に行ってました。今日みたいに激しく暇な時間ができる事はそうそう無いのでサボっちゃってもたまにはいいですよね！