関連サイト
本書の関連ページが用意されています。
内容紹介
現代の個人サイトをつくるための情報を1冊にあつめました。
創作・同人サイトのためのテンプレート・プログラム配布・ノウハウ発信メディア「do」（https://do.gt-gt.org/）を運営する著者が、HTMLとCSSについてやさしく丁寧に解説します！
本書は特典のテンプレートを使いながら、１からHTMLとCSSの基礎知識を身に付けられる、HTML＆CSS入門に最適な1冊です。テンプレートを使いながらHTMLとCSSを理解することで、手軽に知識を身に付けることができます。
＜本書の特徴＞
●はじめてでもHTMLとCSSの基本をしっかり学べる
●イマドキのWeb事情にもしっかり対応。個人サイト×レスポンシブデザイン
●特典テンプレートを使って実践的に学べる！
●お好みのものを使ってサイトづくり！ 嬉しい≪3種≫の特典テンプレート＆サンプルファイルつき！
＜こんな人におすすめ！＞
●HTMLとCSSを基礎から学びたい人
●ウェブサイトを自分で作ってみたい人
●昔、個人サイトを作っていた人
＜個人サイトって何？＞
個人サイトと聞いて懐かしい気持ちになった方もいるのではないでしょうか。
個人サイトとはその名の通り、個人が作成し、運営しているウェブサイトのことです。今から少し昔、TwitterやPixivがなかった時代、個人サイトといえば、イラストや漫画、小説を書く人たちにとっては欠かせない、コミュニケーションツールの1つでした。時折Twitterでも「#個人サイト」がトレンドに上がるなど、当時個人サイトを持っていた人たちにとっては、「良き時代」の1ページとして、心に刻まれているのではないでしょうか。
本書の特典テンプレートを使えば、簡単に≪現代仕様≫の個人サイトをつくることができます。HTMLとCSSについて、しっかり解説もしているので、昔の知識を今にアップデートしたい、という人にもピッタリな1冊です。
「著者あとがき」より抜粋：
2000年代ごろ、インターネットが今ほど発達しておらず、SNSという存在がまだ創作界隈では大きくなかった時代に、創作者のネット上での交流は、個人サイト上で行われるのが主流でした。
創作者たちは、インターネットという全世界に開かれた場所に自慢の作品を発表する場を設けるため、HTMLを勉強し、ホームページ制作ソフトを駆使して、自分だけの城を築き上げました。
しかし当時は、Twitterのようにだれもが同士を見つけて気軽に繋がれるSNSのようなものはありません。そこで、個人サイトたちを繋ぐべく有志の手によって立ち上げられたのが、特定の作品ジャンルやキャラクター等に特化した「登録型サーチエンジン」や、名簿に登録したり自分のサイトにバナーを貼ったりすることで参加を表明できる「同盟」と呼ばれる参加型サイトたちでした。
しかし2010年代ごろには、PixivやTwitterなどのSNSがユーザー数を増やしていきます。わざわざHTMLを勉強しなくても、メールアドレスさえあれば登録できて、作品もカンタンに公開できて、気になる人をボタンひとつで「フォロー」して追いかけることのできるSNSは、みるみるうちに創作者たちに広まり、とても大きくにぎやかな交流の輪を築いていきました。
開設や更新に手間、知識そして時間が必要な個人サイトは、台頭するSNSに押されるかのように、徐々に姿を消していきました。素材サイトやテンプレート配布サイト、プログラム配布サイトも少しずつ更新がまばらになり、今ではレスポンシブ対応や最新PHPバージョン対応などの、現在のウェブ制作事情に対応している個人サイトはそう多くはありません。
では、個人サイトを持つことは、もはや時代遅れなのでしょうか？ 決してそんなことはありません。
個人サイトは財産です。SNSと違って突然サービスを終了することはありませんし（レンタルサーバーのサービスは終了するかもしれませんが、別のサーバーへ移行すれば問題なしです）、突然UIや仕様が変更されて困惑させられることもありません。PHPが使えるサーバーなら、配布プログラムを借りて、さまざまな機能を追加することもできます。何よりも、手塩にかけて制作し、育てた自分だけの城は、とても愛しく感じられるものです。それに、インターネットを通じて何かすることが当たり前の今、自分だけのサイトを作ることで身に付けたサイト制作やHTML、CSSの知識は、思いがけないところで役立つでしょう。
書誌情報
- 著者: ガタガタ
- 発行日: 2021-08-24 (紙書籍版発行日: 2021-08-24)
- 最終更新日: 2021-08-24
- バージョン: 1.0.0
- ページ数: 256ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
ガタガタ
幼いころから漫画、ゲーム、小説、お絵かきが好き。インターネット黎明期のころより有料サーバーを借り、自分のサイトを持って作品発表の場をつくっていた。創作者の作品発表・交流のきっかけになることを願い、2019年に創作・同人サイトの製作を支援するサイト「do」（https://do.gt-gt.org/）をたちあげる。最新のWebトレンドに沿ったHTMLテンプレート・プログラム配布のほか、サーバーの借り方からHTML/CSS編集まで、初心者にもわかるようにやさしく解説している。
目次
Chapter 1 最初に知っておきたい ウェブサイトの基礎知識
- STEP 01 ウェブサイト表示の仕組み
- STEP 02 ウェブサイト制作に必要なもの
- STEP 03 プログラミング用テキストエディタを用意しよう
- STEP 04 レンタルサーバーを借りてみよう
- Column 個人サイトにオススメのレンタルサーバー
- STEP 05 テンプレートのつかいかた
- Column Javascript って何？
- STEP 06 ウェブサイト作成から公開までの流れ
- STEP 07 実際にカンタンなHTMLを書いてインターネット上に公開してみよう
- Column レスポンシブデザインって何？
Chapter 2 サイトの構成・デザインを考えよう
- STEP 01 どんなページが必要？
- STEP 02 テンプレートの選び方
- STEP 03 文章が読みやすいデザイン
- STEP 04 イラストや写真をキレイに見せるデザイン
- Column 大量の画像を展示したいときのTips fuwaimgの使い方
- Column 名前変換フォームやメールフォームを作るには
Chapter 3 ウェブサイトの骨組みをつくる HTMLの基本を知ろう
- STEP 01 HTMLの役割
- STEP 02 HTML基本のルール
- STEP 03 HTMLの基本構成
- STEP 04 最近のウェブサイトのよくあるHTML構成
- STEP 05 見出しタグを使ってみよう
- STEP 06 文章をマークアップしてみよう
- Column 現在は廃止、もしくは非推奨になったタグ
- STEP 07 画像を表示してみよう
- STEP 08 リンクを貼ろう
- STEP 09 リストタグを活用しよう
- STEP 10 テーブルタグで表を作ってみよう
- STEP 1 1 コメントを活用して分かりやすいHTMLを書こう
- STEP 12 サイトのメニューを編集してみよう
- STEP 13 ブロックを増やしたり減らしたりしてみよう
- STEP 14 よく使うHTMLタグリスト
Chapter 4 デザインにもこだわりを！ CSSの基本を知ろう
- STEP 01 CSSの役割
- STEP 02 CSS基本のルール
- STEP 03 CSSでもコメントを活用しよう
- STEP 04 文字の装飾にまつわるCSS
- STEP 05 背景の設定
- STEP 06 フォントの指定
- Column テンプレートのフォントを変更してみよう
- STEP 07 余白の設定
- STEP 08 レスポンシブ対応部分の編集方法
- STEP 09 自分好みのデザインのパーツを作ってみよう
- STEP 10 CSSが効かないときは
- STEP 11 よく使うCSSプロパティリスト
Chapter 5 もっと楽しくサイト制作！ 便利なツールを使ってみよう
- STEP 01 テキストエディタの便利な機能を活用しよう
- STEP 02 HTML・CSSタグのジェネレータを活用しよう
- STEP 03 配色ツールを利用してみよう
- STEP 04 Twitterタイムラインを埋め込んでみよう
- STEP 05 フリー素材を活用しよう
- Column SVGファイルって何？
- STEP 06 CSS編集で困ったときはデベロッパーツール
- Column スマホやタブレットからサイトを更新する
Chapter 6 サイト公開まであと一歩！
- STEP 01 ブラウザで表示を確認してみよう
- STEP 02 表示が崩れたり、不具合が起きた場合の対処法
- STEP 03 ファビコンを設定しよう
- STEP 04 Twitterカードの見た目を設定しよう
- STEP 05 サイトを公開しよう
- STEP 06 安全にサイトを運営するために