Webコンテンツ作成

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

サイトを作る(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. プロフィールサイトを作って公開してみる

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

  1. Google検索で1位を取るための考え方
  2. Google検索で1位を取るためのサイト(アイデア)

アプリを作る(JavaScriptを学ぶ)

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

  1. JavaScriptの始め方
  2. JavaScriptの配列
  3. 関数の記述方法と使い方
  4. JavaScriptでホームページを書き換える
  5. JavaScriptでホームページの見た目を変える
  6. JavaScriptでの乱数の使い方
  7. イベント処理について
  8. タイマー(setTimeout)によるイベント処理
  9. setTimeoutによる再帰処理でデジタル時計を作る
  10. オブジェクトを利用する
  11. JavaScriptでのクラス作成基本
  12. JavaScriptクラスを応用してみる
  13. JavaScriptでスマートフォンの傾きを検出する
  14. JavaScriptでスワイプ処理をする
  15. ローカルストレージの基本
  16. ローカルストレージに保存されたデータをChrome上で確認する方法

その他ちょっとしたアプリの実例は本ブログ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. WordPress:サイトにメニュー項目を設定する
  14. ユーザに使いやすいサイトにする
  15. ウィジェットによるサイト表示項目の設定
  16. 検索されるための対策
  17. WordPressにPING送信先設定をする
  18. Cocoon:投稿記事に検索用説明文を設定しよう
  19. ワードプレスのセキュリティを高める
  20. 固定ページを使って企業サイトっぽくする
  21. WordPressのギャラリーブロックで写真を効果的に魅せる
  22. ギャラリー見本
  23. WordPress:ZIPファイルをダウンロードできるページを作る
  24. XfreeレンタルサーバーでWordPressの手動バックアップをする
  25. A8.netを使ったワードプレスサイトへの広告掲載手順
スポンサーリンク
dennouをフォローする
電脳産物