WEBエンジニアを目指すアラサーOLの日常

どこにでもいるアラサーOLがWebエンジニアになるまで

2022年2月21日:Udemy「WEBデザイン講座 Level0」前半

本日はこちらの講座をやっていきます!

www.udemy.com

 
<!DOCTYPE html>
  • HTML5で記述しているHTML文書であることを宣言する
  • バージョンによって記述が異なる

 

<html>
  • lang属性:属性値はja
  • 他のすべての要素は、<html>要素の子要素以下となる
  • lang属性では、言語コードを指定します
  • 日本語の場合は、lang="ja"と指定する

 

<head>
  • METAデータを記述します
  • <title>要素を除き、ブラウザ上には表示されません
  • 子要素は<title><style><link><base><script><meta>
  • 親要素は<html>のみ

 

<meta>  charset属性:属性値はutf-8

 

<title>
  • 要素内容にWEBページのタイトルを記述する
  • HTML文章の中には、一つしか記述できない
  • ブラウザのタブに表示されます
  • ブックマークや検索結果のタイトルに使用される

 

<body>
  • <body>要素に記述された内容は、原則ブラウザ上に表示される
<a>
  • ハイパーリンクを指定する要素
  • href属性:属性値はリンク先のURL
  • targrt属性:ウィンドウの指定

 

 

CSS作成のルール

1.CSSとは

CSSとは、「Cascading Style Sheets」の略である

現時点での最新バージョンは、CSS3

 

HTMLは…文章構造を記述するためのもの

CSSは…見栄え「デザインやレイアウト」を指定するもの

 

2.CSSを記述する場所

1.タグのstyle属性に記述する

2.head要素内の<style>要素に記述する

3.別ファイルに記述し、link要素で呼び出す

 

3.CSSの記述形式

セレクタ {プロパティ:値;}

h1 {color:red;}

 

4 .CSSの値と単位

・値…各プロパティには、初期値が設定されている

例) font-style… nomal Italic oblique

※親要素からプロパティの値を継承する「inherit」も指定可能

 

・単位

px  相対単位

→ユーザーのディスプレイの画像解像度に依存する

 

em 相対単位

→親要素のfont-sizeに依存

 

rem 相対単位

→<html>要素のfont-sizeに依存

→<html>要素の初期値サイズは16pxであるため、font-sizeを62.5%に指定すれば、1remは10pxになる

 

 

% 相対単位

→親要素のfont-sizeに依存

 

pt 絶対単位

→1pt=1/72in=0.3528mm

 

単位なしが推奨される場合もある

→ line-height

 

5 .スタイルの優先準備

CSSの指定が重複した場合、どのスタイルが優先されるか?

 

スタイルの優先順位

1)タグのstyle属性に記述する

2)<head>要素内の<style>要素に記述する

3)CSS専用のファイルを作成する

6 .デフォルトスタイルシート ※user agent stylesheet

HTMLの要素には、プロパティの値に初期値が設定されている

各ブラウザには、独自のデフォルトスタイルシートが設定されている

 

デフォルトスタイルシートによる表示の違い

スタイルを標準化するリセットCSS

 

7.コメント

/* この部分にコメントを記述します */

 

 

▼練習で作成

f:id:mojamojablog:20220221193257p:plain

 

 

 

2022年2月20日講座終了&サイト完成

こちらの講座の受講が完了しました。

www.udemy.com

 

作成したサイトは下記です。

 

▼トップページ

f:id:mojamojablog:20220221161412p:plain

 

▼会社概要

f:id:mojamojablog:20220221161509p:plain

 

▼モデルハウス

f:id:mojamojablog:20220221161647p:plain

 

▼問い合わせ

f:id:mojamojablog:20220221161552p:plain

 

途中</div>を付けるのを忘れて、フッターが下にいかないこともありました…><

コードを時間かけて見直しを行い完成することができました!

良かったです!

2月17日(木曜日)の進捗

昨日udemyがセールだったので講座を3つ購入。

5000円飛びましたが、その分きちんとやろうと思います。

 

本日からはこちらの講座を進めていきます。

www.udemy.com

 

今日は半分まで受講!

サイトを半分作成しました。

f:id:mojamojablog:20220218001201p:plain

 

 

明日も頑張ります!

地道にコツコツ

10万円の急な出費は痛いので、給料日までは違う教材で学ぼうとしているアラサーOLです。

 

たまたまなのですが、しょーごログさんがオススメしている本が部屋の本棚にあったので、それを見ながらサイトを制作してみました。

www.amazon.co.jp

 

▼トップページ

f:id:mojamojablog:20220217145336p:plain

 

▼ニュースページ

f:id:mojamojablog:20220217145516p:plain

▼メニューページ

f:id:mojamojablog:20220217145624p:plain

f:id:mojamojablog:20220217145646p:plain

 

▼コンタクトページ

f:id:mojamojablog:20220217145800p:plain

f:id:mojamojablog:20220217145829p:plain

 

色々失敗している気もしますが、独学なので仕方ないかなって思ってます。

人に聞けない=調べる時間がかかる&正しい答えが分からない可能性が高いので、遠回りしていることも多いですが、いいんです。

 

お金がなければ時間をかけるしかないんです。

 

その後、しょーごログさんの入門編のページも作成してみました。

f:id:mojamojablog:20220217150134p:plain

 

正直、サイズ感やデザインはすべて雰囲気でやってます。

この模写をすることで自分がアドビXDでデザインカンプが来ても、トレースして作成することができないということが分かりました。

 

自分の現在地を知れたので一歩前進です。