【webデザイン勉強2日目】おすすめのデザイン書など 2020/4/10
webデザイン勉強2日目 体系的に学ぶことの重要性
基礎から積み上げていくのって大事だなぁ…としみじみ感じます。
グラフィックをやり始めた時は、ソフトをまず触って、分からないことがあったら調べるという方式でやり始めてしまって、かなり遠回りの苦労しているので。
「すぐに何かを作れて達成感を得れる」
という点では良かったのだけれど、根本的なルールを分かっていないことに制作中に気づくこともあり、最近グラフィックもイチから勉強しなおしています。
本やサイトでまとまった知識を得ると自分の知識のムラに気づけて大変よいです。
情報を得たら、すぐにソフトを使って手を動かすことで覚えるようにしています。
【webデザイン勉強1日目はこちら☟】
デザインの勉強方法
主に、Progateとサルワカさんのサイトにお世話になりながら勉強を進めています。
最初は、25分タイマーをかけて10分休憩して、集中してきたら少しずつ時間をのばしています。
また、最近iPadを買ったので、休憩時間にKindle版のデザイン書を買って読んでみたり。
読み始めたばかりだけど、図が多く、学習時間の目安も書いているので、ちょこちょこ読めて良いですね。
今日のWEBデザインの勉強まとめ
HTML/CSSの入門記事を読む
サルワカさんの初心者向けHTML講座に習い、テキストエディタでサンプルコードをコピペして触ってみる。
Progateの初級編では触れられていなかった部分も補完できそう。
id：1つのHTML文書内で同じid名を使うことができない
class：何回でも同じclass名を使うことができる
https://saruwakakun.com/html-css/basic/html
私が使っているテキストエディタはAtom👆
UIが綺麗だから使ってて気持ちが良い。
HTML/CSSで出てくる用語、読み方分からない
<ul>アンダーリスト
padding パディング
セレクタ/プロパティ/値って何？
.footer-logo {
float: left;
}【セレクタ】スタイルシートを適用する項目。上のfooter-logo部分。
【プロパティ】適応するスタイルの種類。上のfloat部分。
【値】プロパティの値。上のleft部分。
最初は全然ピンとこなかったけど、書いているうちにだんだん分かってきた気がするような？
CSSでの余白の指定方法
余白の感覚を掴むのに少し時間がかかりそうです。
手描きでノートにまとめたりしました。
余白で参考になったサイトを貼っておきます↓
divとspanの違い
・div→display: block span→display: inline
・spanは文字の一部装飾などに使われることが多い
・divの中にspanが入ることはあるけど、逆は原則として無し
ブログ書いてて、たまに出てきたような気がするので、覚えやすかった。
お問い合わせフォームを作る
<input>
・終了タグが不要
・一行のテキストを受け取る
<textarea>
・複数行のテキストを受けとる
作業時間と進捗
✔Progate HTML/CSSの初級編80%
→達成。95％
✔Dreamweaverの基礎
→未達。持ち越し。
4/11の予定
✔Progate HTML/CSSの初級編 100%
✔Dreamweaverのチュートリアル 40%
今日も勉強頑張りましょう~🐑✨
この記事が気に入ったらサポートをしてみませんか？