Web制作

Top > Web制作
公開日:2016年07月18日
更新日:2019年04月13日

概要

  • インターネットとWeb制作ソフトについて。環境・プログラミングなど。

目次


ページの登録タグ

免責事項

  • 商品の仕様・内容・デザイン・付属品・品番・価格等は予告なく変更になる場合があります。
  • 掲載されている内容が最新とは限りません。
  • 掲載されている内容に不備がある場合があります。
  • 掲載されている内容を保証するものではありません。

歴史

1980

  • 1989
    • 欧州原子核研究機構(CERN)でグローバル・ハイパーテキスト・プロジェクト開始。

1990

  • 1990
  • 1991
    • 欧州原子核研究機構がWWW(Worldwide Web)プロジェクト発表。
    • 欧州原子核研究機構が世界初のウェブサイトを公開。
  • 1992
  • 1993
    • 米国立スーパーコンピュータ応用研究所(NCSA)がNCSA Mosaicをリリース
  • 1994
    • 4月、モザイク・コミュニケーションズ設立。
    • 10月、W3C(World Wide Web Consortium)設立。
    • 11月、モザイク・コミュニケーションズがネットスケープコミュニケーションズに社名変更。
    • 12月、ネットスケープコミュニケーションズが「Netscape Navigator 1.0」をリリース。
  • 1995
    • 3月、米国でYahoo!設立。
    • 8月、Windows95英語版発売。Internet Explorerはオプション「Microsoft Plus! for Windows 95」に収録。
    • 11月、Windows95日本語版発売。★関連記事Microsoft Windows
  • 1996
    • 1月、ソフトバンクがYahoo! JAPAN設立。
    • CSS1.0勧告
  • 1997
    • HTML4.0勧告。
    • マクロメディア社がFlashをリリース。
    • マクロメディア社がDreamweaverをリリース。
    • アドビ社がGoLiveをリリース。
  • 1998
    • CSS2.0勧告
    • マクロメディア社がFireworksをリリース。
    • 月、Windows98日本語版発売。「Internet Explorer 4」搭載。
  • 1999
    • HTML4.01勧告
    • 8月、Pyra LabsがBloggerサービス開始。

2000

  • 2000
    • 1月、XHTML 1.0勧告。
  • 2001
    • 1月、Wikipedia設立。
    • 5月、Wikipedia日本語版設立。
    • 5月、XHTML 1.1勧告。
    • 10月、Movable Typeリリース。
    • 12月、PukiWikiリリース。
  • 2002
  • 2003
    • 5月、Wordpress0.7リリース。★関連記事Wordpressまとめ
    • 7月、Mozilla Foundation設立。
  • 2004
    • CSS2.1勧告。
  • 2005
    • アドビ社がマクロメディア社を買収。
  • 2006
  • 2007
  • 2008
    • 10月、Android搭載スマートフォン発売。
  • 2009

2010





特徴

ホームページプログラミング、言語

  • HTML(HyperText Markup Language):テキストや画像を表示する。テキストで記述する。要素をタグで挟む(囲む)。
  • CSS(Cascading Style Sheets):スタイルシート。装飾やレイアウトを設定する。
  • Java Script:ブラウザー上で動作するプログラム。
  • jQuery:Java Scriptの簡易記述。ライブラリ。
  • JSON(JavaScript Object Notation)
  • DOM(Document Object Model)
  • ajax:非同期通信
  • HTML5:動画や音声に対応。
  • Action Script:Flash上で動作するプログラム。

サーバープログラミング、言語

  • Apache:Webサーバー機能。
  • Perl:サーバープログラミング
  • PHP:サーバープログラミング。ホームページ向け。
  • MySQL:オラクル社(サン・マイクロシステムズ)。データベース機能。



サーバー、環境

  • ローカル環境ソフト:ローカル環境で動作。
    • XAMPP
  • バーチャルマシン:仮想マシン上OSで動作。CPUメモリに余裕がある場合。★関連記事バーチャルマシン
    • VMware
    • VirtualBox
    • VirtualPC
  • 自鯖:サーバーマシンを用意して運用。
  • レンタルサーバー:サーバーサービスを契約して運用。
  • 文字コード:サーバーのOSによって違う。

サーバー、動作

  • 静的なページ:アップロードされたファイルを表示するだけ。
    • ホームページ:表示のみ、CMSなし。
  • 動的なページ:サーバープログラムによる処理・生成。管理画面から操作。
    • ホームページ:PHPを使用して生成。
    • 掲示板:書き込み
    • チャット:書き込み
    • アップロード:画像ファイルなどの転送。
    • ブログ:書き込み。CMSによる管理。記事の追加。
    • Wiki:書き込み。CMSによる管理。記事の追加と更新。
    • ブログ+ホームページ:PHPを使用して生成。CMSによる管理


無料サービス、自作

  • 完成形、すぐにスタート←→自作、無からスタート
  • 広告あり←→広告なし
  • テーマあり←→自作、テーマなし
  • カスタマイズ・テンプレートに制限あり←→制限なし
  • サーバープログラム不可←→サーバープログラム可能
  • プラグイン追加なし←→プラグイン追加可能
  • ファイル制限あり←→なし
  • 容量制限あり←→なし
  • ドメインは有料←→有料サービスを利用

ブログ(blog)

  • Web(インターネット)+log(日付・記録・日記)=Weblog。Weblogの略語「blog」。
  • 管理画面から操作
  • 記事の投稿は本文だけ。
  • タイムライン(時系列)表示。
  • 日付の管理
  • カレンダー表示
  • タイトルの管理
  • メニューの管理
  • カテゴリの管理
  • タグの管理
  • テーマの変更
  • テンプレートとページ
    • インデックス:トップページ。
    • 記事:記事の個別ページ。
    • 月別アーカイブ:月別の記事のページ。
    • カテゴリ:カテゴリごとのページ。
    • タグ:タグごとのページ。
  • ページデザインの統一
  • 固定ページに対応していない

CMS(content management system)

  • 管理システムからサイトを制作する。ブログと同じようなシステム

SNS(social networking service)

  • 交流・共有・繋がり・情報発信・情報共有を意識したサービス・サイト。
  • Facebookフェイスブック:実名
  • Twitterツイッター:つぶやき、一言、コメント
  • Google+


SEO(Search Engine Optimization)

  • 検索サイトに最適化する。順位対策。
  • コンテンツや構造の整理。


Webブラウザー、閲覧ソフト

★関連記事Webブラウザー
  • ソフトのバージョン・タグの解釈・対応状況より表示が異なる場合あり。
  • Netscape Navigator:ネットスケープコミュニケーションズ社。
  • Internet Explorer:Microsoft社。
  • Opera:Opera社。
  • Safari:Apple社。
  • Firefox:Mozilla Foundation。★関連記事Firefoxまとめ
  • Chrome:Google社。★関連記事Google Chromeまとめ
  • Microsoft Edge:Microsoft社。Internet Explorerの後継ソフト。

ゲーム機上のブラウザ

古いものは解像度が低いので表示できる内容が狭い、メモリが少ないので読み込みが遅い。

Webオーサリングツール

WYSIWYG HTMLエディタ:表示と編集が同時に行える。

テキストエディター


ブログソフト

  • Movable Type
    • ライセンス:有償(個人は無料)
    • 動作環境:PHP、Perl
    • 固定ページ作成:対応
    • マルチサイト:対応
    • 再構築:必要
  • Wordpress
    • https://ja.wordpress.org/
    • ライセンス:無料
    • 動作環境:PHP、MySQL
    • 固定ページ作成:対応(1.5以降)
    • マルチサイト:対応(3.0以降)
    • 再構築:不要
    • ★関連記事Wordpressまとめ

Wikiソフト


HTMLタグ

ファイル構造、その他

HTML <html></html>
ヘッド部分 <head></head>
ボディー部分 <body></body>
タイトル
スタイルシート
スクリプト
コメント

文章構造

見出し h1
見出し h2
見出し h3
見出し h4
見出し h5
見出し h6
段落 <p>

文字

太字・ボールド、 <b>
斜体・イタリック <i>
下線・アンダーバー <u>
改行 <br>
フォント <font>
強調斜体 <em></em>
強調太字 <strong></strong>

引用 <blockquote>
コード <code></code>
削除部分 <del>
追加部分 <ins>

ハイパーリンク

アンカー <a>
  • URL url=
  • ターゲット target=

画像

画像 <img>
  • ソース src=
  • 縦サイズ height=
  • 横サイズ width
  • タイトル title=
  • 代替テキスト alt=

テーブル

テーブル table
セル列 tr
セル横 td
  • 横結合 rowspan=
  • 縦結合 colspan=
セル横ヘッド th

リスト

番号なしリスト ul li
番号ありリスト ol li
定義リスト dl dt dd

フォーム


フレーム

フレームセット <frameset>
インラインフレーム <iframe>

簡易記述

文法に決まりはない。サイトやソフトによって違いがある。
記号やカッコで囲む。

Wiki文法

構文が充実。

改行 自動またはBR
見出し1 行頭に*
見出し2 行頭に**
テキストリンク
画像
番号なしリスト -テキスト
番号ありリスト +テキスト
定義リスト 行頭に:テキスト|テキスト
強調
強調
削除部分
テーブル |テキスト|テキスト|テキスト|
水平線 行頭に*** 行頭に---
引用 行頭に>

Markdown文法

構文が少ない。

段落 自動、1行空ける
改行 行末にスペースを2つ入れる
見出し1 行頭に# ★ほぼ共通
見出し2 行頭に## ★ほぼ共通
テキストリンク [テキスト](URL)
画像 ![altテキスト](URL) ★ほぼ共通
画像 ![altテキスト](URL "タイトル") ★ほぼ共通
番号なしリスト 行頭に+か-か* ★ほぼ共通
番号ありリスト 行頭に数字.
定義リスト テキスト改行 行頭に:テキスト
強調斜体 *テキスト*
強調太字 **テキスト**
削除部分 ~~テキスト~~
テーブル |テキスト|テキスト|テキスト| 1行目ヘッド 2行目スタイル 3行目本 ★ほぼ共通
水平線 行頭に*** 行頭に---または*** ★ほぼ共通
引用 行頭に>
コード

サービスサイト

ホームページサービス

ジオシティーズ
https://info-geocities.yahoo.co.jp/close/index.html 2019年3月末終了
infoseek
https://plaza.rakuten.co.jp/usersupport/diary/201104210000/ 「COOL ONLINE」2011年6月末日終了
http://isweb.www.infoseek.co.jp/ 「iswebベーシック」2012年5月21日終了
@homepage
http://homepage.nifty.com/information/2016/01/ 2016年11月10日終了
FC2
http://web.fc2.com/


ブログサービス


Wikiサービス

@wiki
http://atwiki.jp/
FC2wiki
http://wiki.fc2.com/
Seesaawiki(Livedoorwiki)
http://wiki.seesaa.jp/
WIKIWIKI
http://wikiwiki.jp/


関連書籍


★関連記事Web制作/関連書籍?未作成ページ?を参照。

外部リンク

資料

■通信
パソコン通信
https://ja.wikipedia.org/wiki/%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E9%80%9A%E4%BF%A1
World Wide Web
https://ja.wikipedia.org/wiki/World_Wide_Web
■プログラム
HyperText Markup Language
https://ja.wikipedia.org/wiki/HyperText_Markup_Language
HTML5
https://ja.wikipedia.org/wiki/HTML5
jQuery
https://ja.wikipedia.org/wiki/JQuery
■サービス
ホームページ
https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8
ブログ
https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AD%E3%82%B0
■閲覧ソフト
ウェブブラウザ
https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6
■ブログソフト
Movable Type
https://ja.wikipedia.org/wiki/Movable_Type
WordPress
https://ja.wikipedia.org/wiki/WordPress
■Markdown
Markdown
https://ja.wikipedia.org/wiki/Markdown


記事





検索

キーワード

■Google

画像

■Google

掲示板

■2ちゃんねる

ニュース

■ニュース1「Web」


■ニュース2「Wordpress」

+ タグ編集
  • タグ:
  • Web
  • ブログ
  • ホームページ
  • HTML
  • CSS
  • Wordpress
  • インターネット

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

最終更新:2019年04月13日 09:31