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

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

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

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / 初心者のためのホームページ制作

初心者のためのホームページ制作

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

web_binner

サンプルサイトのデザイン完成系これからホームページを作りたいという初心者の方向けにHTML、CSSをサンプルサイトの完成を目指してスキルを習得するコンテンツです。全13回のエントリーを一つずつこなしていくことで段階的にスキルアップすることが可能です。

最終的に制作するサイト

以下のサイトをサンプルとして制作することを最終目標とします。(クリックして拡大)
サンプルサイトのデザイン完成系

目次

  • 11.はじめに
    ホームページを作るためのコストは下がり簡単につくれる環境が安価に揃うようになりました。
    作り始める前のプロローグ。
  • 22.前提知識
    ホームページは何でできているか?HTMLとCSSとは?作ったデータを確認するためのブラウザの説明など。
    制作に入る前の前提知識の説明ページです。
  • 33.ホームページ制作に必要な環境
    制作のための環境を作りましょう。エディタやブラウザなど必ず必要なものと、サーバーやFTPソフトなど後からでも問題ないものの紹介とそれらが何のためにあるのかという説明です。制作前にここを見て環境を整えてください。
  • 44.HTMLファイルを作ってみよう
    環境が整ったら早速HTMLファイルを作ってみましょう。いくつかバージョンがありますがHTML5で制作します。
    必要最低限のタグの説明。
  • 55.HTMLで使う主要なタグを知ろう
    HTMLファイルを作りにあたって使う主要なタグの書き方や説明です。全部は覚える必要はないのでよく使うタグをピックアップして紹介。
  • コラムコラム:htmlタグ周りの特殊な読み方
    コードを書いていると声にだしてコードを読むことがないので意外と知られていないコードの読み方。もともとは英語なので絶対の正解はないのですが誰かに説明する際にはやはりなんて発音するかというのは知っておいて損はないですよね。
  • 66.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成
    実践です。ラフ図面を元にHTMLファイルを組み立ててみましょう。作りたいサイトのラフ案からどのようにHTMLファイルを組み立てていけばいいかを説明します。
  • 77.装飾をするためにCSSを使う
    ここからはCSS。CSSの基本的な書き方からセレクタ、プロパティ、値の関係まで。CSSがわからないという方は是非ご覧ください。
  • 88.CSSで使う主要なプロパティと値を知ろう(1)
    HTMLと同じようにCSSも主要で使うプロパティがあります。全部覚える必要はまったくなくこういった頻繁に出てくるプロパティと値の組み合わせを覚えましょう。
  • 99.CSSで使う主要なプロパティと値を知ろう(2)
    引き続き主要なプロパティのご紹介。CSSは覚えていくと他のプロパティや値も同じような法則で作られているためこの2つのページは基本としてしっかり覚えておくと後がラクになります。
  • 1010.ブロックレベル要素とインライン要素について
    CSSを組み立てていく上で非常に重要な概念、ブロックレベル要素とインライン要素。どういったHTMLタグがブロックでインラインなのか、詳しく解説します。
  • 1111.HTMLファイルにclassとidをつける
    HTMLとCSSをつなげる重要なclassとidについて説明します。一緒に「属性」という言葉も覚えましょう。
  • コラムコラム:class名とid名はどうやってつければいい?
    idとclassに名付ける際の名前。最初はどういった名前をつけようと考えてもなかなかいいものが浮かばす困るものです。
    ここでは命名に困らないよう場所ごとに分けてよく使う名前や組み合わせを紹介します。わかりやすい名前を使うことは後々修正にも役立ちます。
  • 1212.CSSを書いてレイアウトやデザインを施す(前編)
    CSSを覚えたところでウェブサイトを完成させます。完成系のイメージを見つつ、制作したHTMLファイルを元に組み立てます。ウェブサイト制作前編。
  • 1313.CSSを書いてレイアウトやデザインを施す(後編)
    ウェブサイト制作後編。いよいよ最後の仕上げです。サンプルファイルもあるので制作したファイルと見比べてみてください。
メールコンサルティング
WordPress保守管理サービス

Filed Under: ホームページ制作無料講座 関連タグ:css, HTML

池田祐太郎

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

この記事と関連する記事

8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
6.確認から制作まで即使えるCSSの機能(2/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 外部のプロフェッショナルによる WordPress サイトの保守・運用:安心と安全性を手軽に手に入れる方法
  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上

カテゴリー

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

タグ

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

アーカイブ

CONTACT

お問い合わせはこちら

Footer

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

© 2023 high five create All rights reserved.