CCS Webサイト ├ Top │ │ 最新数件のトピックス、Twitter │ └ Topics │ 年度別一覧を用意 ├ About │ 文章、画像を最新に │ 以降、毎年役職の引継時に更新するように ├ Works │ イベントごとに1ページ │ ジャケット画像、動画 │ 作品ごとのスクリーンショット、情報 ├ Only │ │ 正しく機能する認証機構 │ │ 内容の整理 │ ├ お絵描きBBS │ │ 現状維持 │ └ Only Wiki │ 廃止 ├ Wiki │ 作品に関しては、製作者まかせだと誰も作成しないので、Webサイト側へ移動 │ 残りは軽く再整理するのみ、ほぼ現状維持 ├ Link │ 整理 ├ Sitemap │ CMSに自動生成してもらう ├ Notice │ ページフッタあたりにリンクを設置 └ Contact メールフォームを用意
本やポスター等の紙媒体は、誰もが同じ環境で読まれますが、Webはそれぞれ全く異なります。
問題になるのは、画面解像度とブラウザです。
800x600、1024x768、1280x1024、1920x1080、2560x1440、2880x1880など無数にありますが、 これらすべてで読みやすいように表示されなければなりません。
悪名高い InternetExplorer6 をはじめとする古いブラウザは、HTML5やCSS3などの最新の技術に対応していません。 新しいブラウザにおいても、Blu-ray DiscとHD DVDのような規格争いがあったり、それ以前に、規格自体がまだまとまっていないというようなこともあります。
読みづらい例:
![]()
-moz
、Webkit系では-webkit
という場合、両方とも指定することで、すべてに対応させます。
Wordなどのワープロソフトで行なう処理をテキストだけで行なうための言語です。
例えば、文章の一部を太字にする場合、Wordでは、
という手順を踏みますが、HTMLでは、
<strong>
と</strong>
で囲むとすると、Webブラウザが囲われた部分を太字に処理して画面に表示してくれます。
<html>
のように、<
と>
で囲まれたもの<strong>内容</strong>
のように、タグとタグで囲まれた内容をまとめたもの<img src="./image.png">
の、src="./image.png"
の部分のこと<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ページのタイトル</title> <style> * { margin: 0; padding: 0; } body { background-color: #FFFFFF; width: 100%; } #header { width: 100%; background-color: #ffc6c6; } #sidebar_left { float: left; width: 250px; background-color: #c6e2ff; } #menu_left { padding: 1em 0 2em 1em; background-color: #c6e2ff; } #sidebar_right { float: right; width: 250px; background-color: #c6e2ff; } #menu_right { padding: 1em 0 2em 1em; background-color: #c6e2ff; } #main { height: 100%; margin-left: 250px; margin-right: 250px; background-color: #ccffcc; } #contents { padding: 1em; } h1 { padding: 1.5em; } #contents p{ margin: 1em 0 2em 1em; } li { list-style: none; } </style> </head> <body> <div id="header"> <h1>〜タイトル〜</h1> </div> <div id="sidebar_left"> <div id="menu_left"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> </ul> </div> </div> <div id="sidebar_right"> <div id="menu_right"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> </ul> </div> </div> <div id="main"> <div id="contents"> <h2>見出し1</h2> <p> コンテンツ1 </p> <h2>見出し2</h2> <p> コンテンツ2 </p> </div> </div> </body> </html>
コンテンツマネジメントシステムの略。
HTML等の知識がなくても、Webサイトの構築・管理をできるようにしたシステムのこと。
ファイル管理の手間が省ける、テーマによるデザインの統一、プラグインによる拡張性などメリットはたくさんあります。
CMSは、00年代後半からどんどん増え続け、高機能なものからシンプルにまとめたものまで、様々なものが作られました。 似たようなシステムも多いですが、細かな差異があるので、それぞれ自分がよいと思ったものを選びましょう。
CMSの比較は以下の点をみるといいでしょう。
今回は、既に利用するサーバが決まっているので、それに合わせてCMSを決めることになります。
CCSのWebサイトが置かれているサーバは、データベースが利用できません。
したがって、軽量CMSと呼ばれる、データベースが必要ない種類のCMSから選択することになります。
今回は gpEasy CMS を使用します。
通常のCMSの場合は、データベースの設定等も必要になります。