プロゲートでプログラム学習03

学習

プロゲートでプラグラム学習してきます。

1&2=ドットインストールでやってます。

※今回も「個人的なメモ」です。申し訳ございません。しかも今回も「HTML&CSS」

おそらく内容もかぶりますが、できる限りシンプルに箇条書きで今回はメモりたいと思います。

※英語も私はできないため苦労してます。

<h></h> = 見出し(h1~h6まで) h要素

<p></p> = 段落 p要素

<!– 〇〇 –> = コメント(中に入れ込む)

コメントとして書かれたテキストはブラウザには表示されないので、メモとして使う。

リンクを作成するためには<a>要素 <a>日本紀行</a>

<a>要素にリンクの飛び先を指定するには、href属性を追加

(例・<a href=”https://enzi.xyz/“>日本紀行</a>)こうすることで、ブラウザには「日本紀行」と出て、クリックすると「URL」に飛ぶ。尚、ブラウザにURLは出ない。

<注意>・ダブルクォーテーション()忘れずに。URLを囲む。

<注意2>・a href=<aとhref>半角スペースは忘れずに。

画像の表示には<img>要素。<img src=”url”>のように、src属性のurlの部分に画像のリンクを指定することで、画像が表示されます。srcはsourceの略。source=出典、情報源
<img>要素はテキストを囲むことがないため、終了タグが要りません。

<例>・<img src=”xxxxxxxxxxxx”>

<li>要素 = 箇条書きにしたいテキストをそれぞれ<li>タグで囲むことで、リストを作ることができます。

<li>xxxxxxxx</li>

<li>oooooo</li>

xxxxxxxxx

ooooooo こんな感じの箇条書きになる。前にクロテン付けたいときは、

<ul>要素で囲むと、黒点が先頭につきます。
<ol>要素で囲むと、数字が連番でつきます

<ul>

<li>xxxxxxxxx</li>

<li>ooooooo</li>

</ul>

・xxxxxxxxx

・ooooooo こんな感じ。

<ul>を親要素。中に入れ込んでる<li>を子要素。入れ込んでるので「入れ子」

入れ子構造の要素がある場合は、インデント(字下げ)をします。

行の先頭で「tab」キーを押すと簡単にインデント

CSS

CSSは、HTMLとは別のファイルに記述します。
HTMLで用意した要素に対して、CSSを用いて「どこの」「何を」「どうする」かを指定することができます.

このときの対象(要素名)をセレクタ、変更項目をプロパティと言います

CSSのプロパティの末尾にはコロン(:)、行末には セミコロン(;) をつける必要がある.

h1{

color: #ff0000;

}

上記は赤。赤緑青の順で「00 00 00」組み合わせで色を作る「ffff00」は黄色。

文字の大きさを指定するにはfont-sizeプロパティを用います。
font-sizeは、px(ピクセル)という単位

font-familyプロパティを用いると、フォントの種類を指定することができます。

「 font-family: フォント名; 」とすることで、要素にそのフォントを適用できます。フォント名にスペースがある場合は、ダブルクォーテーションで囲みます。

背景色を変えるにはbackground-colorプロパティ

「#dddddd」のように同じ値が続く場合は、「#ddd」と省略できます。

要素の横幅、高さを変更したいときには、それぞれwidthプロパティ、heightプロパティを用います。
width, height共にpxで指定していきます。
pxを書き忘れないように注意

要素にはclassを使って名前をつけることができます。
classをつけることにより、それぞれの要素を識別し、別々のCSSを適用することができます。
class名でCSSを指定する場合、先頭にドット「.」が必要な点に注意してください。

classにCSSを指定する際に、先頭のドット(.)を忘れてしまうとCSSが適用されません。
classの場合はドットが必要で、タグの場合は必要ない

本日は以上とする。 えんじ

コメント