ホームページ作成のツボとコツがゼッタイにわかる本 読んでみた。

[記事公開日]2017/06/20

[最終更新日]2021/11/04

ホームページって聞くと、
自分は、昔ながらのテーブルレイアウトとかで作成した、
古臭い感じのホームページをイメージしてしまいます。

今では、ホームページを、Webサイトとか、サイトなどと言うこともあると思うので。

Web技術の進歩に、私たち、ユーザーのスキルが追いついていないという事実です。
ホームページ制作の環境じは、ここ10年ぐらいで大きく変わりました。
スマホユーザーの増加、WordPressに代表されるCMS。
あらかじめ用意されたテンプレートを利用すれば、誰でもホームページを運営できる時代です。
など解説されてます。

本書の特徴は、HTMLを知らない初心者でも、自分で考えて、ホームページ制作ができるように、なぜ、このようにするのか、という、理由がわかるように解説してます。なおJavaScriptやjQueryなどは解説してません。

2021年6月
どうしてHTML5が廃止されたのか
HTML5 と HTML Living Standardの違いとは?
https://future-architect.github.io/articles/20210621a/

2021年
HTML5って最新なんでしょって思ってる人もいます。
現在ではHTML5は廃止で、「HTML Living Standard」だそうです。

HTML5(エイチティーエムエル・ファイブ)は、World Wide Web Consortium(W3C)が策定していたHyperText Markup Languageの5回目に当たる大幅な改定版、現在では、「HTML Living Standard」
https://ja.wikipedia.org/wiki/HTML5

HTML Standard 日本語訳
https://momdo.github.io/html/

 


 

テーブルレイアウト
table-layoutプロパティは、テーブル(表)の表示方法を指定する際に使用します。

http://www.htmq.com/style/table-layout.shtml

たまに、求人案内とか見て、気になった会社などをハローワークで案内され、その会社のホームページ(サイト)などを見ると、HTML4、XHTMLとかで、作成された昔ながらのホームページの会社もあったりします。

ホームページを公開した当時は、活気的だったかもしれないけど。

Web系とかって、常に進化し、今ままで使われてたものが、いきなり使わなくなったり。いろいろあると思います。日々、新しくなってると思うので。

昔に、作ったホームページ。
専門の業者に依頼して、見栄えや、HTML5とかに変えたりすると、お金が、かかります。
手間だし、そのままで、いいです。
そのような会社も多いと思います。

ホームページ (home page, homepage) とは、
本来はウェブブラウザを起動した時に表示されるウェブページなどの画面(ページ)。
また、そこから派生して各ウェブサイトのトップページやウェブサイト全体を指すこともある。
https://ja.wikipedia.org/wiki/ホームページ

HTMLジェネレーター
ドラッグ&ドロップでHTMLページができるStitches
Stitches
https://stitches.hyperyolo.com

 


 

ホームページ作成のツボとコツがゼッタイにわかる本 単行本 – 2016/9/30
中田 亨 (著)
会社のホームページは自社で作る時代
ホームページ作成ソフトやブログサービスの普及によって
専門知識がなくてもホームページが持てるようになりました。

ホームページ作成のツボとコツがゼッタイにわかる本 単行本 – 2016/9/30
中田 亨 (著)

目次
ホームページ作成のツボとコツがゼッタイにわかる本 読んでみた。
第1章 いまさら聞けないホームページの仕組み
第2章 ホームページの作成手順を知っておこう
第3章 HTMLでホームページを作ってみよう
第4章 CSSでホームページを装飾しよう
第5章 レスポンシブウェブデザイン
第6章 最後の仕上げ「検索エンジン対策

Web技術の進歩に、私たち、ユーザーのスキルが追いついていないという事実です。
あらかじめ用意されたテンプレートを利用すれば、誰でもホームページを運営できる時代です。
何を、どこで、学べばいいか、わからない方が多いです。
とも書いてます。

確かにそうかもです。
Webスクールに通っても、教える先生で、違いもあると思います。
いろんな制作の仕方とか、あると思うので。
またWeb講師になってる先生とか、独学でなってる人も多いです。

今は、昔と違い、無料で動画なので、ホームページの作成の仕方とかあるので、それを見れば、多少は理解できるかもです。

 


 
儲かる会社はホームページが9割! 単行本 – 2021/10/13
芝田 弘美 (著)
オンラインによる会社の売り上げを高めるには
ホームページが一番! ホームページ集客術を専門用語を使わず
説明します。

儲かる会社はホームページが9割! 単行本 – 2021/10/13
芝田 弘美 (著)

 


 
Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集 単行本(ソフトカバー) – 2021/12/22
久保田 涼子 (著)
35000部突破した大ベストセラーが
最新のWebデザインの見本集を盛り込んで4年ぶりの大改訂!

Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集 単行本(ソフトカバー) – 2021/12/22
久保田 涼子 (著)

 


 

見るだけIT用語図鑑278 単行本(ソフトカバー) – 2021/9/25
草野 俊彦 (著)

見るだけIT用語図鑑278 単行本(ソフトカバー) – 2021/9/25
草野 俊彦 (著)

 


 

ビックカメラ.com
Adobeパソコンソフト

ビックカメラ.com・パソコンソフト・ADOBE(アドビ)
icon

ビックカメラ.com
パソコンソフト
週間売れ筋ランキング


ビックカメラ.com・パソコンソフト・週間売れ筋ランキング
icon

 


 

Amazonチャージ
ギフト券
現金のチャージで、ポイント


 


 
ブログでアフェリエイトするならA8

アフィリエイトA8.net
日本最大級の広告数
サイト数のアフィリエイトサービス
A8.net会員登録

 


 

ブログや、ホームページ、サイトに貼るだけ
手軽に、お小遣いをゲット。
かんたん、登録無料です!
アフェリエイトを始めるならバリューコマース




 


 

バリューコマース広告主募集
ECサイト、ネット通販はもちろん、オンライン予約、サービス申込、会員登録、資料請求、見積もり等、多様な業態を対象



 


 

理解するほどおもしろい! パソコンのしくみがよくわかる本 [改訂2版] 単行本(ソフトカバー) – 2020/4/20
丹羽 信夫 (著)

理解するほどおもしろい! パソコンのしくみがよくわかる本 [改訂2版] 単行本(ソフトカバー) – 2020/4/20
丹羽 信夫 (著)

 


 

Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。〈Flexbox、CSS Grid、レスポンシブ〉 単行本(ソフトカバー) – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)
Web制作入門書のロングセラーが、最新仕様にアップデート!

本書の章構成
Lesson1 Webデザインの世界を知る
Lesson2 Webサイトを設計する
Lesson3 HTMLの役割とできること
Lesson4 CSSの役割とできることLesson5 Webサイトを構成する素材
Lesson6 Webサイトを表現する色
Lesson7 Webサイトを公開する
Lesson8 Webサイトを運用する
Lesson9 Webサイトを制作する

Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。〈Flexbox、CSS Grid、レスポンシブ〉 単行本(ソフトカバー) – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)

 


 

Manaさん「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の続編が出版されるみたいです。CSSやJavaScriptを使っての動きやレイアウト組み、またSassを使った、より実践向けの解説本

ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座 (日本語) 単行本(ソフトカバー) – 2021/2/20
Mana (著)

Chapter1 最初に知っておこう! Webサイトの基本と必携ツール
Chapter2 ランディングページで学ぶ「レスポンシブWebデザインとフォント」
Chapter3 ブログサイトで学ぶ「装飾とカラムレイアウト」
Chapter4 コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
Chapter5 イベントサイトで学ぶ「特定ページ作り方とアニメーション」
Chapter6 ギャラリーサイトで学ぶ「動画と画像の使い方」
Chapter7 HTMLやCSSをより早く、より上手に管理できる方法
Chapter8 サイトの投稿と問題解決

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)

 


 

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) (日本語) 単行本 – 2019/3/16

この本ではカフェのサイト(4ページ)を作成します。
①1ページ目、フルスクリーンWebサイト作成
②2ページ目、2カラムWebサイト作成
③3ページ目、タイル型Webサイト(グリッド レイアウト)作成
④4ページ目、お問い合わせのサイト、フォーム(外部メディアを利用する)
などの4ページを、いろいろなテクニックで作るので、かなりオススメな本です。
デザインカンプの作成(作成してある)からしてあるので本格的です。
デザインカンプは、Adobe XD(無料で利用可能)で作成ですが、Adobe XDの使い方などは載ってないです。
また、Adobe XDはMacの場合、OSのバージョンが古い利用が出来ないです。
Mac10.12だと使用が出来ないので不便かも。

サイトの作成は、index.htmlを作ったら(1ページ目作成)
基本的にコピーして複製して、複製したら、いらない部分を削除して、それを次に2ページ目を作っていく感じです。

テキストエディタはATOMを使用
カスタマイズの仕方も載ってます。
2カラムから3カラムなども載ってます。(バナーなど表示する場合)
レスポンシブの仕方
Webフォント(Google Web Font)使用
CSSリセットはress.cssなど解説
Google Mapの仕方
OGP設定、SNSとかシェアした際の設定
Flexboxなど、他

 


 
Webデザイン必携。 プロにまなぶ現場の制作ルール84 Kindle版
北村 崇 (著), 浅野 桜 (著) 形式: Kindle版

【Webデザイナーとして“やるべきこと”と“やってはいけないこと”をまとめた新しいルールブック】

Webデザイン必携。 プロにまなぶ現場の制作ルール84 単行本 – 2016/3/23
北村 崇 (著), 浅野 桜 (著)

 


 

コンバージョンを上げるWebデザイン改善集 単行本(ソフトカバー) – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),
本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。

コンバージョンを上げるWebデザイン改善集 単行本(ソフトカバー) – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),

 


 

初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉 (日本語) 単行本(ソフトカバー) – 2020/2/26

Webサイトを制作するノウハウの学習を「1日30分からはじめる」をテーマに、やさしく・しっかりと伝える本。
タイプや難易度の異なる5つのサンプルサイトを題材に、作り方のノウハウを解説しています。
HTML+CSSの基本から、FlexboxやCSSグリッドといった“流行り”の手法の使い方・使いどころがわかります!

 


 

Webサイト・リニューアル 「見た目だけ変えた」にしない成功の手引き (日本語) 単行本(ソフトカバー) – 2020/4/27

Webサイト・リニューアル 「見た目だけ変えた」にしない成功の手引き (日本語) 単行本(ソフトカバー) – 2020/4/27

 


 

CSS設計完全ガイド ~詳細解説+実践的モジュール集 (日本語) 単行本(ソフトカバー) – 2020/2/27

 


 

今日からはじめて、月10万円稼ぐ アフィリエイトブログ入門講座 (日本語) 単行本 – 2019/11/22

 


 

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26

「HTMLとCSSを勉強したいけれど何から手をつければいいか分からない」と悩んでいる人に向けて、基本的な書式から、よく使われるHTMLタグやCSSプロパティの意味、さらにモバイル対応まで丁寧に解説した本です。

本書の手順にしたがってHTMLとCSSを記述していくことで、ウェブページを一から作りあげることができます。まずは基礎をしっかり押さえて、スムーズなステップアップにつなげましょう。

 


 

今すぐ使えるかんたん ホームページHTML&CSS入門 [改訂2版] (今すぐ使えるかんたんシリーズ) 単行本(ソフトカバー) – 2019/6/21

 


 

はじめてのWebデザインの教科書 まずは押さえておきたいWebの原則 Kindle版

 


 

初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉 単行本(ソフトカバー) – 2019/9/25

 


 

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) 単行本(ソフトカバー) – 2010/4/8

 


 

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)

 


 

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ) 単行本(ソフトカバー) – 2016/3/18

 


 

できるクリエイター GIMP 2.10独習ナビ 改訂版 Windows&macOS対応 (できるクリエイターシリーズ) (日本語) 単行本(ソフトカバー) – 2020/1/17

 


 

Canva
無料ですばらしいグラフィックデザインを共同作業で作成 – Canva

https://www.canva.com/ja_jp/

 


 

小さな会社&お店の Canva超入門 ~お洒落で目を引くチラシ・ポスター・名刺・ポストカードを無料で作る本 単行本(ソフトカバー) – 2018/5/19

内容紹介
会社やお店の販促ツールを、無料であっという間に作れます!

会社や店舗などを運営していると、必ず必要になるのが、販促ツール。

名刺やショップカード、チラシといった紙媒体や、広告用バナー画像、SNS告知用画像といったWeb媒体も。
Canvaは、これらのデザインを外注しないで自分で作りたい! という方のための、無料サービスです。

本書では、Canvaを使って販促ツールを作る方法をわかりやすく解説。
デザインのポイントや便利なテクニックも紹介します。
Canvaを使って、プロ級のデザインが完成する1冊です!

 


 

WordPressデザインレシピ集 単行本(ソフトカバー) – 2019/8/24

 


 

本当によくわかるWordPressの教科書 改訂2版 はじめての人も、挫折した人も、本格サイトが必ず作れる 単行本 – 2019/6/27

・WordPressに興味はあるけれど使ったことがない人
・デザインの良いサイトを簡単に作りたい人
・Webショッピングサイトを手早く作りたい人
・WordPressを使ったことはあるけれど挫折した人、最後まで作るのをやめてしまった人

 


 

WordPressは、難しそう。メンテナンスとか大変。
手軽に、お店のホームページなど運営したいなら。
グーペが、おすすめ。

低コストで簡単、プロのようなホームページ作成「グーペ」
カフェ、サロン、保育園、ビジネス、 マッサージ、レストランなどなど様々な業種の方が、グーペを使ってホームページを作成しています。

グーペは使いやすくて低価格
各プランは 1ヶ月 ⁄ 3ヶ月 ⁄ 6ヶ月 ⁄ 12ヶ月の契約期間からお選びいただけます。

お困りの場合にはすぐにお問い合わせを。グーペのエキスパートが的確にサイト制作をサポートいたします。

 


 

日本で一番選ばれている
ネットショップ作成サービス「カラーミーショップ」

・お試し無料期間30日間でじっくりと体験できます。
・デザインのカスタマイズ自由自在!理想のショップを作ることができます。
・どんなに売れても販売手数料0円!売れるほど利益が上がります。
・「カラーミーショップ大賞」や「開店セミナー」など、運営を支援するサポートが充実

テレビCMでも話題の「minne(ミンネ)」や国内最大級のサーバー「ロリポップ」などでおなじみ
さまざまなWebサービスを展開する【GMOペパボ株式会社】のネットショップ作成サービスです。

食品・ファッション・雑貨などおしゃれなネットショップが多数活躍!
高いデザインカスタマイズの自由度と充実した機能が人気の秘訣。
どこよりも低コストでご利用いただけると幅広いユーザーさまに好評をいただいております。

無料、お試し
ネットショップをはじめよう!
スマホで、かんたん、ネットショップ運営

ネットショップをはじめよう!

 


 

たった15秒でできる!ホームページ簡単作成サービス
PAGEKit(ページキット)

30日間の無料お試し。
ホームページを作ったことがない、ホームページの作り方を全く知らない方が、
ホームページを自分で作ったり編集できるサービスです。
初期費用無料、料金は1ヶ月2,000円です。

登録時、「ホームページタイトル」、「業種」、「デザイン」の3つを入力すれば、
最短15秒で例文や写真入りのホームページが作成できます。

パソコンの超初心者の方、医院・鍼灸院・企業・カフェ・士業・美容室
学校の研究室・同窓会用のサイトを運営したいなど。

 


 

小さなお店&会社のWordPress超入門~初めてでも安心! 思いどおりのホームページを作ろう! 改訂2版 単行本(ソフトカバー) – 2019/6/22

 


 

「ロリポップ!」レンタルサーバー
難しいことや面倒なことは、全部ロリポップ!におまかせ。
つくることに、夢中になれる環境です。

 


 

MixHost
プランも自由に変更可能です。

 


 

ロリポップと同じ値段なら、
ネットオウルのレンタルサーバー
StarServer

独自ドメイン取得サービスならスタードメイン。
取得したいドメイン名を検索!

 


 

お名前.com
ドメイン公式登録サービス
世界中で取引されるプレミアムドメインを提供しています。

お名前.com プレミアムドメイン

 


 

バリュードメインは250種類以上のドメインを低価格でご提供します。
ドメインの取得が69円から!ムームードメインも、おすすめです。

 


 

レンタルサーバーなら
さくらインターネット!
無料お試し実施中。さくらのレンタルサーバー

「ヘテムル」レンタルサーバー
高性能レンタルサーバー
セキュアにWordPressを高速化するモジュール版PHPが使えて電話サポートつき。

 


 

HTML&CSSとWebデザインが 1冊できちんと身につく本 大型本 – 2017/7/21

 


 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 大型本 – 2015/11/3

 


 

たった2日で楽しく身につく HTML/CSS入門教室 (Design&IDEA) 単行本 – 2016/3/16

日本一楽しい、わかりやすい、HTML/CSS入門

最新のウェブサイトづくりが、はじめてでもよくわかる!
レッスンごとに課題が分かれているから、反復学習にも最適
パソコン/スマートフォン/タブレット表示に完全対応

 


 

内容は古いけど、昔は、これをみんな読んでた感じ?

作りながら学ぶ HTML/CSSデザインの教科書 単行本 – 2013/12/14

基礎の基礎から、サイトの制作・公開まで。
美しいサイトを作り、魅せるための、不朽の力が身につく。

 


 

WebCampPRO
無料体験会実施中
転職を本気で考えている方向けのプログラミングスクール!
転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです。
受講完了後、3ヶ月以内に転職・就職できない場合は ”全額返金” しています!

 


 

WebCamp
無料体験会実施中
Webスキルを習得!大人気テックスクール
短期で学びたい方のための講座です。
1ヶ月で集中して一気に学ぶことができます。
プログラミングやデザイン未経験者でも安心のサポート体制をご用意しています。

 


 

Udemy(ユーデミー)
世界最大級のオンライン学習プラットフォームである「Udemy(ユーデミー)」
米国シリコンバレー発祥、世界最大級のオンライン学習
プログラミングからヨガ、写真に至るまで、あらゆるコースがあります。

Udemyでは、自分に合ったコースなど、検索で探せるので、おすすめです。
サンプルで動画も見れます。

 


 
無料
Udemy
Udemy / 【駆け出し歓迎】HTML&CSS 初級編 【初心者向け】HTMLファイルを作成と編集をして、CSSファイルでスタイリングしよう

Udemy
Udemy / 【駆け出し歓迎】CSS | 手を動かしてマスターするwebデザイン | Firebaseでサイトの公開 プログラミング初心者向けにコーポレートサイトを作りながら、CSSの学習 + Firebaseでサイトを公開

Udemy
Udemy / AWS:はじめてのAmazon Web Services AWSが初めての人を対象に、AWSの概要を理解した上で基礎的な構築ができるようになるコースです。ハンズオンでAWS上にサービスを構築することで、未経験から、AWSでWordPressサイトを構築できるようになります。

Udemy
Udemy / ざっくり理解するHTML5・CSS3 | HTML5とCSS3を使って、お店のホームページ(HP)を作ってみよう!

 


 

HTML5 & CSS3 デザインレシピ集 単行本(ソフトカバー) – 2017/2/22

 


 

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA) 単行本 – 2017/2/25

 


 

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集 単行本 – 2017/6/16

目的別にデザインが探せて、すぐに使える!

 


 

実習で身につく!新しいWebデザインの教科書~基礎から学べるHTML&CSSデザイン~ 大型本 – 2018/3/19

Webデザインを基礎から習得、コスパ最強の1冊!

 


 

HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈レスポンシブWebデザイン対応〉 単行本(ソフトカバー) – 2018/8/27

 


 

本当によくわかるHTML&CSSの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる 単行本 – 2018/9/21
鈴木 介翔 (著)

 


 

2万回のA/Bテストからわかった 支持されるWebデザイン事例集 単行本(ソフトカバー) – 2018/7/25

 


 

最新ブラウザ対応で気持ちよく書くCSSデザイン Chrome、Safari、Firefox、Edge、Internet Explorer 11対応! (技術書典シリーズ(NextPublishing)) オンデマンド (ペーパーバック) – 2018/7/20

 


 

Windows
DELL
ノートパソコン、 デスクトップコンピュータ、
タブレット、周辺機器など、オンラインで購入
お得なクーポン発行中

【最大25%OFF】クーポンDell製品

お客様限定クーポン
Dell.comで今すぐ使える最大25% Offクーポン!

 


 
高速・高機能・高安定レンタルサーバー エックスサーバー

安心と快適さを兼備した高性能レンタルサーバーです。
WordPressやショッピングカートを簡単インストール!

電話サポートあり!専任スタッフがご対応
お客様データの消失を防ぐ、自動バックアップ機能を標準提供
初心者でも安心の24時間365日メールサポート

全部まとめて運営できます。
会社サイト
店舗紹介サイト
ネットショップサイト
ブログ

 


 

エックスドメイン
ドメイン名取得&無料レンタルサーバーサービス
国内最安値

どのドメインでもお手ごろな価格でご利用が可能です!

 


 

WordPressの運用に特化したレンタルサーバー&クラウドサービスwpX

『wpX』(ダブリューピーエックス)は、人気ブログツールであるWordPressを用いた
サイト運用に特化したレンタルサーバー&クラウドサービスです。
WordPressを高速に表示するために最適化された専用システムを採用しており、
負荷に強く高速なサイト運用が可能となります。

管理ツールからWordPressを簡単インストール!

 


 

今すぐ使えるCSSレシピブック 単行本(ソフトカバー) – 2019/1/29

本書ではCSSのテクニックを豊富なサンプルコードで数多く解説しています。それぞれのテクニックのポイントも丁寧に解説しています。

 


 

いちばんやさしい HTML&CSS 入門教室 単行本 – 2018/10/20

 


 

HTML5&CSS3デザイン 現場の新標準ガイド 単行本(ソフトカバー) – 2017/8/28

フロントエンドエンジニアの方や、Web制作に関わっていてHTML5/CSS3を使いこなしたい、と思っている人のためのガイドブックです。
思ったようなデザインをどう実現するか、現在の仕様がどのようになっているか、現時点で何に留意して制作を進めていけばよいか、制作の現場で必要不可欠な情報を凝縮しました。

 


 

CSSグリッドレイアウト デザインブック 単行本(ソフトカバー) – 2018/6/15
エビスコム (著)

内容紹介
HTML&CSSで実現する、柔軟でレスポンシブなWebデザイン

 


 

HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 大型本 – 2018/7/11

挫折せずに学び通せる!

 


 

ベストセラーが大改訂!

小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版!
第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。
ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。
これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

スラスラわかるHTML&CSSのきほん 第2版 単行本 – 2018/4/14
狩野 祐東 (著)

いちばんやさしい。ずっと使える。

 


 

価格:¥ 1,480(価格変動あり)

actto BST-02 ブックスタンド(OEM品番:EDH-004)

ブックスタンド

本を見ながらの作業する時に、
本を見開きで、コーディング、プログラミングなどする時に便利。
ブックスタンド。

 


 

HTML5&CSS3マスターブック 単行本(ソフトカバー) – 2016/11/28

仕事できちんとWebを扱えるようになりたい人のための新・定番書

上司に「このサイト直しておいて」と言われても、
本書があれば大丈夫です!

ダウンロードできるサンプルデータで実際に作りながら学べます。
Windows&Mac対応。

 


 

ホームページ作成のツボとコツがゼッタイにわかる本 単行本 – 2016/9/30
中田 亨 (著)
会社のホームページは自社で作る時代
ホームページ作成ソフトやブログサービスの普及によって
専門知識がなくてもホームページが持てるようになりました。

ホームページ作成のツボとコツがゼッタイにわかる本 単行本 – 2016/9/30
中田 亨 (著)

ホームページ作成のツボとコツがゼッタイにわかる本 読んでみた。

ホームページ作成のツボとコツがゼッタイにわかる本 単行本 – 2016/9/30
中田 亨 (著)
会社のホームページは自社で作る時代
ホームページ作成ソフトやブログサービスの普及によって
専門知識がなくてもホームページが持てるようになりました。

ホームページの作成は難しい?
HTML、CSSがわからない。
この方法なら悩み解消!会社のホームページ作成を通して学べます。

目次は、このような感じです。
第1章 いまさら聞けないホームページの仕組み
第2章 ホームページの作成手順を知っておこう
第3章 HTMLでホームページを作ってみよう
第4章 CSSでホームページを装飾しよう
第5章 レスポンシブウェブデザイン
第6章 最後の仕上げ「検索エンジン対策


chapter1


chapter2


chapter3

 


 

この本では、架空の会社のホームページを作成し、ホームページを完成させていきます。

本では、ワイヤーフレーム、とかも解説されてます。
デザインカンプは、説明はないでいすが、デザインを作成するとかは、解説があります。


wireframe

完成の架空の会社のホームページの構成図

①トップページ index.html
②事業内容ページ business.html
③会社概要ページ company.html
④お問い合わせページ contact.html
⑤プライバシーポリシー policy.html

最初に、テンプレートのtemplate.htmlを作り、それを複製して、
トップページ index.html、事業内容ページbusiness.html、他など、作成していきます。

完成のデータを見ながら、進んでいくので、人によっては、少し、わかりにくい部分とかあるかもです。

この本は、一通り、ある程度、学べると思います。

ただ、人によっては、読んでも理解ができない部分とか、難しく感じることもあるかもです。

 


 

サンプルデータはダウンロードでき、完成品の素材はあります。
サンプルデータは、
写真画像やロゴ画像などは、仮の画像ファイルです(画像は文字だけ)
ヘッダーのロゴ、イメージ画像とかの、文字画像なので、

自分で、ホームページを作るなら、画像などを自分で用意しないと、ちゃんとしたモノは作れません。

自分で、ホームページなど作る時は、
ロゴ画像や、画像などを用意しないと、このような、文字の画像の感じになります。


sample

本のホームページの完成品はFotoliaというサイトで有料の写真を購入して加工。

完成の架空の会社のホームページが、本では載ってますが、
人に、よっては、素材を用意しないといけないので、完成が本だけではイメージができないかもです。

Fotoliaサイト
※Fotolia は Adobe Stock に吸収されました。

Adobe Stockのサイト
トップページのメイン画像
Travel insurance
https://stock.adobe.com/jp/images/travel-insurance/100196755

Adobe Stockのサイト
トップページおよび事業内容ページの写真1
東京港
https://stock.adobe.com/jp/images/東京港/91753218

トップページおよび事業内容ページの写真2
ビジネスイメージ―契約成立
https://stock.adobe.com/jp/images/ビジネスイメージ―契約成立/89610932

トップページおよび事業内容ページの写真3
Hand holding Smartphone

https://stock.adobe.com/jp/images/hand-holding-smartphone-with-online-shopping-on-display-online-shopping-concept/109433642

 


 

他に、無料の写真素材サイトなども紹介してます。

GAHAG | 著作権フリー写真・イラスト素材集

https://gahag.net

 


 

Amazon
画像素材の売れ筋ランキング
Amazon.co.jpの売れ筋ランキング。ランキングは1時間ごとに更新されます。

Amazon 画像素材の売れ筋ランキング

 


 

便利なアプリや、ソフトもいろいろあります。

Mac用の フリーソフト、アプリ、アップデータの新着情報をお届けするサイト
https://www.macsoft.jp

フリーソフト100は無料で使える便利なソフトや無料情報を集めました。

パソコンで活用するデスクトップアプリ、USBメモリーを有効に利用できるソフト、Webアプリなど、フリーソフトとシェアウェア情報を紹介。

https://freesoft-100.com

 


 

ホームページ作成のツボとコツがゼッタイにわかる本 単行本 – 2016/9/30
中田 亨 (著)
会社のホームページは自社で作る時代
ホームページ作成ソフトやブログサービスの普及によって
専門知識がなくてもホームページが持てるようになりました。

第1章 いまさら聞けないホームページの仕組み

ホームページの作成に必要な環境を準備。

1-1 ホームページの仕組み
まずは、ホームページを作成するための最低限の知識として、ホームページが表示される仕組みを学びます。

ホームページが表示される仕組み
インターネット回線を通じて、パソコンやスマートフォンにホームページのデータがダウンロードされ、
パソコンやスマートフォンに入ってるブラウザ(閲覧ソフト)がダウンロードしたデータを画面表示させます。

 


 

サーバーとは?
ホームページのデータをインターネット上に保管する役割を持ったサーバー。
サーバーには、いろいろあります。
ウェブサーバー、DNSサーバー、データベースサーバー、メールサーバー、ファイルサーバー、プリンタサーバー、
プロキシサーバーなど

ホームページを作成したり公開をする時に重要なのは
ウェブサーバー
ホームページのデータを保管し、アクセスしてきたWebブラウザにデータを送り返す。

DNSサーバー
ホームページが置いてあるウェブサーバーのインターネット上での住所(アドレス)を管理する。

 


 

Webサイトパフォーマンス実践入門 高速なWebページを作りたいあなたに 大型本 – 2018/3/19

 


 

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus) 単行本(ソフトカバー) – 2017/11/23

 


 

Webフロントエンド ハイパフォーマンス チューニング 単行本(ソフトカバー) – 2017/5/26

 


 

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門 単行本(ソフトカバー) – 2019/5/1

 


 

Webディレクションの新・標準ルール システム開発編 ノンエンジニアでも失敗しないワークフローと開発プロセス 単行本(ソフトカバー) – 2017/11/21

 


 

Webディレクションの新・標準ルール 現場の効率をアップする最新ワークフローとマネジメント 単行本 – 2017/2/27

 


 

ウェブデザインの思考法 (Business×Design×IT) 単行本(ソフトカバー) – 2019/5/31

 


 

一冊でキッチリ身につく サーバーの基本としくみ 単行本(ソフトカバー) – 2017/7/10

 


 

イラスト図解式 この一冊で全部わかるWeb技術の基本 単行本 – 2017/3/16

 


 

IPアドレスとドメイン
インターネットで公開するホームページには、固有のアドレスが割り当てられます。

IPアドレスはホームページの一部で、ウェブサーバーの住所を表す。
ドメインはウェブサーバーのIPアドレスに別名をつけたもの。
ドメインとIPアドレスの対応関係はDNSサーバーが知ってる。

DNSサーバーとは?
ブラウザとウェブサーバーの間を仲介してくれるDNSサーバー
DNSサーバーで、ブラウザはホームページを表示することができる。
DNSサーバーは世界中にあり、管轄(かんかつ)が決まってます。
DNSサーバー同士が連携しあって目的のウェブサーバーを探し出す。

 


 
IPアドレスやドメインはどうやって決めるの?
①ドメインを申し込む
②ドメインをウェブサーバーに関連付ける設定をする。
③ドメインの更新手続きをする。(ドメインを2年目移行も継続するときなど)

有名なドメイン取得サービス

本では、
お名前.com
ムームードメイン
スタードメイン
バリュードメイン
ゴンベエドメインGonbei Domain(ゴンベエドメイン)
など紹介されてます。

 


 

ドメイン名の取得なら

お名前.com
自分の名前でブログ、ホームページに!
メールアドレスに。使いたい名前を今すぐ検索。

 


 

ドメイン名の取得なら

ムームードメイン
ドメイン取得が10円から。ドメイン最安10円。.shopが99円で取得。

 


 
ドメイン名の取得なら

スタードメイン

スタードメインはネットオウルが運営する年額1,180円から(税抜)の独自ドメインサービスです。

DNSレコード編集やWhois情報代理公開など基本をしっかり抑えたドメイン登録が年額1,180円から(税抜)行えます。

年額1,180円から(税抜)ドメインを取得できます!
『.jp』『.co.jp』『.or.jp』などJPドメインも格安で取得可能

 


 
ドメイン名の取得なら

ドメイン総合サービス
VALUE-DOMAIN(バリュードメイン)

「.JP」ドメインは日本に住所をお持ち方のみ登録できる、安心と信頼の高い人気のあるドメインです。VALUE-DOMAINでは「ローマ字.JP」ドメインの新規登録。企業・個人のどちらの方も登録可能です。

 


 
ドメイン名の取得なら

「ゴンベエドメイン」は国内最高の600種類以上の取扱いドメイン数。
他社では見かけない珍しいドメインもオンラインサインアップから簡単取得。
商標保護を目的としたドメイン取得。

 


 

ホームページの公開に、かかる費用とは。

①レンタルサーバー代
申し込みの時に、初期費用などかかる場合があるので、キャンペーンとかで0円の時に、申し込むといいかもです。月額、年間など、サーバー会社ので異なります。

自分は、ミニバードを使ってるので、月300円以下です。

②ドメイン取得費用
ドメインの申し込みに、かかる初期費用。
ドメインを使わないなら、かかりません。

また、サーバー会社によっては、好きな名前でURLなど決められます。

③ドメイン更新費用
ドメインも2年目以降、使う時に、かかる更新費用です。

無料のレンタルサービスとか利用する。
またはドメインとか取得しなくて、無料で公開できるサーバー会社もあります。

ただ、会社とかのホームページを公開するなら、無料のサーバーとか使うのは辞めた方がいいです。
(普通は、あまりいないと思いますが)

 


 

ホームページを構成するファイルとプログラム言語の役割

①ホームページのデータをウェブサーバーに要求する。
②ホームページのデータを受ける。
③ホームページのデータを画面に表示する。

 


 

パソコンが超苦手でもプロ級のキレイなホームページが簡単に作れる
とりあえずHP

 


 

無料ネットショップ開業
BASE

面倒な手続きや複雑な操作は一切なく、誰でも簡単に30秒でネットショップが作れます。

今までネットショップを作りたくても時間や資金、知識…様々な理由で始められなかった悩みを全て解決。ネットショップをつくるのに、「勉強」や「資金」は必要ありません。
ネットショップ作成が今までで1番簡単に。

クレジットカード決済、コンビニ決済、キャリア決済もすぐに導入でき、
決済手段の豊富さと手軽さが支持されています。

 


 

低コストで簡単、プロのようなホームページ作成「グーペ」

ブログ感覚で手軽にお店のホームページを作成!
GMOペパボ株式会社が提供する【グーペ】では、
飲食店、美容院、ネイルサロンなどのお店だけではなく
塾、事務所、個人事業主、クリエイター、アイドルまで、
様々な業種のホームページが簡単にお作りいただけます。

 


 

ホームページの表示使われる代表的なファイルの種類。
.html
HTMLで記述されたファイル。

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。

https://ja.wikipedia.org/wiki/HyperText_Markup_Language

HTML
HTMLはホームページの文書構造を定義するためのプログラム言語。
本では、HTMLを、プログラム言語と書いてあったけど、人によっては、勘違いするかもです。
プログラム言語ではないと思うので。

 


 

.css
CSSで記述されたファイル。

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。

https://ja.wikipedia.org/wiki/Cascading_Style_Sheets

CSS
ホームページの装飾などする。

 


 
.js
JavaScriptで記述されたプログラムファイル。

JavaScript
ホームページに動作するプログラム言語

画像データ(jpg、png、gif)

音声、音楽、動画データ(wav、mp3、mp4)

 


 

1-2 ホームページ作成に必要な環境を準備しよう

レンタルサーバーを申し込むのはいつ?

いろんなレンタルサーバーがあります。
レンタルサーバーは無料の、お試しなどもあります。
また、プランや料金とかで使える条件が違います。

本では、
ロリポップ
サクラインターネット
KAGOYA
エックスサーバー
スターサーバー
ファイアバード
シックスコア
ラクサバ、など他を紹介。レンタルサーバーの登録の仕方とか載ってません。

予算によると思いますが、値段とかで、決めてもいいかもです。

 


 
レンタルサーバーなら

ホームページ作成に
「ロリポップ!」レンタルサーバー
難しいことや面倒なことは、全部ロリポップ!におまかせ。

 


 
レンタルサーバーなら

ネットオウル
Netowl
格安お手軽サービスを中心に、総合的なインターネットサービスを提供するネットオウル

「スターサーバー」無料で独自SSLが使える!クラウド型高速レンタルサーバー

 


 

レンタルサーバーならmixhost
30日間、無料 お試しできます。
プランも自由に変更可能です。
エコノミー、スタンダード、プレミアム、ビジネス、ビジネスプラスなど。
(プランを変更した場合は、差額も適用できます。)
メモリの使用量や、CPUの使用量なども見れるので便利です。
データベースの作成が無制限です。

 


 

レンタルサーバーなら

さくらインターネット!法人向け用途にも対応
無料お試し実施中
さくらのレンタルサーバ

『SSL』対応

 


 
レンタルサーバーなら

「ヘテムル」
圧倒的に高性能なレンタルサーバー。
セキュアにWordPressを高速化するモジュール版PHPが使えて電話サポートつき。

 


 

ラクサバ
月額99円からのレンタルサーバー

 


 

HTMLやCSSは、文字だけえお記述して作成します。
そのためには、文字を記述するテキストエディタが必要です。

テキストエディタを用意しよう

本では、Mac、Windowsなどのテキストエディタを紹介。

TeraPad、サクラエディタ、Atom、Sublime Text、CotEditorほか、

CotEditorはオープンソース・ソフトウェア。
日本製のテキストエディタです。

アップデートもされるので、使いやすいと思います。



CotEditor

カテゴリ: 仕事効率化
価格: 無料(価格変動あり)

APP STORE

 


 

Atom(Windows, Mac OS, Linuxに対応してます。)
Atomを使ってる人も、かなり多いみたいです。

https://atom.io/
https://atom.io/

 


 

Atom実践入門──進化し続けるハッカブルなエディタ (WEB+DB PRESS plus) 単行本(ソフトカバー) – 2016/7/14

GitHubが開発したエディタ「Atom」を現場でどう活用するかを解説した書籍です。
Atomは標準でさまざまな言語に対応しています。

 


 

テキストエディタAtom入門 (OIAX BOOKS) 単行本(ソフトカバー) – 2016/6/30

本書は、テキストエディタAtomの基本的な使い方をまとめた入門書です。
これからプログラミングの学習を始めようという方を読者として想定しています。
Atomの機能を網羅的に解説することを意図したものではありません。
むしろ、初心者でも使い勝手のある機能だけを選んで紹介しています。

Atomは主要なプログラミング言語のほとんど、例えばC、C++、C#、Java、PHP、Ruby、Python、Perl、Goなどに対応しています。また、HTML、Markdownなどのマークアップ言語、CSS、Sassなどのスタイルシート言語にも対応しています。

 


 

Sublime Text
(Sublime Textは、Windows, Mac OS, Linuxに対応してます。)
このテキストエディタも多くの方が利用しています。

https://www.sublimetext.com

Emacs
(Windows, Mac OS, Linuxに対応してます。)

https://www.gnu.org/software/emacs/

Mac用
mi(無料)
mi は Mac OS X 用のテキストエディタです。

https://www.mimikaki.net

Windows用
TeraPad(無料)
TeraPadを使ってる人は、昔から多いです。

https://tera-net.com/

 


 
有名な、ソフト ダウンロードサイトなども本では、紹介されています。

Vector

https://www.vector.co.jp

窓の杜: Windowsアプリ・フリーソフトのおすすめ情報

https://forest.watch.impress.co.jp/

フリーソフト100=無料ソフト+フリーウェア
https://freesoft-100.com/

Seesaa ダウンロード – 無料のダウンロードサービス
WindowsとMacのフリーソフト、シェアウェア、ゲーム、ドライバ、ライブラリなど5000本以上のソフトウェアを配布。

http://download.seesaa.jp/

 


 
ホームページの効率的な作成方法

画像編集ソフトを用意しよう
PhotoshopやIllustratorは有料ソフトです。
必ずしも、有料のソフトを使わなくては、ならないわけではありません。

GIMP
https://www.gimp.org/

pixlr editor

https://pixlr.com/jp/editor/

本書の完成で使う画像データ
Adobe Stock(旧Fotolia)サイトで有料の写真を購入して加工してます。

もし、同じにしたい場合は、写真を買えばできますが、
ホームページの作成を、始めてする人に、とっては無料の画像素材サイトとかで、仮の写真などを用意するといいかもです。

 


 

Adobe Illustrator(有料)
Adobe Photoshop(有料)

Adobeの製品は、たまにしか使わない人にとっては高額なソフトです。

Adobe系のソフトは高いし、使うのを辞めた、また持ってない方も多いです。

今では
IllustratorやPhotoshopの代わりに、
無料で使えるソフトもあります。

InkscapeとGIMP

Adobe Illustrator(有料)
Inkscape(無料)

https://inkscape.org/ja/download/

Adobe Photoshop(有料)
GIMP(無料)
https://www.gimp.org/downloads/

 


 

はじめての無料で使えるフォトレタッチ GIMP2.10対応 (BASIC MASTER SERIES) 単行本 – 2019/3/19

 


 

すぐに作れる ずっと使える GIMPのすべてが身に付く本 単行本(ソフトカバー) – 2018/9/26

 


 

Illustratorの代わりに使ってる人も多いInkscape
今ではソフトをPCにインストールしなくても
InkscapeのChromeの拡張機能でも利用ができます。

Inkscape on rollApp – Chrome ウェブストア – Google

https://chrome.google.com/webstore/detail/inkscape-on-rollapp/icjinnaagdniegmfejingjjhljhmkopj

 


 

すぐに作れる ずっと使える Inkscapeのすべてが身に付く本 単行本(ソフトカバー) – 2019/6/17

 


 

無料で使えるイラストソフト Inkscapeスタートブック 単行本 – 2017/1/19

 


 

できるクリエイター Inkscape 独習ナビ Windows&Mac対応 単行本(ソフトカバー) – 2016/9/26

 


 

第2章 ホームページの作成手順を知っておこう

ホームページの作成手順。
ホームページを作る過程には、手順やルールがあります。

2-1 ホームページの掲載内容を決める
ホームページの作成手順

①ホームページの掲載内容を決める
②ページの構成を決める
③ワイヤーフレームを作成する
④デザインを作成する(デザインカンプ)
⑤素材を用意する
⑥HTMLでページの構成を作成する
⑦CSSでページmの装飾を作成する
⑧動作と表示を確認をする
⑨ウェブサーバーへアップロード
など

 


 

自前の準備。
ホームページで伝えたいことを整理しよう
相手が、どんな情報を欲しがってるのか?

ホームページの掲載内容の決め方
会社のプロフィール
会社名、設立、住所、電話番号、Eメールなど他

ホームページの掲載内容
会社概要
事業内容
プライバシーポリシー
お問い合わせ

ホームページの全体の掲載内容
トップページ
会社概要
事業内容
プライバシー
お問い合わせ

など。
 


 
ホームページの構成図とは?

2-2 ページの構成を決める

トップページから見て、各ページが、どこにあるのかを階層で表します。

ホームページの構成図を決めるコツ
なるべく全てのページが2階層以内に収まるようにする

1階層目(トップページ)
2階層目(事業Aー会社概要ー事業内容ーお問い合わせ)など

本ではヒアリングシートなども解説してますが、
検索のコツで、検索してください。と書いてます。

 


 

2-3 ワイヤーフレームを作成する
ワイヤーフレーム(ラフ)とは?
どこに、何を配置するのか

ホームページの作成の流れ
①ホームページの掲載内容
②ホームページの構成図
③ワイヤーフレーム
④デザイン、コーディング
⑤最終チェック、引き渡し

ホームページで使う長さの単位はpx

 


 
本では、デザインカンプの説明とか、ないですが、デザインを作成するはあります。

2-4 デザインを作成する
デザインの作業範囲

作成工程のイメージ
ホームページ作成の流れ
①デザイン
②コーディング(コーディングとは、コードを書くことです。)
③最終チェックで引き渡し

他に、ページ全体の横幅、文字のフォント種類など、解説してます。

デザインに使うソフトは何がオススメ?
有料なら、AdobeのPhotoshopやIllustratorなど説明

色を付けたい部分は必ずしも画像にしなくても良い
CSSでもできます。

架空の会社のホームページのデザイン工程の完成イメージは本で載ってます。
出来れば、画像データとかで、ダウンロード出来ればいいかもです。

 


 

2-5 素材を用意する
デザイン(デザインカンプ)が出来たら、画像をパーツに分けよう
画像データを、パーツの切り取りの仕方などは載ってないです。
簡単な解説はされてます。

 


 

2-6 HTMLでページの構造を作成する
ページをブロックに分ける。

デザインと画像の切り取りが終わったら
デザインを見ながら、いくつかのブロックに分けて、HTML構文に置き換える。

大きなブロック。
ヘッダー
メニュー
コンテンツ
フッター

小さなブロック
キャッチコピー
ロゴ
メニュー
見出し
説明文
画像

ブロックをHTMLの構文に置き換える
HTMLの構造化が大切な理由

 


 
HTMLで、ページの構造ができたら、CSSで見栄えを整える。

2-7 CSSでページの装飾を作成する
HTMLに目印をつける
HTMLでページの大まかな構造を書いたらスタイルシート(CSS)で見栄えを整える。

CSSで見栄えを定義する

2-8 動作と表示を確認する
確認ポイント3箇条
①デザイン通りのレイアウトになってるか
②デザイン通りの装飾になってること
③リンクやボタンが正しく動作すること

どのブラウザでも、問題なく表示されるかどうか?
スマートフォンやタブレットでも問題なく表示されるかどうか?

 


 

本では、おすすめのFTPソフトなど紹介されませんが、検索してください。と解説。

2-9 ウェブサーバーへアップロードする
Webサーバーにホームページのデータをアップロードして、公開。

FTPソフトを使う
一通り動作確認が終わったらWebサーバーにホームページのデータを配置して、公開。

FTP
File Transfer Protocol(ファイル・トランスファー・プロトコル、FTP、ファイル転送プロトコル)

https://ja.wikipedia.org/wiki/File_Transfer_Protocol

FTP情報とは?
FTPでWebサーバーに接続するには、FTPの専用アカウントが必要です。
FTPサーバー名(FTPホスト名)
FTPアカウント(FTPユーザー名)
FTPパスワード
ポート番号

ポート番号とは?
ポート番号は通信先のアプリケーションを区別するための識別番号

など解説。

本では、FTPのソフトは紹介されていません。
未経験の方など、どれを使えばいいか、わからないかもです。

 


 

第3章 HTMLでホームページを作ってみよう

第3章から、ホームページの作成にとりかかります。

各ページの完成イメージ
3-1 サンプルの紹介では、

これから作る、ホームページの完成版をダウンロード。
それに、ついて解説されてます。
ページの構成と完成イメージ

ホームページの構成図
①トップページ index.html
②事業内容ページbusiness.html
③会社概要ページcompany.html
④お問い合わせページcontact.html
⑤プライバシーポリシーpolicy.html

①トップページ index.htmlの完成イメージ。
②事業内容ページbusiness.htmlの完成イメージ。
③会社概要ページcompany.htmlの完成イメージ。
④お問い合わせページcontact.htmlの完成イメージ。
⑤プライバシーポリシーpolicy.htmlの完成イメージ。

 


 

段階的に作成していく
HTMLの作成手順。
①全てのページに共通する部分を見つける。
②共通部分を作成する。
③ページ毎に掲載内容が異なる部分を作成する。

共通部分を見つける
ヘッダーエリア
メニューエリア
コンテンツエリア
フッターエリア

全てのページの共通の部分を、どこか考える。

 


 

3-2 共通部分の作成

HTMLの基本テンプレートを作成

パソコンのOSやブラウザにバージョンがあるように、HTMLにもバージョンがあります。
HTMLの最新バージョンはHTML5です。
本書ではHTML5で書いていきます。

テキストエディタで
新規ファイルを作成して、テンプレートを作る。
ファイル名はtemplate.htmlを作ります。

HTML5の基本テンプレート

HTML5の基本タグなど解説されてます。

HTML5のテンプレートの意味。
ドキュメント宣言
htmlタグ
headタグ
bodyタグ
headerタグ
navタグ
sectionタグ
footerタグ
など

HTML5の基本テンプレートを書いてみよう。

HTMLにコメントを記述する
HTMLタグに名前をつける

 


 

共通部分の作成①(ヘッダーエリア)
ロゴ画像。
<header>タグでロゴ画像を配置。
完成では、
divタグで<div id=”header-logo”>となってます。
人によっては、迷うかも。

共通部分の作成②(メニュー)
次は、ナビゲーション メニューを作っていく

共通部分の作成③(フッターエリア)
フッターエリアの作成。
template.htmlのHTMLは完成

 


 
次に、今作ったtemplate.htmlをコピーで複製し

これをindex.htmlに変えて、
Topページのhtmlを作成

3-3 トップページ
テンプレートをコピーしよう
完成イメージを見ながらHTMLの骨格を考えよう

コンテンツの作成
コンテンツエリアには
メイン画像
新着情報の見出し
新着情報のリスト
事業内容の見出し
3つの事業内容エリア

topページのhtml。
index.html
HTMLの完成です。

index.htmlをブラウザで表示
ここまですると、このような感じです。

自分は、ロゴ画像は、作ってみました。


sample


internet

 


 

3-4 事業内容ページ
テンプレートをコピーしよう

完成イメージを見ながらHTMLの骨格を考えよう

先ほど作ったtemplate.htmlをコピーで複製し

これをbusiness.htmlとファイル名を変えて、
businessページのhtmlを作成します。

完成イメージを見ながらコーディング。

businessページのhtmlのHTMLの完成
business.htmlをブラウザで表示。このような感じ。


business

 


 

3-5 会社概要ページ
テンプレートをコピーしよう
完成イメージを見ながらHTMLの骨格を考えよう

先ほど作ったtemplate.htmlをコピーで複製し

これをabout.htmlに変えて、
aboutページのhtmlを作成する。

ここでは、tableタグを使って、表なども作ります。

aboutページのhtmlのHTMLの完成
about.htmlをブラウザで表示

このような感じ


about

 


 
3-6 プライバシーポリシーページ

テンプレートをコピーしよう
完成イメージを見ながらHTMLの骨格を考えよう

先ほど作ったtemplate.htmlをコピーで複製し

これをpolicy.htmlに変えて、
policyページのhtmlを作成する。

policyページのhtmlのHTMLの完成
policy.htmlをブラウザで表示

このような感じ


policy

 


 

3-7 お問い合わせページ
テンプレートをコピーしよう
完成イメージを見ながらHTMLの骨格を考えよう

先ほど作ったtemplate.htmlをコピーで複製し

これをcontact.htmlに変えて、
contactページのhtmlを作成する。

この本では、メールフォームは、
GoogleのメールをHTMLに埋め込んでます。

Googleフォームをページに埋め込もう

Googleにログインします。

Google

https://www.google.co.jp/

Googleフォームの新規作成を開始
Googleフォームの編集ページ
Googleフォームの入力項目を設定
Googleフォームのテーマを選択
Googleフォームの埋め込みコードをコピー

このコピーしたコードを
contactページに貼り付け。

contactページのhtmlのHTMLの完成

contact.htmlをブラウザで表示


contact

 


 

わかばちゃんと学ぶ Googleアナリティクス 単行本(ソフトカバー) – 2018/3/22

 


 

これならわかる! Googleアナリティクス 今日からはじめるアクセス解析超入門 単行本(ソフトカバー) – 2018/3/17

 


 

第4章 CSSでホームページを装飾しよう

ホームページの見栄えを、整える。

4-1 スタイルシート(CSS)の基本ルール

CSSの解説などしてます。
CSSの基本原理を知っておこう
3通りの指定方法を使い分けよう
複合セレクタを使ってHTMLとCSSをシンプルにしよう

CSSの基本的な書式
文字コードを指定
idで指定する
classで指定する

 


 
4-2 HTMLとCSSを関連付けよう

ブラウザにCSSファイルの場所を伝えよう

ブラウザごとの見栄えの違いを吸収するリセットCSSを組み込もう
本では、Eric Meyer氏のリセットCSSを使ってます。

https://meyerweb.com/eric/tools/css/

https://meyerweb.com/eric/tools/css/reset/reset.css

本では、書いてないですが、人によっては、自分のカスタマイズで、リセットCSSを書いてる人もいます。

リセットCSSを、すると、このような見栄えになります。


reset_html

 


 

CSSの優先順位
CSSファイルのリンク。順番があります。

先に、リセットCSSのリンクなど

CSSの重ね合わせ

 


 

4-3 共通部分
CSSの基本テンプレート

CSSの基本プロパティの解説
本では代表的なCSSが載ってます。

style.cssに、テンプレートを書いてみよう
HTMLにCSSをリンクさせよう

共通部分の作成①(共通セクション)

box-sizingプロパティ(CSS3)の指定

paddingとborderまで、含んだ幅がwidthやhightとみなされます。
1つ1つのボックスに指定するのは効率が悪いので、全てのタグに指定。

共通部分の作成②(レイアウトセクション)

サイトの横幅
中央に表示など

#wrapper {
	margin: 0 auto;
	width: 960px;
}

 


 

ヘッダー
共通部分の作成③(ヘッダーセクション)

marginは、ボックスの外側の余白。
paddingは、ボックスの内側の余白。
など

メニューの部分。
共通部分の作成④(グローバルナビゲーション)

共通部分の作成⑤(コンテンツセクション)
次にページごとに、固有のコンテンツが入るセクション。

共通部分の作成⑥(フッターセクション)

共通部分の作成⑦(フッターナビゲーション)
共通部分のCSSの完成

となってますが、わかりにくいのが、コンテンツの部分とかは、まだ完成してません。
本だと、このように、画像が3つ、横並びとかになってるので、戸惑うかもです。


sample-content

その章の完成品のサンプルのソースなど見れば、わかるかもですが。

 


 

4-4 トップページ
HTMLに目印(セレクタ)をつける

index.htmlに、classなどで新たにタグなど追加します。
メイン画像に、classで”inner”など追加、

<img id="main_visual" class="inner" src="img.jpg" alt="">

3つの画像を、横並びとかに表示の仕方など、人に、よっては理解しにくいかもです。
ソースには番号などふってありますが。

 


 

4-4 トップページで、このような感じになります。
共通部分を整えて、それから、個々の部分を整えていくので、


content

 


 

4-5 事業内容ページ

business.htmlの部分です。

HTMLにCSSを関連付けます。

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

を追加

ナビゲーションの部分に<span>を追加
ナビゲーションの事業内容の部分に
currentーmenuーitemを追加など

コンテンツの部分。
pタグにclassでinnerを追加
divに、classでbiz-box col-6を追加
imgタグにclassでphotoframeを追加

など。

次にCSSのスタイルで、見栄えを整えていきます。

見栄えを、整えると、このような感じです。


business

今は、事業内容ページをしましたが、これを、各ページでしていきます。

 


 

4-6 会社概要ページ
about.htmlのページ

HTMLにCSSを関連付ける
HTMLに目印(セレクタ)をつける
スタイルを記述する


about

 


 

4-7 プライバシーポリシーページ
policy.htmlです。
HTMLにCSSを関連付ける
HTMLに目印(セレクタ)をつける
スタイルを記述する


policy

 


 
4-8 お問い合わせページ
contact.htmlの部分。

HTMLにCSSを関連付ける
HTMLに目印(セレクタ)をつける
スタイルを記述する

この本では、メールフォームは、Googleのメールフォームで設置されてます。

なので、メールフォームなど、勉強したい人は、他の書籍など買うといいかもです。

 


 

HTMLフォームの基本 Kindle版

 


 

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA) 単行本 – 2016/10/27

 


 

第5章 レスポンシブウェブデザイン

5-1 レスポンシブの定義とは?
レスポンシブウェブデザインの意味

さまざまなデバイス(機器)でアクセスしても、適切なレイアウトで表示されるように作れたホームページをレスポンシブなホームページと呼びます。

レスポンシブウェブデザインを支える代表的なCSS。

①基本的には表示しているものを非表示にする。
②横に並んだものを縦に並び替える。
③ボックスの大きさが画面サイズに応じて自動的に拡大縮小する。

ボックスの横並びと縦並びを切り買える

ボックスの幅を可変にする

表示と非表示を切り替える

 


 

5-2 モバイル対応を実現する3つの手法と選択の基準
モバイル対応を実現する3つの手法

①デバイスに応じたURLに転送する

②メディアクエリでCSSファイルを切り替える

③CSSファイル内でメディアクエリを使う
など

 


 

3つの方法の使い分け

①デバイスごとのレイアウトが全く異なる場合

②HTMLを大きく変更しなくてもCSSを変更すればモバイル対応にできそうな場合

③パソコン用とモバイル用で共通のスタイルが多い場合

CSSファイルの数を減らしたほうが、よい理由
ホームページが管理しやすいです。
 


 

5-3 レスポンシブウェブデザインで気を付ける3つのポイント
リキッドレイアウトを効果的に活用する

幅をpxで指定するとレスポンシブにならない。
幅を%で指定すると自動的に拡大縮小される。

画像とテキストを使い分ける
読ませたい文字をテキストにする。

タップ領域のサイズ
ユーザーの操作性に配慮する。

 


 
ファビコンとアップルタッチアイコンに設置方法

ホームページのアイコンを設置しよう。
ファビコンとアップルタッチアイコン

ファビコンとアップルタッチアイコンに設置方法
HTMLファイルの記述
ファビコンを関連付ける

<link rel="shortcut icon" href="favicon.ico">

アップルタッチアイコンを関連付ける

<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">

本では、ファビコンも載ってますが、ファビコンの画像の作り方などは載ってません。
設置方法などは載ってます。

 


 

5-4 全てのデバイスで同じように見えるための設定
ビューポート(viewport)を設定しよう。

スマートフォンには、ビューポート(viewport)という概念があります。
表示領域というイメージが近いと思います。

ビューポートの設定していないホームページをスマートフォンで表示させると
スマートフォンは、ビューポートを自動的に980pxに設定します。
画像や文字が見辛くなってしまいます。

 


 

index.htmlのトップページにビューポート(viewport)を設定。
全(各)ページに設定すれば、全部対応されます。
本では、全ページまでは載ってません。

ビューポート(viewport)の設定

<meta name="viewport" content="width=device-width">

“width=device-width”という部分は、ビューポートの横幅をデバイスの横幅と同じに設定するという意味です。

ビューポート(viewport)の設定をしたら、次に
メディアクエリを使って、折り返しなどの設定をおこないます。

 


 

5-5 画面のサイズに応じてレイアウトを切り替える
メディアクエリを使ってみよう。

ビューポート(viewport)を設定すれば、画像や文字が縮小されてしまう問題は解決します。
しかし
スマートフォンの画面サイズは、パソコンよりも小さいので、パソコンでは横に並べて表示できていたものがスマートフォンでは画面に入らず、折り返したり、大きい画像は、はみ出てしまいます。

CSSのdisplay、widthプロパティを使って、ボックスを横並びにしたり、ボックスサイズのサイズを可変にしたりすれば解決できます。

そのため、
パソコンの場合は、このCSSを使う。
スマートフォンの場合は、このCSSを使う。
など、デバイスごとに、CSSを切り替える仕組みが、メディアクエリです。

 


 
メディアクエリの書式。

@media only screen and (min-width:■■■px) {
/*画面サイズが■■■px以上の場合に適用するスタイルを、ここに記述します。*/

}

 


 

画面サイズが■■■px以下の場合に適用するスタイルを、ここに記述します。

@media only screen and (max-width:■■■px) {
/*画面サイズが■■■px以下の場合に適用するスタイルを、ここに記述します。*/

}

メディアクエリ対応版の、完成のサンプル。
本では、メディアクエリの仕方と言うか、簡単な説明や設置の解説などはあります。
完成品は、サンプルでみれます。

また、本では解説がないですが、完成のソースとか見ると

.pc {
display: block;
        }

.sp {
	display: none;
         }

などと書いてあり、人によっては、なにこれ?。
よくわからないかもです。解説とかないので。

これは、表示、非表示を切り替えるスタイルで、他の本とかを買って読むといいかもです。

 


 

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本(ソフトカバー) – 2019/5/24
草野 あけみ (著)

 


 

PCで見た時は、PCのclassがついた画像が表示の設定。


.pc {
display: block;
        }

.sp {
	display: none;
         }

スマートフォンで見たときは、spのclassがついた画像が表示の設定。

@media only screen and (max-width:767px) {
        .pc {
            display: block;
        }

        .sp {
	    display: none;
       }
}

スマホレイアウトの時だけ表示したいパーツはclass=”sp”。

PCレイアウトの時だけ表示したいパーツはclass=”pc”。
とclass指定するだけで、自動的に指定のブレイクポイントで表示、非表示を切り替えることができるようになります。

本の都合上、載ってないのは?仕方がないかもですが、説明とかあると、簡単に理解ができるかもです。

 


 

第6章 最後の仕上げ「検索エンジン対策

6-1 検索エンジン対策とは?
ホームページとインターネット検索の関係

ホームページがインターネット検索で表示されるようにするためには
ホームページを、サーバー上に公開しなければなりません。

yahoo!検索、Google検索のサイトで検索ワードを入力すると、関連するホームページが、すぐに表示されますが、これは検索ロボットと呼ばれるプログラムが世界各地のWebサーバーを巡回して、どのホームページに、どんなことが書いてあるかを記憶しているからです。

検索順位に影響するとされる主要項目100選など本には載ってます。

これだけはやっておきたい3つの検索エンジン対策
①検索結果に表示されるタイトル、説明文を設定する
②アクセス分析を設置する
③サーチコンソールに登録する

 


 

6-2 検索結果に表示されるタイトルと説明文の設定
検索ロボットはここを見ている

タイトルと説明文を適切に設定しないとどうなるの?

タイトルと説明文を設定しよう
完成させたホームページに、タイトルと説明文を設定。

トップページのタイトルと説明文を設定する


<meta name="description" content="サンプルマーケティングの公式企業サイトです。サンプルマーケティングの事業内容、会社概要、個人情報保護の取り組みなどを掲載しています。">
<title>"株式会社サンプルマーケティング"</title>

 


 

6-3 アクセス解析の設置
アクセス解析を行う目的とは?

アクセス解析とは、ホームページにアクセスした人が、どこから、いつやって来たのか?
滞在時間や観覧ページ数の傾向を調べたりすることです。

Google アナリティクスを設置しよう

Googleのアカウントにログインしておき、Googleアナリティクスのアカウントを作成する。
アカウントの作成の仕方など載ってます。

アカウント情報の設定
①アカウント名
②Webサイトの名前
③WebサイトのURL
④業種
⑤レポートのタイムゾーン、日本など

 


 

6-4 サーチコンソールへの登録
サーチコンソールとは?

Googleが提供してるホームページ管理ツールの1つです。
前は、Webマスターツールと呼ばれていました。

本ではサーチコンソールへの登録方法など解説してます。

 


 

Columnなど

ホームページ作成の実務で気を付けるポイント①
ホームページで使う長さの単位は「px」
ホームページ作成の実務で気を付けるポイント②
フリー素材は利用規約を確認しよう
画像のファイル形式について
なぜ、ブロックをさらにブロックで囲むの?
メールフォームの入手と設置
変更に強いCSSの修正方法
ボックスモデルを理解しよう
ベンダープレフィックスとは?
CSSファイルの数を減らしたほうがよい理由
ホームページのアイコンを設置しよう

 


 

ホームページ作成のツボとコツがゼッタイにわかる本 単行本 – 2016/9/30
中田 亨 (著)
会社のホームページは自社で作る時代
ホームページ作成ソフトやブログサービスの普及によって
専門知識がなくてもホームページが持てるようになりました。

ホームページ作成のツボとコツがゼッタイにわかる本 単行本 – 2016/9/30
中田 亨 (著)

LINEで送る
Pocket

おすすめ