codestepでコーディングの学習を進めています。 https://code-step.com/ 今回は、中級3つ目Furniture Designでした。いままでで、一番時間がかかりました。そりゃぁ、複雑になっていきますので、当然なのですが、今回はハンバーガーメニューあり、複数ページ…

さて、ハンバーガーメニューの作り方、書き方については、いったん理解しました。しかし、なんか理解の浅さにモゾモゾしますので、今日はスプレッドシートにjavascript前後のうごきをまとめてみました。 スッキリ❢今後お仕事をする上で、理解もせずコピペだ…

今週はずっと、#codestep中級編のstoreサイトを続けています。 https://code-step.com/store2-menu/ わたしなりに、この課題のポイントは、「複数ページのコーディング」と「ハンバーガーメニューの練習」にありました。 複数ページのコーディングについては…

今日は、codestep中級編2つ目のcoffeeshopを精読しました。知り合いにコーヒーショップに「ホームページ作ってね」と言っていただいているので、気合が入ります。 この課題のテーマは、私の中では backgroundに載せる文字のabsolutebackgrouundの画像をスク…

<div id="mainvisual"> <picture> <source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg"> <img src="img/mainvisual-pc.jpg" alt="テキストテキストテキスト"> </picture> </div> mediaリソースの志向するメディアのメディアクエリ。この属性は <picture> 要素の内部でのみ使用します。https://developer.mozilla.org/ja/docs/Web/HTML/Element/source CSSやJavaScr…</picture>

初出でしたので、まとめておきました。 <section id="contact" class="wrapper"> <h2 class="sec-title">Contact</h2> <form action="#" method="post"> postは本文で送信。初期値はget(urlで送信) <dl> <dt><label for="name">NAME</label></dt> labelタグのfor属性の値と、フォーム部品のid属性の値を同じにすることで両者の関連付けができる https://html-coding.co.jp/annex/dictionary/html/labe…</dl></form></section>

入門編6では、画像の設定の理解が弱いことに気づきましたので、再度復習。 backgroundで画像を表示する方法は、4recipieサイトの時にありました。 https://coeure.co.jp/blog/homepage/homepage_180405_04 imageのwidth:50%;は、画像の50％ではない https://…

昨日「入門編５」がなんとか形になりましたので、今日は６です。 https://code-step.com/brand-menu/ 全体の構成を俯瞰して、テキストの大きさや配置を確認する。それをhtmlに反映させて、cssをあてる。 ここまでは模範解答に近い挙動をするようになりました…

昨日からつづけて、#codestep 入門編レシピサイトの精読をすすめています。 https://code-step.com/recipe-menu/ mainvisual さて、まずはmainvisualからつまづきました。 /* -------------------------------------- mainvisual --------------------------…

今回の課題はこちら 美味しそうなメニューがならんでおります。 https://code-step.com/recipe-menu/ background-imageってなんだ 今回は、文字よりも画像の扱い方がポイントになっているようです。 自力でつくってみて、答え合わせをしてみると、トップ画像…

さて、codestep 入門編Photobook1の模写4回目。 何回やってるの？という声も聞こえてきそうですが、守破離の「守」ができていないので仕方ない。 でも、今回ほとんどできているので、機嫌はいいですｗ 今回もやはりdh/dd/dtで組んだ表をきれいに並べるところ…

今日は、codestepの入門編photobookの精読を行いました。 code-step.com 以下に、学習ポイントをまとめておきます。 html h1にsite-titl →すべてにid/classをつける 幅600のinnerは各sectionにつける css このflexの仕方はおぼえるべし 参考サイトはこちら …

一行ずつをしっかり理解しながら進めていく模写を、勝手に精読と呼んでいます。 html wrapのかけかた。私はmainvisualを挟んで上下2箇所にdivでかけたけど、模範解答はsectionごとにclassでかけてた h1/h2/h3をどこまでかけるのか？今回section titleぐらい…

code-step.com 先週末からPhotoBook2のコーディング模写をしてきました。昨日終わりましたのでまとめておきます。 HTML 今回のhtmlコーディングでは div class=containerとして、全体の枠(1000px)を作り、その中で位置取りをし div class=innerで、もうひと…

codestep photobook2を精読しています。 徹底的に理解してやろう！と思っています。 CSSのアタマに「html font-size:100%」って入っていますが、 100％なら書く必要ある？ と思って調べてみましたん。 shinkufencer.hateblo.jp maku77.github.io

今月は模写をワシャワシャやるぞ～と思っていたけど、今のところあまり効率的じゃない。 体制立て直しだ。 一つ目は、模写して学んだことはきちんと整理する 二つ目は、毎日必ずやる 三つ目は、どんどん調べる、質問する 頑張っていこう

www.youtube.com codestepの入門編にありました、「フォトサイト」を作ってみました。 なにも見ないで作れるはずはなく、 とりあえず自力で作ってみる 解答を見て、理解する もう一度自力で作ってみる の順に作業をしています。 前回の「プロフィールサイト…

www.youtube.com #codestep入門編、土曜日から始めて今日なにも見なくても、ここまで来ました。 人に見せられるレベルではないのですが、記念に？上げておきます。 どちらかというと完璧主義なので、土曜日はまったくできずに落ち込みましたが、ざっくり感を…

こちらのサイトの模写を行っています。3日目。 code-step.com 自分でイチからコードを書くことが初体験なので、sectionごとに 1回目に写経をして 2回目に自分で書けるとこまで書いてみて 3回目に答え合わせと新しい知識の学習 という流れでやっています。 今…

codestepの「入門編」を、まずはみようみまねでやってみました。 ドットインストールのhtml/cssをやっただけですから、どうせできなくて当然、と開き直ってみました。 1時間半かかって、ようやく@keyframe前まできました。 けど、わかっていないこともどんど…

こちらのサイトが、とてもていねいに書かれているので、参考にさせていただきます。 code-step.com 模写ルール フォトの種類やカラーにはこだわらない。→ディベロッパーツールで調べてもいいが、細かいところはあわせなくてもよい 細かいマージンやパディン…