前回に引き続きwebフロント技術を学ぶ過程をメモとして書き残したものです。
読みにくかったり、わかりずらいとこも多いと思いますが、そういうところは質問お願いします。
なんか、前回と比べて内容が簡易化してるところが見えるかもしれませんが、自分が学んでる教材の問題なので気楽に読み流してください。
最初の部分は意味不明な内容があり少し書き方が雑です。
いろいろな仕組み
ウェブブラウザでは拡張子によってその描写方法を変更している
-
.txt- テキストファイルとしてそのまま表示 -
.html- HTMLファイルとして表示
そして、ブラウザがhtmlのタグを理解して、それに応じた描写変更を行っている
HTMLでは使えるタグが明確に決められており
-
h1:見出し -
a:リンク -
p:段落
などがあります
このように、HTMLを理解して描写する機能をHTMLレンダリングエンジンという。
この機能を持つアプリケーションとして、IE,Chromeなどのブラウザがある。
段落と改行！
急に話は変わりますが、htmlにおいては
- 改行
- 連続する空白(半角スペース)
これらはすべて、単一の半角スペースとして扱う。
そのため段落を適切に改行してやることが大切。Pタグを使ってあげよう！
また、段落の中で改行したくなった時には<br>を使って改行できます。
リンクを埋め込む
webページを扱って大事になってくる機能としてリンクがあります。
htmlにおいてリンクを埋め込むためにはaタグを利用します。
<a href="url"> </a>
タグの中のhrefのところにurlを情報として付けれます。
このhrefのように属性に対して情報をつけ加えるものを属性といいます。
前回の、ノートのリンクをはっつけてみました！
おすとー飛ぶよ？
画像を埋め込む！
次は、またまたwebページにおいては重要な画像を埋め込むところです。
画像を表示するためのタグとして、imgタグがあります。
また、src属性がありここにurlを指定します。
<img src=" ">
htmlを書く際に守るべきルールがいくつかあります。
まずは、DOCTYPE宣言です
htmlの文頭に記載します。
これは、タグではなく使用しているhtmlのバージョンを示すものです。
<!DOCTYPE html>
htmlにおいて、重要になる３つのタグがあります。
html,head,bodyの三つです
文章に関する情報を記載するhead
文章本体を記載するbody
と、部分において分離します。
-
html:文書全体を囲むタグ -
head:文書に関する情報を記載する部分を表すタグ -
body:文書本文を記載する部分を表すタグ
この、三つのタグは省略は可能ですが、特に理由がなければ常に書くようにしましょう
また、文書を作る際にインデントを使うことでhtmlの全体構造を視的に認識しやすくなる
ので活用するのがおすすめです。
文字コードの指定！
htmlにおいても文字コードのしては大事です。
せっかく書いた文も読み込みが正確に行われなければ、ただの遺物書と化すでしょう
htmlのhead内でファイルに記述されている文字コードを宣言します
文字コードの宣言ではmetaタグを使ってcharset属性に文字コードを指定します。
特に理由がない限りはutf-8になると思います。
<meta charset="utf-8">
htmlにおいて色を変えていく！
背景色をなどの見た目を変更するのに、styleという属性を追加する
styleはすべてのタグに追加が可能な属性になっている
-
background-color:red;背景色を赤にする -
color:white;文字色を白にする -
border: solid 1px black;黒いの枠線を付ける
<h1 style=" "></h1>
左詰めで変だなーと思ったら間隔を調節しよ
-
padding-left:10px;左の余白を10pxとる
また、style属性で複数指定する場合は;で各定義を区切る。
styleを分離する
styleを本文中で書いていくとものすごく見た目が悪くなってきます。
styleでは指定したスタイルに要素を変えます。
少しわかりずらいのでコードを見せると、
h1{ background-color: blue; color: white;}
こんな感じでh1に対してスタイルを付けることができます。
idを使って特定するぞ！
idは要素に追加できる属性の一つです。ほかの要素とは別の値を割り当てます。
<h1 id="first"></h1>
idセレクタを利用して選択した要素を特定してスタイルを適用します
#id { }を使うことでid指定したstyleが適用される。
idとclass
idは重複して同じ値を指定できないため、一つにしか適用できません。
そこで使うのがclassです。
classの属性を使うことで複数に同時に適用が可能です。
また、使用するときは
.class名 {}で使用します。
styleファイルを分ける
スタイルを外部ファイルとして参照するのにlinkタグに
属性rel="stylesheet"を定義して、href属性に参照するファイル名を指定します。
<link href="style.css" rel="stylesheet">
アクションを追加する！
最後にcssと続いてくるのがjavascriptです。
buttonを利用して、押されたときに何かしらのアクションを加えていく！
<button onclick="alert('')"</button>
onclickという属性はクリック時に処理を行う。
そこに、alertという命令を付ける。
そうすることで、buttonにアクションを追加できる。
scriptを分離する
css同様、scriptを文中に混ぜると著しく扱いが難しくなる。
今回は関数を定義して扱う。
関数の定義にはfunctionを使う。
<script> function doClick() {}</script>
それを、onclickなどの属性に埋め込む。
またまた、文脈がおかしなところが多々出ますが 書いてうちに直せればなと思っています。
今回の勉強はこんなところで終わらせていただきます。