このページの内容
HTML、CSS、JavaScript、PHPとは何か?
簡単に言うと、
HTMLが内容担当、文字内容や画像や映像を並べます。
CSSがスタイリストさんのようにデザイン・装飾担当。かっこよくやかわいいをしてくれます。
JavaScriptが動きなど担当。何かをクリックしたら動くなど動的な表現となります。
PHPはブログや問い合わせなどフォームに入力してやりとりができる担当。サーバーと呼ばれるテレビで例えると放送局のような中心部があります。そこで動くプログラムです。
学ぶ順番のオススメ
- HTML: ウェブページの基本的な骨組みを理解するために最初に学びましょう。
- CSS: HTMLで作った骨組みをきれいにデザインするために学びます。
- JavaScript: ウェブページに動きを追加するために学びます。
- PHP: ウェブサイトの裏側の処理を学ぶために学びます。
HTML、CSS、JavaScript、PHPの内容と書き方の例
1.HTMLのの内容
HTMLは「HyperText Markup Language」の略で、ウェブページの骨組みを作るための言語です。文章の見出しや段落、画像などの配置を決めるのがHTMLの役割です。
HTML書き方の例
HTMLの基本的な構成要素は、開始タグと終了タグからなります。開始タグは、角かっこで囲まれた要素名を含む記号で表され、終了タグは、開始タグと同じ要素名を含む記号で表されます。開始タグと終了タグの間には、要素の内容が記述されます。
例えば、段落を作成する場合は、<p>開始タグと</p>終了タグで囲まれたテキストを記述します。また、リンクを作成する場合は、<a>開始タグには、リンク先のURLを指定し、テキストを挿入して、</a>終了タグで囲みます。
<h1>HTML書き方</h1>
<p>これは段落です。</p>
<p><a href="https://www.yahoo.co.jp/">yahooのサイト</a>のリンクです。</a></p>HTMLには、見出し、画像、表、フォームなど、さまざまな要素があります。これらの要素を適切に組み合わせることで、魅力的で使いやすいWebページを作成することができます。
2.CSSの内容
CSSは「Cascading Style Sheets」の略で、ウェブページのデザインやスタイルを決めるための言語です。HTMLで作った骨組みに色や形を付けるのがCSSの役割です。
例えば、テキストの色やフォント、背景色や背景画像、ボーダーや余白、配置などを指定することができます。
CSSは、HTMLのようなマークアップ言語ではなく、スタイルシート言語と呼ばれます。これは、スタイルの定義とWebページの内容が分離されることを意味します。この分離により、同じHTMLコードを使いながら、異なるスタイルを適用することができます。また、スタイルの変更を容易にすることができます。
CSS書き方の例
h1 {
color: blue;
}
p {
font-size: 16px;
}3.JavaScriptの内容
JavaScriptはウェブページに動きやインタラクティブな機能を追加するためのプログラミング言語です。例えば、ボタンをクリックしたときに画像が変わるような動きを作るのがJavaScriptの役割です。
JavaScript書き方の例
document.querySelector("button").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});4.PHPの内容
PHPはサーバーサイドのプログラミング言語で、ウェブサイトの裏側で動く処理を書くためのものです。例えば、ユーザーの情報をデータベースに保存するときなどに使用します。
PHP書き方の例
<?php
echo "PHP書き方";
?>Web制作がはじめての方
Web制作がはじめての方は下記の記事で心得ををご覧ください。
