サイト作成を教えます

html/cssについて紹介していきます。

サイトを作成する--説明編--

皆さんこんにちは。
最近では、小学校の授業でプログラミングが科目としてあったりしていますが、御覧の皆さんは、プログラミングはできますか?
サイトは大まかに分けると2つに分類されます。
1つ目はサイトの表側です。よく皆さんが目にしている部分ですね!
2つ目はサイトの裏側です。ログインだとか会員登録だとかというものです。こちら側に関しては追々説明していきます。
今回は、説明編ということで、説明していきます。
--説明の前に--
説明に入る前に、サイトを作成するうえで、必要になってくるのが、エディタです。エディタは、簡単に言うと、ノートみたいなものです。そちらの方にコードを書いていく形になります。一般的なのは、Adobe社のDreamweaver(以下DW)が有名です。無料体験だと7日間使えるので、試しに使ってみるのもよいかもしれません。
私は、DWも使ったことがありますが、個人的にはSublime Text(サブライムテキスト)と呼ばれるものを使用しています。サブライムテキストはフリーソフトなので、adobeが買えない方などにおすすめです。
--早速説明--
表側を作るには、HTMLCSSを使います。
HTMLとは、Hyper Text Markup Lunguage(ハイパーテキストマークアップランゲージ)の略です。
CSSは、Cascading Style Sheets(カスケーディングスタイルシート)の略です。
HTMLはサイトの骨組みの部分になります。CSSはそれを装飾する役割を果たします。
HTMLは保存する際、『〇〇〇(任意の名前).html』となります。CSSも同じく『〇〇〇.css』となります。
実際のものを見て見ると

ファイルの名前は基本的に英語の小文字を使います。日本語は使いません。HTMLの初めの1ページ目の名前は基本的にindex.htmlです。次のページはタイトルに応じて付けていきます。(例)〇〇についてのページだったらabout.htmlとなります。
cssは、style.cssで始めます。
サイトを見ていると、画像もありますよね?画像はimagesの中に保存しておくとよいでしょう。
--画像について--
ちなみに、画像のjpg、png、gifの違いはご存知でしょうか。色がどうのこうのという説明はしないので、詳しく知りたい方は検索でもしてください(笑)
大まかな違いとして、jpgは背景が透明になってくれないということがあります。上に張っている画像もjpgです。背景が透明になってくれないというのはどんなことかというと、

png画像 こちらはpngです。  jpg画像 こちらはjpgです。


保存して見て見るとわかると思いますが、pngは背景が透明になっているのに対し、jpgは背景が白色があります。ロゴなど、画像を強調した場合などは、pngである場合が多いです。jpgはダメかと言われると、そうではありません。背景色がある場合や背景が透明じゃなくてもいいから画質を上げたいという場合に使います。jpgの方がpngより画質はいいです。また、gifですが、よくgifアニメーションなどという言葉を耳にするかと思います。考え方としては動いてほしい場合に使います。

        gif画像

こちらが、gif画像です。こんな感じで動いているものをgifと言います。上の画像では背景が白になっていますが、こちらもpngと同じで背景を透明にすることができますが、画質が劣ってしまいます。

用途に応じて、jpg、png、gifを使い分けるという事も大切です。


今回は、ここまでになります。
なお、ここがわからない。もっと詳しく教えてほしいという方は、コメントしていただければ、お答えいたします。


次回は、HTMLとCSSの書き方について説明します。




×

非ログインユーザーとして返信する