記事上　共通・夏サマー

スマホの写真で！免許更新。
自分で撮影した写真で、印象の良い免許証。
かんたん！ヘッドライト磨き
ポリッシャーで簡単ヘッドライト磨き
2024年「もちこみ」オイル交換の工賃。ジェームス・オートバックス
ジェームスとオートバックスのオイル持ち込み交換工賃。
男の化粧水、コーセー雪肌精
男の化粧水、コーセー雪肌精

両方_B_両方_タイトル下_600-300

本文、ここから

本文スタート

wordpress使い方

最新HTML5とCSS3を勉強し直す。違いについて。2010年→2020年

2020年7月17日

メガネちゃん
2010年頃のwebデザイン知識しかありません。
姉さん
2020年のHTML5とCSS3の知識へアップデートねっ！！

このページは

個人的な備忘録です。

 

 

どうも、

webデザイナーのメガネちゃんです。

現在、2020年7月17日。

わたしは2010年頃のwebの知識しかありません。

2019年頃からwebデザインのお仕事などをいただいてweb仕事を再開しているのですが、要所要所でHTML5の知識やCSS3のコーディングが必要になる今日この頃。

これは良い機会ということで、最新のHTML5とCSS3の参考書を５冊購入してwebデザイン知識をアップデートさせることにしました。

web作業の流れ・制作フロー

1.目的の設定

webサイトを制作する理由は複合的です。１つじゃありません。似た理由も多々出てきます。

だからこそ、何を１番に優先するのか（プライオリティー）を決めます。

売上を増やしたいのか

イメージアップをしたいのか

作品を紹介したいのか

生徒を増やしたいのか

社員・パート・バイトを増やしたいのか

ブログサイトを作りたいのか

ショッピングサイトを作りたいのか

 

2.必要なページを考える

目的を達成するために、

どのようなページが必要になるのかを考えます。

「トップページ」は各ページの複合体なので一番最後に考えます。

講座紹介ページ

商品紹介ページ

商品検索データベースページ

今月のおすすめページ

プラン紹介ページ

技術紹介ページ

利用者の声ページ

経営責任者ページ

コンプライアンスページ

会社紹介ページ

仕事の風景ページ

社員紹介ページ

社員・職人募集のページ

ブログページ

SNS紹介ページ

住所アクセスページ

問合せページ

商品注文ページ

配達・送料についてのページ

 

3.サイトマップ・サイトツリーを考える

目的を達成させるページをゴールとして、

他ページからの導線・導き・誘導を考えて

サイトマップを作りましょう。

（  ※ 単にサイトを作って会社の存在をネットに流すだけが目的な場合もあります。その場合は深く考える必要もないでしょう。なぜならユーザーが欲している情報・ユーザーが興味を持ってくるれる情報をすべてわかりやすく掲載しているサイトであればユーザーはなんとなくすべてのページを見てくれるからです。）

 

　トップページ

｜

｜　　　　　｜　　　　　｜

商品ページ　→　会社案内　→　注文

　　　　　　　　　　　↓

　　　　　　　　　　｜　　　｜

配送料について　　注文フォーム

 

4.モックアップ画像（各ページのラフ画）を書いてみる

サイトツリーの次は、各ページのデザインです。

ラフ画で、ノートに手書きでもフォトショップでもイラストレーターでもかまいません。

ページ内のレイアウトを考えます。それぞれの配置場所を決めます。

視覚で説明できるように「 図 」で表します。

  • 文章や写真の配置場所
  • メニューの設置場所
  • リンクボタンの設置場所
  • google地図の設置場所
  • ロゴの設置場所

 

サイト全体の雰囲気も考えましょう。

楽し気に見えるデザインや色使いなのか、クール・冷静・気品を感じさせるデザイン・色使いなのか、

買いたくなるようなデザインなのか

会社イメージが良く見えそうなデザインなのか

おしゃれでクールが優先なのか

 

※現在は、一つのHTMLデータをCSSにて、PC/タブレット/スマホでそれぞれ異なる表示方法ができるようになっています（レスポンシブデザイン）

昔はwebサイトはPCでしか見れませんでした。よって大画面でポスターデザインに近い自由で大胆なデザイン方法が多かった。しかし現在ではそのようなサイトは個人で作るのはなかなか厳しい。（ レスポンシブが大変なため。レスポンシブしやすいブロックのようなデザインが一般的になった。 ）

アップルやGOプロのサイトはすごいなぁと思っちゃう。 ただ、PCはPC、スマホはスマホ専用のHTMLとCSSを用意しておけば昔のような大胆なサイトデザインも可能なワケですが・・・。

 

 

5.原稿を考える・写真素材を集める

ラフ画で、文章や写真の位置を決めたら、

実際にその文章・写真を用意します。

※ 問合せフォームや商品販売フォーム、商品検索データベースについては、

web屋に発注して作ってもらうか、自分で作成して用意するか、

ネットに転がっている無料プラグインなどを利用しましょう。

商品検索データベースを使う場合は、商品リストをエクセルなどでちゃんと作製して準備しておきましょう。
問合せフォームや販売フォームでは、ユーザーの氏名・住所・電話番号・メールアドレスなどのような項目を用意する必要があるのか十分に考えてください。

 

6.HTML・CSSでページの作成

材料がそろったら、

モックアップ画像のデザインに沿って、

MTML・CSSでコーディングしていきます。

 

サイトが完成したら、仮のwww環境でサイト動作をチェックします。（ 仮環境についてはgoogleで調べてみてください ）

特にサイト内リンクが正常にリンクされているか、問合せフォームでちゃんとメールが届いてくるか、商品データベースでちゃんとソートされるかなどなど。

 

問題なければ正式にアップして作業完了です。

 

 

文字コード

2020年では、Unicodeが世界標準。

すべて英語で記述されたサイトを作るならUnicodeで。

全角文字を扱う日本だとUnicodeの一種である、

UTF-8を使うことがHTML5で推奨されています。

 

webサイトの横幅

ブラウザの横幅で表示される大きさが決まります。それがレスポンシブデザイン。

例としては、

 

横0px～600pxの画面のスマホでサイトを見ている場合は、それ用のCSSが適用、

601～1000だとタブレット用のCSSが適用、

1001px以上だとPC用のCSSが適用

 

のような感じ。

よって、３パターンの表示を考えながらデザインを組んでいきます。

以下はパソコンで見た場合の各サイトの横幅の最小値。それ以上横幅を広げてみると余白が伸びたり、画像が拡大されたり文字が拡大されたりフレキシブルに表示されます。逆にそれ以下になるとタブレット用の表示に切り替わります。さらに狭めるとスマホ用の表示になります。

アップル：1060px～

TOYOTA：1020px～

コーセー：1160px～

ドコモ：950px～

キャノン：810px～

SONY：760px～

 

 

要素、終了タグがあってもなくても良い場合

< h1 > お魚くわえたドラ猫 < / h1 >

h1が要素で、前後が開始タグと終了タグ。

 

ただ、

< li > や < dd >だと、終了タグはあってもなくても良い。

 

< li > カツオ < / li >

< li > ワカメ < / li > でも、

 

 

< li > カツオ

< li > ワカメ  でもどちらでも。

 

ただし、

< img > や < br > だと、終了タグを付けたらダメ。

 

要素の属性名・属性値

< h1 class="top">

class="top" を 属性

class を 属性名

top を 属性値

と、呼ぶ。

 

 

HTML5の構造

googleさんに、このページのメイン部分はココで、補足的な部分はココです。メインの段落はココとココ。その内容はココ。といったように、

ページの各箇所を細かく振り分けたのがHTML5の基本構造。

今までだと、単に<div>で囲ってｈで段落分けしてましたが、<div>ではなく専用の要素を使うことに。

  • メニューには、<nav>
  • 内容エリアを示すため、<main role="main">
  • 重要なエリアを示す、<article>
  • 段落分けをする、<section>
  • 本文とは関係ない、<aside>
  • 単に囲むだけ、<div>

※ 要素mainの属性role="main"ですが、古いIE11ブラウザに対応させるためのものです。

 

<head>の情報

メタ情報など。（ meta keywords は もう不要です。評価の対象から外れましたので ）

<meta charset="UTF-8"> 文字コードの指定

<meta meta description="サイトの説明">

<title>サイトのタイトル</title>

<link rel="stylesheet" href="・・/・・・.css"> CSSの読み込み

アドセンス　８個 mix

-wordpress使い方
-,