• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / 2.前提知識

2.前提知識

池田祐太郎 | 2013年9月25日 公開

ホームページ制作に入る前に、これだけは覚えてほしいことをまとめました。

目次

  • 1 ホームページは何でできているか
    • 1.1 基本の基本、HTML
    • 1.2 デザインを再現するCSS
    • 1.3 まずはHTMLとCSS
    • 1.4 その他の言語
  • 2 確認の友、ブラウザ
    • 2.1 どのブラウザを使えばいい?
    • 2.2 Internet Explorerはバグで有名
    • 2.3 ベストなブラウザ選択

ホームページは何でできているか

基本の基本、HTML

今見ているこのホームページはHTML(注1)という言語で書かれたファイルです。

例えば、メモ帳で何か文章を書いて「memo」という名前で保存したとします。そうするとその保存したテキストは「memo.txt」というテキストファイルとしてデータ化されます。
この「 .txt」というのは「拡張子(かくちょうし)」といって、このファイルがどういうファイルなのかを識別するためのものです。

これをHTMLに当てはめると、同じようにメモ帳で文章を書いて、「memo」という名前で保存します。
その時に拡張子を「html」にして保存すると、それは「memo.html」という名前のHTMLファイルになります。
極端な話、拡張子をHTMLにしてしまえば全部HTMLファイルになってしまうのです。

※拡張子が表示されてない!という方はこちらをどうぞ

言ってしまえば、HTMLというのはホームページを表示するために開発された共通のルールです。
「HTMLを使って書けば全世界共通でみれるから、みんなHTMLを使って書こうね」
だからインターネットがあればアメリカのサイトも、ドイツのサイトもタイのサイトもブラジルのサイトも見れるのです。

こう考えると便利なルールですよね。

デザインを再現するCSS

HTMLだけでは、味気ないサイトになってしまいます。
試しに、HTMLだけで作ったサイトを見てみましょう。

HTMLだけで作ったサンプルサイト

今どき、こんなサイトありませんよね。
そこで、サイトを綺麗に見せたいというニーズによって生まれたのがCSS(注2)です。

CSSを使えば、テキストの色を変えたり、フォントの大きさを変えたり、位置を1px単位で動かしたり、要素を見えなくしたり等…いろいろとできるようになりました。

「こんなデザインのホームページにしたいな」

と思っているだけでは、その通りのホームページにはなりません。
具体的に「この部分の背景色を黒くして」と「命令」しないといけません。
それがCSSの役目です。

まずはHTMLとCSS

このようにHTMLで中身を作り、作ったデータに対してレイアウトやデザインをしていくのがCSSというのがわかりました。

「ホームページを作れるようになるには何をしたらいいか?」

まずはHTMLとCSSを覚えましょう。
これができるようになればホームページが作れるようになります。

その他の言語

HTMLとCSS以外にもホームページを作る上で必要な言語があります。
例えばJavaScript(注3)や、PHP(注4)等です。
ただこれらは、プログラミング言語になるので今は必要ありません。HTMLとCSSではできないことが出てきた時に学べばOKです。
今は「こういうものがあるんだ」くらいで問題ないです。

確認の友、ブラウザ

このホームページを見ているのに使っている「ブラウザ」。
おそらくInternet Explorerとか、Chrome、Firefox、Safariなどを使ってみていると思いますが、これらのことをブラウザと呼びます。

Windowsをお使いで、特に何も変更していない場合はInternet Explorerを使っているはずです。MacであればSafariです。
このブラウザを使ってこれから作成していくHTMLファイルを確認します。
HTMLのタグを打って、それが間違ってないかブラウザで確認したり、CSSがちゃんと効いているかどうかをブラウザで確認します。
最初のうちは書いたら確認、書いたら確認、というのを癖にすると間違いが起こりにくいです。

どのブラウザを使えばいい?

このブラウザは好きなものを使っていただいて結構なんですが、ホームページ制作をするのであれば通常確認用はChromeやSafari、もしくはFirefoxをお勧めします。
要は「Internet Explorerを使わない」ということです。

Internet Explorerはバグで有名

Internet Explorerは予期せぬバグで有名で、ホームページ制作の人間からしてみると本当に消えてなくなってほしいと思っている人間もいるほど、ダメダメなブラウザでした 笑
Internet Explorerはバグが多くエラーや崩れをそのまま出力するので気づかないということが多々ありました。特に初心者のうちは「なぜここがこのようになるのかわからない」といった問題で数時間悩み、原因がInternet Explorerの独特のバグだった、ということもよくあります。

しかし今はバージョンが上がってきていて、昔に比べかなり良くなりましたが、対応していない新しいバージョンのCSSがあるなど、未だに名残があります。

ベストなブラウザ選択

当サイトはChromeを基本として進めていきます。便利なプラグイン等も紹介していくので、特にこだわりがなければChromeブラウザを是非お使いください。Googleが開発したブラウザで、プラグインも充実していてInternet Explorerに比べかなり早くさくさく動きます。
Chromeダウンロード

そして第二の確認用として、FirefoxやInternet Explorerを使えば最適なブラウザ環境に。
Chromeでは崩れていなくてもInternet Explorerでは崩れている、ということも多々あるので、確認用として使っていきます。

注釈
注1:エイチ・ティー・エム・エル。Hyper Text Markup Lanugageの略
注2:シーエスエス。Cascading Style Sheetの略
注3:ジャバスクリプト。ブラウザ側で実行するため特に必要とするものがなく実行できる。
注4:ピーエイチピー。サーバー側で実行するので環境によって結果が左右されない。

次の講座:3.ホームページ制作に必要な環境←目次に戻る
メールコンサルティング
WordPress保守管理サービス

Filed Under: ホームページ制作無料講座

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

3.ホームページ制作に必要な環境
2013年9月28日
カテゴリー: ホームページ制作無料講座
1.はじめに
2013年9月25日
カテゴリー: ホームページ制作無料講座
初心者のためのホームページ制作
2013年9月25日
タグ: css, HTML
カテゴリー: ホームページ制作無料講座

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressプラグインのAI Engineを使ってコンテンツを自動生成してみる
  • ChatGPT の Webpilot プラグインを使って YouTube動画の内容を瞬時に把握
  • Photoshop の書き出し機能を活用したウェブ用画像の最適化とサイズ調整
  • 一つのバナーサイズで複数デバイスをカバーし、サイト運営を効率化させる
  • 注意。wp-config.php ファイルのバックアップはサーバーに置いてはいけない

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール デザイン ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 効率化 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.