ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強43日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はいどうも!

今日で43日目か。

 

なんか今日作業画面を同僚に見られて!

え!?なにこれ?って感じに言われました。

 

まぁ、誰でもできるHTMLなんですけどね

頭いい感じに見えるみたいです。イメージってすごいですね。違和感すごい。

 

ということで!今日も作業を行いました

なんかやっぱり平日5日目ってちょっと疲れてますね!

いつも仕事終わった後はちょっと寝てから作業するんですが、今日は全く寝れず作業がとっかかりの時間がちょっと遅くなっちゃいました。

とはいえ1.5時間は作業してましたね。

 

タグって面白いですね。

的確な指示で画面上に出てくるのが楽しいです。

さて、今日やったことをおさらいします!

 

【今日実践したタグ】

<a href="google.co.jp"></a>

 リンク先の設定 二つの"の中の文字がリンク先に設定されます!

 一旦のリンク先は#を設定することが一般的です。

 

<img src="photo/main.jpg">

 画像を挿入するタグです!「"」の中は現在編集中のファイルが格納されている場所と同じ場所のファイルを参照し、その下層にあるどのファイルを参照するかという意味です!このタグだと、photoというフォルダのmain.jpgという画像ファイルを参照します。

 

<h2></h2>

 h1タグより下に来るタグ。目立たせるタグのため、改行しなくても余白が大きくなる。

 

<li><a href="#"><img src="images/main.jpg">Web design</a></li>

 リストタグの中に画像を挿入することで一つのまとまりとして定義することができる

 このタグだと、Web designのリストと画像を一つのまとまりとして定義することとなる。

 今回はhrefタグも使用しているため、まとまった画像と文章に対してリンクを設定できています。

 

&copy;=©︎

 HTMLだと、©︎はこのように記述するようです!

 

<link rel="stylesheet" media="all" href="style.css" type="text/css">

 CSSを読み込む際の記述です!これ全部覚えるのは慣れなのかな?結構ある!w

 link=閉じタグのない特殊なタグ

 rel=relation(関係)

 media=どのメディアで読み込むか

 href=ど子から参照するか

 type=どの文字で書かれていて、どの言語で書かれているのか

 

 ※設定されているCSSよりもHTMLファイルに設定されている指示の方が強いようですが、あまりこの記述方法は使わないようです!

 

<!-- -->

 コメントアウトのタグです。

 文字のスペースの部分に記述した文字は、コードの欄には表示されますが実際の画面には表示されないので後から見たときに見やすくするためのタグです!

 divタグが多くなってわからなくなることがあるので、各要素の下に○○はここまでと言うような記載にも使えるようです!

 

【aboutというページを作成しました】

ABOUTというタイトルと写真、自己紹介のページを作成しました!

 

<div id="ABOUT">

 divタグの名前を定義しています。

 

<section></section>

 セクションの意味です。要素のひとまとまりの定義で使いました!

 

今回はdivの下層ページにsectionを定義しました。

 

今日はこんな感じ!

久々にブルーライトカットのメガネを使いました

なんかやっぱりいいかも。笑

 

ってことで、今日はここまで!