今更聞けないHTTMLとCSSのこと

未分類

こんにちは

ジョーカーです

今更聞けないHTMLとCSSについて

分かっている人いとっては当たり前のことなのですが、プログラムを勉強している私としては、みんなで共有したいです。わかる人ばかりではないと思いますので、分からない人の為にわかるように説明できたらいいかなと思って書いています。

これから書くシリーズはWEBサイトの裏側っていうやつですよ。

どのように作られているのかなどです。

ブログを一から作るって人はいないと思いますけど、どういう意味なのかなど知っていれば、ここ気に入らないから書き直すみたいなことが出来るのではと・・・

これから、HPを作る人にとてもいいかな。

では、HTMLとCSSについてです。

まず、ブログやHPのWEBサイトがどのように作られているか見たことがありますか?

「見たことがない」

「PGじゃないから見ない」

ほとんどないですよね(^ω^)!!!!

試しに見てみましょうか?

読者「見ることできるの?」

私「簡単ですよ」

ちなみにソースコードって聞いたことは?

「ちょっとだけ、でも何かはしらない」

「では、画面上で、右クリックしてみてください。そうしたらページのソースを表示という所をクリック」「何が出ましたか?」

「英語がたくさん出てきた」

これらの英語の文字たちで記述したプログラムのことをソースコードというやつです。

このページで見られると私のブログのすべてが見られて恥ずかしいのですが。

あまり見ないで・・・・・・

この中にはHTMLはもちろんCSSも書かれいてます。

HTMLとはどんなもの?

HTML(HyperText Markup Language)の略です。ウェブページを作成するために開発された言語です。 現在、WEBのほとんど、HTMLで作成されています。

これはHPやブログなどWEBページに使われている言語になります。

中身としては文字構造を指定するタグが存在します。

タグって何よ!!!

タグとは一言でいえば、命令のこと。

例:<h1>これも<br>これのことをタグと言います。

他にはjavaScriptというのがあります

これらを使ってサイトを作っていきます。

では、CSSとは

CSS(Cascading Style Sheets)の略です。

HTMLでは見出しや段落、リンクなどを設定します。ですが、CSSでは見た目を変えます。文字の大きさや色、余白を設定します。

私のブログで、ソースコードを見て頂ければわかりますが、CSSという項目があり、そこに書かれているのが、CSSのスタイルシート言語になっています

分かりずらいかも・・・・

/*———————————————-

英語が4行ぐらい

———————————————– */

これの下にあるものです。

「cssなんですね。違いが分からない」

「それぞれ書き方さえも違いますよ」

HTMLとCSSの書き方

タグを使って命令をします

よく使うのが、

・・・・

とか・・・・、

・・・

ブログだとこれらかな

これで例えるなら、<タグ>・・・</タグ>

タグとはdivやspanのことを言いますね。

・・・の後ろの「/」がついていると思いますがこれがこのタグの終わりを意味します。

<タグ>から</タグ>ここまでということですね。

<タグ>・・・</タグ>これの形のことを要素と言います

これでいうと・・・・が要素内容の部分

これらに属性を付けることが出来ます。属性とは効果のことを指します。

付かする場所して属性を開始タグに追加することで効果が付加される。

<h1 id=”goodstitle”>私はプロブロガーになってやる。</h1>

こんな感じになります

それぞれを説明すると

id・・・・・・・・・属性名

”goodstitle”・・・・属性値

id=”goodstitle”・・・属性

「HTMLの書き方はこんな感じですよ」

「開始タグに属性を付けると何が変わるか実感できない」

「それは今度かな?」

「今教えてよ」

「だめ!!!」

HTMLでよく使われる要素があります

それらをまとめときました。

html要素
文章全体を定義
Head
文章の詳細設定
Body
コンテンツを定義
h1
見出し
P
段落
A
ハイパーリンク指定
Br
改行
Img
画像表示

専門用語まとめ

書く上で、出てくるであろう用語

用語
意味
タグ
<>で囲まれたもの
マークアップ
文字構造やレイアウトの指定をすること
開始タグ
終了タグ
要素
開始タグから終了タグまで全部
要素内容、要素
挟まれたテキスト
空要素
終わりのタグが存在しない
属性
開始タグに追加すると効果を付けられる
セレクタ
スタイル適用のための要素や属性
プロパティ
プロパティの値
宣言
要素の表示指定
宣言ブロック
{}全体のこと

特集文字

HTMLでは、タグとWEB上で表示を分けるために下記のように書きます。

WEB上の表示させる場合は、右を書きます。

<
>
&
&
©
©
~
˜
^
ˆ
半角スペース
 

これはちょっとした一例です。


こちらを見て頂ければ、他の物も書いています。参考にしてみてください。

CSSコード

基本的には

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

このような形になります

例:p{font-size:1.3px}

コメントの書き方

/*コメント*/

例:

/*俺は有名なブロガーになる*/

これの使い方はCSSを書いていく中でそのコードソースが何を意味するのかをメモする役割があります。

「二つの違いは、なんとなく分かったよ」

「こんなに説明してなんとなくかよ」

まとめ

今回説明したは基本中の基本の内容になります。

言うなれば、今回のことを覚えとけば、HTMLは使いこなせるということです。

数学でいうならセレクタ{プロパティ名:値}この形が公式で、それぞれ(セレクタ、プロパティ)に与えられたものを代入していくようなものですよ。

分かりにくい例えを言ってしまってごめん_( _´ω`)_ペショ

今回はここまで

コメント