Webコンテンツ作成

2021.11.26

基本的なウェブサイトの作り方から公開方法、コンテンツのアイデアを紹介しています。
授業や独学にご活用ください。

サイトを作る（HTMLとCSSを学ぶ）

記事や内容にHTML5という表記が多々ありますが、全てHTMLと置き換えて読んでください。
以前は、HTML4.01, HTML5などとHTMLにバージョンをつけていました。
現在は廃止されました。

コピー＆貼り付け ではなく全て 手入力 すると身につきます

  1. Webサイト制作の概要
  2. ホームページ制作前に知っておきたいこと
  3. HTML5のひな型
  4. HTMLの基本タグ1（html,head,body…）
  5. HTMLの考え方（インライン要素とブロックレベル要素）
  6. HTMLの基本タグ2（ol,ul,li）
  7. HTMLの基本タグ3（a）
  8. HTMLの基本タグ4(img)
  9. ホームページで扱うことができる画像について
  10. HTMLの基本タグ5（table）
  11. HTML：テーブルのセルを結合する（項目21とほぼ同じ内容）
  12. HTML5で意味を持つタグ主なものまとめ
  13. HTMLでの特殊文字©などの表記方法
  14. CSSの基本1（プロパティとプロパティ値、3つの記述方法）
  15. CSSの基本2（spanタグの利用、classとid）
  16. CSS演習
  17. 請求金額一覧表を作る課題／解答例：請求金額一覧表にCSSを設定
  18. CSSの疑似クラスについて
  19. CSS：背景画像を設定する
  20. HTML:フォームタグについて
  21. HTML：イレギュラーなセルをもつテーブル
  22. HTMLとCSSの練習問題

Webクリエイター能力認定試験

  1. Webクリエイター能力認定試験の受験用語を押さえておく
  2. 検定問題のダウンロードと準備

HTMLとCSSのドキュメント

詳しくなりたい方はMozillaのサイトを熟読しましょう

サイトを公開する（無料レンタルサーバを使ったサイト公開方法）

紹介しているXFreeは日本の無料レンタルサーバの草分け的存在です。
HTMLサーバ、PHPサーバ、ワードプレスサーバの3種類が無料で使えて授業に重宝しています。

  1. ウェブサービスの仕組み
  2. Xfreeレンタルサーバを利用してホームページを公開する
  3. サーバに画像やHTMLファイルをアップロードする際の注意点
  4. フォルダとURLの関係
  5. サイト画像をどんな端末でもフィットさせたい
  6. Chromeでスマホやタブレットで見たときのサイトイメージを確認する
  7. プロフィールサイトを作って公開してみる
  8. リストタグを使って等間隔メニューを作る
  9. Google Fontsを手軽にHTMLサイトに導入する
  10. pタグやtextareaタグ内の文字列を自動改行させない
  11. width:100%にするとボックス内の要素が揃わない場合の対処
  12. videoタグを使って動画をサイトで再生する

検索で上位を狙う（どうせなら検索されるページを目指しましょう）

管理人より 2024-07-04

以下の検索で上位を狙う記事に関しては内容が古く現在では意味を持たなくなっています。以下に理由を述べます。

この記事を書いた当時（2018年頃）はGoogle検索で1位を取るということは個人サイトでも可能でしたが、2024年現在Google検索で表示される上位サイトは以前にも増してGoogle広告にお金を出している人（企業や個人）となってしまいました。Google側の対応によりSEO対策は大して意味を持たなくなりました。

Googleはお金を出した人が上位に表示されるというただのスポンサーサイトと化してしまったようです。（まあ、企業なので当たり前かもしれませんが…）

現在のGoogle検索は、個人が書いたちょっとした記事を検索できにくくなってつまらなくなったなあ、というのがわたしの感想です。

  1. Google検索で1位を取るための考え方
  2. Google検索で1位を取るためのサイト（アイデア）
  3. HTML部分のSEO対策について

著作権について

アプリを作る（JavaScriptを学ぶ）

ブラウザで動作するプログラミング言語JavaScriptを使うとちょっとしたアプリが作成できます。JavaScriptの基本を学びましょう。

  1. JavaScriptの始め方
  2. JavaScriptの配列
  3. 関数の記述方法と使い方
  4. JavaScriptでホームページを書き換える
  5. JavaScriptでホームページの見た目を変える
  6. イベント処理の書き方
  7. 起動時（ホームページ読み込みが完了した際）に実行する
  8. 色々なイベント処理
  9. imgタグの画像を変更する
  10. JavaScriptでの乱数の使い方
  11. タイマー（setTimeout）によるイベント処理
  12. setTimeoutによる再帰処理でデジタル時計を作る
  13. オブジェクトを利用する
  14. キャンバスに図形を描画する
  15. キャンバスでアニメーションする基本
  16. JavaScriptでのクラス作成基本
  17. JavaScriptクラスを応用してみる
  18. JavaScriptでスマートフォンの傾きを検出する
  19. JavaScriptでスワイプ処理をする
  20. ローカルストレージの基本
  21. ローカルストレージに保存されたデータをChrome上で確認する方法
  22. 端末の短辺に合わせた正方形キャンバスを設定する

その他ちょっとしたアプリの実例は本ブログJavaScript講座でも解説しています。

コンテンツのアイデア

サイトは出来たが何をアップしたらいいのか分からない方は参考にどうぞ。

  1. 54文字小説を作る
  2. コンテンツを作って公開する（アニメGIF）／アニメーションGIFについて
  3. MP3音声コンテンツを作って公開する
  4. Sonic Piで作曲する
  5. フェイクニュースを作ってみる
  6. 自分のネット環境を偽ってネット接続する

手軽にサイト公開したい（ワードプレスを学ぶ）

いきなりワードプレスを使って楽するよりは、HTMLとCSSをざっと学んでからワードプレスに進んだ方がいざという時に対処できると個人的には思います。

  1. Xfree無料レンタルサーバーでWordPressを利用するまでの手順
  2. WordPressにテーマを導入してみる（Cocoonテーマの導入）
  3. WordPress：サイトタイトルの設定
  4. WordPress：Cocoonテーマ外観の設定
  5. WordPress使い方の基本
  6. 記事の投稿方法
  7. メディア投稿の方法
  8. アイキャッチ画像の設定方法
  9. ユーザに使いやすいサイトにする
  10. ユーザに分かりやすい記事タイトルと内容を心掛ける
  11. WordPress：記事をカテゴリー分けして使いやすくする
  12. サイトに親しみを持たせる
  13. Cocoonテーマで簡単にプロフィール欄を設置する方法
  14. WordPress：サイトにメニュー項目を設定する
  15. ユーザに使いやすいサイトにする
  16. ウィジェットによるサイト表示項目の設定
  17. 検索されるための対策
  18. WordPressにPING送信先設定をする
  19. Cocoon：投稿記事に検索用説明文を設定しよう
  20. ワードプレスのセキュリティを高める
  21. 固定ページを使って企業サイトっぽくする
  22. WordPressのギャラリーブロックで写真を効果的に魅せる
  23. ギャラリー見本
  24. WordPress：ZIPファイルをダウンロードできるページを作る
  25. XfreeレンタルサーバーでWordPressの手動バックアップをする
  26. A8.netを使ったワードプレスサイトへの広告掲載手順
ホーム
タイトルとURLをコピーしました