HTMLとCSSの言語！。基本、ワードプレスは、特別なプログラミングスキルがなくても何ら問題はなく、誰でもブログを構築することが可能です。今回は、HTMLとCSSの言語！について書いていきます。
最近では「HTML」や「CSS」と言ったような言語を知らなくても、ある程度のブログを構築することはできます。ですがオリジナル性のあるブログを作り込みたいと願うのであれば、それなりの知識は必要です。
| 結論を先に話ししておきます |
| Webのプログラミングに欠かせない言語と言えば「HTML」と「CSS」です。しかしながら、他のプログラミング言語の経験者にとっては、コードの書き方が違い過ぎて混乱した人も多いのではないでしょうか。
ぶっちゃけた話し「HTML」と「CSS」については、プログラミング言語と呼ばれるものではないのです。だとすると「HTML」と「CSS」は、一体何言語なのでしょう。この章では、プログラミング言語について解説していきます。
ちなみに私は、一昔前に「HTML」も「CSS」もある程度の勉強をしているので人通り分かっているつもりです。これから「HTML」と「CSS」について、学んでいきたいと考えている方は参考にしてみて下さい。
以前投稿した関連する記事にも、目を通して貰えると幸いです。 |
| WordPress専用LP制作プラグイン「LPtools」。 |
目次はコチラ
【プログラミングとは(動画付き)】
あなたは「プログラミング」と言う単語を、一度は耳にしたことがあるのではないでしょうか。実際に、使用することがない人も多い「プログラミング」ですが、現代の「プログラミング」は、様々なところで利用されています。
| プログラミングとは |
| 少し難しい話しをします。特定のコンピューティングの結果を得ることを目的とした実行可能なコンピュータープログラムのことを「設計」や「構築」する為のプロセスと言います。その他の例としては「アルゴリズムの生成」の他。
「アルゴリズムの正確」「リソースの消費量」「プロファイリング」などがあり、選択したプログラミング言語での「アルゴリズムの実装」があります。プログラムのソースコードは、コンピューターのCPUで直接実行される機械語ではありません。
プログラマーが理解できる1つ以上のプログラミング言語で書かれています。「プログラミング」の目的は、あるタスクをコンピューター上で自動化する1連の命令を見つけることで、与えられた問題を解決することです。 |
ではここで動画を視聴してみて下さい。題して「【初心者向け】プログラミング学習の始め方【3ヶ月で達成できる】」です。
【HTMLとは(動画付き)】
「HTML」とは「HyperText Markup Language」と言います。冒頭でも説明してますが「HTML」は、プログラミング言語ではありません。「HTML」の場合、コンテンツの構造を定義する「マークアップ言語」と呼ばれるものです。
| HyperText Markup Languageの読み方 |
| 「HyperText Markup Language」の読み方は「ハイパーテキスト・マークアップ・ランゲージ」と読みます。良く覚えておきましょう。 |
| ハイパーテキストとは |
| 「ハイパーテキスト」とは、ハイパーリンクを埋め込むことができる高機能なテキストを言います。「ハイパーリンク」と言うのは、Webページに於いて、下線の付いたテキストなどをクリックすると、別ページへ移動するリンクのことです。 |
| マークアップ言語とは |
| 「マークアップ言語」とは、文章の論理的な構造や修飾情報に関する指定を文章と併せてテキストファイルに記述する為の言語です。代表的なものに「SGML」「HTML」「XHTML」などがあり、コンピューター言語の一種です。 |
「HTML」は、Webページを作成する為に開発された言語です。昔も今もWebページのほとんどが「HTML」で作成されています。では「HyperText Markup Language」を訳すと「ハイパーテキストに目印をつける言語」と言う意味になります。
「ハイパーテキスト」では、Webページから、他のWebページにリンクを貼ったり、Webページ内に「画像」「動画」「音声」などのデータファイルをリンクで埋め込むことが可能です。ちなみに「Word」「Excel」なども「ハイパーテキスト」です。
| 「HTML」には、このハイパーリンク機能で関連する情報同士を結びつけ、情報を整理すると言う特徴があることを覚えておきましょう。 |
ではここで動画を視聴してみて下さい。題して「【たった1動画で全てが分かるHTMLの教科書】」です。
HTMLの基本要素(動画付き)
「HTML」の基本要素で、特に覚えて貰いたいことを書いていきます。この章では「HTML」の基本要素に於いて、重要な役割を持つ3つの要素について説明していきます。記述する箇所も決まっているので難しくないと思います。
| 1つ目：全ての要素となるhtmlタグ |
| Webページが「html」であることを宣言する為に使われるタグです。このタグの中に「html」のコードを記述していきます。「html」に必要な全ての要素を記述する為「html」ファイル内に記述する宣言以外の全てのタグの親要素となります。
それが<html>～</html>です。 |
| 2つ目：文書自体の情報となるheadタグ |
| 文書の「head」情報を表す為に用いられるタグです。「head」情報とは、そのWebページがどのような意味を持っているのか、またどんな言語が使われているのかなど、文書自体が持っている情報のことを言います。
それが<head>～</head>です。 |
| 3つ目：文章の内容を記述するbodyタグ |
| 「body」タグとは、文書の内容を記述する為に用いられるタグです。「body」タグ内に記述した「見出し」「文章」「画像」など、実際のWebサイト上に表示されます。これらは「head」タグの下に記述し「body」タグ内では「文字の色」「画像の大きさ」「リンクの色」などを設定します。
それが<html> |
ではここで動画を視聴してみて下さい。題して「【HTML #1】基礎からちゃんと学ぶ HTML 入門！タグの要素を理解してコーディングしよう！」です。
| 【上位版】次世代型サイト作成システム「SIRIUS」。 |
【CSSとは(動画付き)】
「CSS」とは「Cascading Style Sheets」と言います。「HTML」同様、プログラミング言語ではありません。「CSS」の場合、Webページのスタイルを指定する為の言語であって「スタイルシート言語」と言います。
| Cascading Style Sheetsの読み方 |
| 「Cascading Style Sheets」の読み方は「カスケーディング・スタイル・シート」と読みます。良く覚えておきましょう。 |
「CSS」は、ワープロソフトなどで作成される文書も含め、文書のスタイルを指定する技術全般をスタイルシートと言います。「HTML」や「XHTML」などで作成されるWebページにスタイルを適用する場合、次のようになります。
それは「スタイルシート言語の1つであるCSSが一般的に利用される」と言うことです。念の為、記載しておきますが「CSS」を用いる場合「HTML」と組み合わせて使用する言語となりますのでお忘れなく。
また「HTML」が、Webページ内に於いて、各要素の意味や情報構造を定義するのに対し「CSS」では、それらをどのように装飾するかを指定します。例えばですが、Webページがスクリーン画面に表示される際の出力で言うならば。
| Webページをどのようなスタイルで「表示」「出力」「再生」するのかについて指定することが可能な訳です。 |
ではここで動画を視聴してみて下さい。題して「【たった1動画で全てが分かるCSSの教科書】」です。
CSSの基本
冒頭でも説明してますが「CSS」とは、Cascading Style Sheets(カスケーディング・スタイル・シート)と言います。「スタイルシート」は「階段状の滝」を意味する「cascade(カスケード)」になぞられて「CSS」と名づけられました。
「HTMLは、Webサイトの基本的なテキストを形作るもの」に対し「CSSは、見た目を作る言語であり、ブログのスタイルを指定する為の言語」です。「CSS」を用いれば「HTML」で記述した文字の色を変更したりすることができます。
またレイアウトを整理したりするだけではなく、コンテンツ内にある背景色の変更などをおこなうことも可能です。更に言えば、音声デバイスや点字デバイスにも対応しており「HTML」で不可能だったことができるようになります。
カスケードとは
「CSS」は、Cascading Style Sheets(カスケーディング・スタイル・シート)と冒頭で説明させて頂きました。「カスケード」とは、どのような意味をなすのでしょうか？ここで確認しておきましょう。
「カスケード」についても説明しておくと「カスケード」とは、広範囲で定義されたスタイルを順番に引き継ぎながら、局地に定義されたスタイルを段階的に適応していく作業のことを言います。
広範囲に定義されたスタイルから、優先順位が決定されます。その為「CSS」は、複数の定義方法がある訳ですが、異なったスタイル定義がおこなわれる場合、定義した場所によって、優先順位が決まっていきます。
CSSにおけるサイズ単位(動画付き)
「CSS」を何となく使っていませんか？「CSS」では、いろいろな「単位」を用いて、サイズや余白を指定することができます。それぞれの単位の違いを理解して使えば「ずれる」と言ったようなトラブルを防げます。
「CSS」には「margin」「padding」「line-height」「font-size」と言ったような様々なプロパティがある訳です。プロパティでは、異なる用途に対応する為、長さを指定する単位が沢山あります。
問題なのは「CSS」プロパティに、別の単位で同じ値を設定したとしても、実際に表示される大きさが異なっていて、上手くいかないことがあります。例えばですが、要素の「widthプロパティ」や「heightプロパティ」などです。
|
ピクセルは、サイズを固定する単位です。例えばですが、1ピクセルは、ユーザーの画面では、ドット1個として表示します。 |
|
フォントサイズの設定に「em」単位を使った場合、ユーザー設定のオーバーライドに関する問題を回避しやすくなります。 |
|
「em単位」の問題は、親要素の「font-size」に従って、子要素の「font-size」が、拡大縮小するのが望ましいとは限りません。 |
|
パーセントは「em単位」と同じです。ルート要素におけるブレークポイントに於いて「font-size」を設定します。 |
|
「viewport単位」は、興味深い単位です。様々な要素の「font-size」をビューポートのサイズを基準にして設定できます。 |
上記で紹介した単位をプロダクトで使う前に、ターゲットブラウザーでの対応状況を確認した方が良いです。「px」「pt」「pc」「in」「cm」「mm」と言った絶対単位は、全てのブラウザーでサポートされています。
ではここで動画を視聴してみて下さい。題して「「px」「em」「%」ホームページ制作においての重要なサイズ単位[CSS]【ホームページ制作入門講座】」です。
今回は以上となります。HTMLとCSSの言語！について、初心者の方には難しい内容だったと思います。しかしながら「HTML」や「CSS」を覚えておくと、将来的には、役に立つのではと思っています。
以前投稿した関連する記事にも、目を通して貰えると幸いです。
