ターミガン

「デイトラ」での学習成果を記録しています

ターミガン

「デイトラ」での学習成果を記録しています

記事一覧

デイトラ WEB制作コース初級編 13日目

初回は10%ほどしか自力でできなかったが、今回は`about`以外はほぼ再現できた。 ページの構成の仕方は3,4割ほどの理解かな?と感じる 「模写コーディング」は意味がない…

1

デイトラ WEB制作コース初級編 12日目

動画を見ながらのコーディングは大きな問題なし 質問より重要そうな話題を見つけたので添付 後で見返しておく

デイトラ WEB制作コース初級編 11日目

11日目も大きく問題なし グリッドレイアウトに関しても、分かりやすそうな記事を選んでみた 2つ目のサイトは実際の実用例も載っていたのでイメージしやすい気がする 後で…

デイトラ WEB制作コース初級編 10日目

Bootstrap初回に関しては特に問題点は無し 一見便利に見えるが、実務では使わない様子… 飛ばそうかとも考えたが、復習なので順番通りにやってみることにした

デイトラ WEB制作コース初級編 9日目

続きで手直しとレスポンシブ対応を行う。レスポンシブはやはり鬼門でレイアウトがぐちゃぐちゃになってしまった…。難しい。しかし、 @media only screen and (max-width:…

デイトラ WEB制作コース初級編 8日目

フォントのサイズもpaddingやmarginやページの配色や再現できていない部分も多々あるが、何も見ずに自力でここまで作り上げることができた 目的としてはとにかく「サイ…

デイトラ WEB制作コース初級編 7日目

「画像の上に文字を表示する」いつも分からなくなる… ・HTMLではテキストのみ記述 ・CSSのbackground-image: url( ); ・表示領域にピッタリ合わせて表示するときは  bac…

デイトラ WEB制作コース初級編 6日目

6日目もライブコーディングは問題なし。途中自分でできそうなところは動画を見ずにコーディングを行った また、今回も自分なりにクラスの位置を付け替えてみたり、floatを…

デイトラ WEB制作コース初級編 5日目

初めて学習した時にはさっぱり意味の分からなかったfloatやclearの意味が非常によく分かった ただ、ライブコーディングを見て写しているだけだと前回の学習時と一緒なので…

デイトラ WEB制作コース初級編 4日目

4日目も大きく躓くところは無し Emmetのショートカットなど便利な機能も紹介してくれているが、初学者はそこまで覚える余裕がない人も多いのでもう少し後に説明があっても…

デイトラ WEB制作コース初級編 3日目

HTML要素(<div>、<span>など)は、それぞれ四角い領域=ボックスとして存在している Webサイトはたくさんのボックス(箱)が敷き詰められて構成されている こうしたボック…

デイトラ WEB制作コース初級編 2日目

さすがに2日目の課題という事もあり、特に大きな問題も疑問もなし

デイトラ WEB制作コース初級編 1日目

2022年7月より「デイトラ」にてWEB制作の学習を開始 しかし9月末に中級編の最後の方まで学習した段階で”何も身についていない”ことを感じる そのためもう一度最初からデ…

デイトラ WEB制作コース初級編 13日目

初回は10%ほどしか自力でできなかったが、今回は`about`以外はほぼ再現できた。
ページの構成の仕方は3,4割ほどの理解かな?と感じる

「模写コーディング」は意味がない。という話も聞くが、個人的には検証画面を見ながら、コーディングを繰り返すのはページ構成の理解には役立つんではないかと感じる。周りの声を聴くのも大事だが、自分で効果的かなと思ったものは試してみようかなと思う

その後デザインカン

もっとみる
デイトラ WEB制作コース初級編 12日目

デイトラ WEB制作コース初級編 12日目

動画を見ながらのコーディングは大きな問題なし
質問より重要そうな話題を見つけたので添付
後で見返しておく

デイトラ WEB制作コース初級編 11日目

デイトラ WEB制作コース初級編 11日目

11日目も大きく問題なし
グリッドレイアウトに関しても、分かりやすそうな記事を選んでみた

2つ目のサイトは実際の実用例も載っていたのでイメージしやすい気がする
後でもう少し詳しく読み込んでみたい。が、もっとベテランコーダーの方がグリッドレイアウトを切り出して活用している例を見てみたいと感じる
その辺の紹介をしてもらえないだろうか…

btnの説明動画にあった、「共通クラスを見つけ、設定して、使い

もっとみる
デイトラ WEB制作コース初級編 10日目

デイトラ WEB制作コース初級編 10日目

Bootstrap初回に関しては特に問題点は無し
一見便利に見えるが、実務では使わない様子…
飛ばそうかとも考えたが、復習なので順番通りにやってみることにした

デイトラ WEB制作コース初級編 9日目

デイトラ WEB制作コース初級編 9日目

続きで手直しとレスポンシブ対応を行う。レスポンシブはやはり鬼門でレイアウトがぐちゃぐちゃになってしまった…。難しい。しかし、

@media only screen and (max-width:767px) {}}

はしっかり覚えていて、数か所上手く言った部分もある。

その後は7日目に作成した回答例を見つつ手直し。諸々必要な部分が抜けていたり、必要なかったりしたので見比べながら手直しをする。

もっとみる
デイトラ WEB制作コース初級編 8日目

デイトラ WEB制作コース初級編 8日目



フォントのサイズもpaddingやmarginやページの配色や再現できていない部分も多々あるが、何も見ずに自力でここまで作り上げることができた

目的としてはとにかく「サイトの形を何となく作ること」「floatは使用せずflexを使用すること」で進め、何となくの形に

全く何も手を動かせなくて途方に暮れていたが、丁寧に最初からやり直すことで、ごくわずかながらもコーディングのきっかけをつかめた思

もっとみる
デイトラ WEB制作コース初級編 7日目

デイトラ WEB制作コース初級編 7日目

「画像の上に文字を表示する」いつも分からなくなる…
・HTMLではテキストのみ記述
・CSSのbackground-image: url( );
・表示領域にピッタリ合わせて表示するときは  background-size: cover;
で完成!!

・HTMLではテキストのみ記述
・CSSのbackground-image: url( );
・表示領域にピッタリ合わせて表示するときは  bac

もっとみる
デイトラ WEB制作コース初級編 6日目

デイトラ WEB制作コース初級編 6日目

6日目もライブコーディングは問題なし。途中自分でできそうなところは動画を見ずにコーディングを行った

また、今回も自分なりにクラスの位置を付け替えてみたり、floatを使わずにflexを使用してみたりと工夫をしてみた。こういった工夫が前回までの学習では足りなかったと反省点である。
が、とりあえず無理やりでも先に進めたことで何となく全体が見えるようになり「ここ変えられるかも?」みたいな仮説が立てられ

もっとみる
デイトラ WEB制作コース初級編 5日目

デイトラ WEB制作コース初級編 5日目

初めて学習した時にはさっぱり意味の分からなかったfloatやclearの意味が非常によく分かった

ただ、ライブコーディングを見て写しているだけだと前回の学習時と一緒なのでfloatではなくflexでヘッダーを再現してみた。こちらもイメージ通りに完成し満足している
前回の学習で全く何も身についていなかった、というわけでは無かったようで少しうれしい
現在は、floatはflexがあるためあまり使われ

もっとみる
デイトラ WEB制作コース初級編 4日目

デイトラ WEB制作コース初級編 4日目

4日目も大きく躓くところは無し
Emmetのショートカットなど便利な機能も紹介してくれているが、初学者はそこまで覚える余裕がない人も多いのでもう少し後に説明があっても良いかもしれないと感じる

デイトラ WEB制作コース初級編 3日目

デイトラ WEB制作コース初級編 3日目

HTML要素(<div>、<span>など)は、それぞれ四角い領域=ボックスとして存在している
Webサイトはたくさんのボックス(箱)が敷き詰められて構成されている
こうしたボックスによって敷き詰められたレイアウトのことをボックスレイアウトという
ボックスは一つの要素に対して四つの区分がある
それは、コンテンツエリア・padding・border・margin

<div>~</div>という一つ

もっとみる
デイトラ WEB制作コース初級編 2日目

デイトラ WEB制作コース初級編 2日目



さすがに2日目の課題という事もあり、特に大きな問題も疑問もなし

デイトラ WEB制作コース初級編 1日目

デイトラ WEB制作コース初級編 1日目

2022年7月より「デイトラ」にてWEB制作の学習を開始
しかし9月末に中級編の最後の方まで学習した段階で”何も身についていない”ことを感じる
そのためもう一度最初からデイトラを始めてみることにした

何も身についていなかった自分なりの考察

あまり深く考えずに学習の動画を追い、その通りにしか制作していなかったこと

質問の仕方が良くなかったこと。「質問しづらい」と逃げの口実に使っていた

このあ

もっとみる