40代高卒者が製造業からIT転職する【WEB制作編】
こんにちは、フローです。
今回は、私が勉強して来たHTML/CSSを使って、
簡単なWEBサイトを一緒に作って行こう〜！って事で
書いていきたいと思います。
目次
HTML/CSS
HTMLとは
HyperText Markup Languageの略称で、Webページを作成するための言語の一つです。
テキストエディタで作成することができ、WEBブラウザで表示される文章や画像、
リンクなどの要素を記述するためのタグを使用します。
タグには、開始タグと終了タグの2つがあり、開始タグで要素を始め、終了タグで要素を終えます。
例えば、<p>という開始タグと、</p>という終了タグで囲まれた部分が段落を表します。
CSSとは
Cascading Style Sheetsの略称で、HTMLで作成したWebページのデザインを制御するための言語の一つです。
HTMLでは、文章や画像などの要素を記述しますが、
CSSでは、それらの要素の見た目や位置を指定することができます。
たとえば、文字の色や大きさ、背景色、フォントなどのスタイルを指定することができます。
CSSはHTMLとは別のファイルで作成し、HTMLの<head>タグ内で呼び出すことができます。
以上が、HTMLとCSSの基本的な概念や意味になります。
簡単なコード
簡単なコードの記述例をいくつか示します。
まず、HTMLで段落を作成する場合は、
<p>と</p>のタグで囲んで文章を入力します。以下が、HTMLで段落を作成する例です。
html
<p>これは段落の例です。</p>
次に、CSSで文字色を変える場合は、
colorプロパティを用いて指定します。以下が、CSSで文字色を赤色に変える例です。
css
p {
color: red;
}
HTMLとCSSを一緒に使って、背景色を設定する方法もあります。
以下が、HTMLとCSSを一緒に使って背景色を設定する例です。
HTML
<!DOCTYPE html>
<html>
<head>
<title>背景色を設定する</title>
<style>
body {
background-color: #f0f0f0 ;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>背景色を設定する例</h1>
<p>ここに文章を入力します。</p>
</body>
</html>
上記の例では、HTMLの<head>タグ内でCSSを読み込んでいます。
<style>タグ内で、背景色を指定するbackground-colorプロパティと、
文字の色を指定するcolorプロパティを設定しています。
また、<body>タグ内には、HTMLで記述した文章が表示されます。
以上が、HTMLとCSSの簡単なコードの例になります。
まとめ
今回はHTML/CSSの概要と、簡単なコードの記述例を書いてみました。
とはいえ、まだまだ、何のこっちゃだと思います。
次回はもう少し詳しく説明を付けて書きたいと思います。
一緒に勉強していきましょう！
この記事が気に入ったらサポートをしてみませんか？