Web プログラミング

【もりけん塾14日目】LP制作までの学習方法

もりけん塾生になって14日目のねこらのん(@nekoranon256)です。

 

知人からLP制作の案件を貰っているとのことをもりけん塾で伝えると、学習よりもさ気に約束事を達成すべきということをアドバイスいただいたので学習の路線変更。

 

そして今日のタスクはコレ。

もりけんさん(@terrace_tech)ありがとうございます><!

 

多いとか少ないとかの配分もまだ分からない状態なので手探りからのはじまり。

 

今日の勉強報告を記事にまとめています。

 

タッチタイピングをはやくするための指標『寿司打』

毎日寿司打を25分してから作業すると基本タイピングの位置を意識する!

今日ははじめて10,000円を寿司打で叩き出せました。

ただ目標の勝又さん(@poly_soft)の15,000円には程遠いのでまたつづけてやっていきます。

 

LP作成完了までのタスク①HTML

HTMLのLP作成完了までのタスクは以下の4つ。

  1. サーバーから送られてきたファーストバイトをブラウザが受け取ってから描画されるまで
  2. 解析、DOM構築、レンダリング、レイアウトフローなど
  3. SEO
  4. アクセシビリティ

 

今日はSEOとアクセシビリティ。

HTML①SEOについて

SEOについてはSEOラボさんの記事を参考にしています!

 

HTMLで関連するSEOについて

  • 意味
  • 使用する理由
  • そもそも何か
  • どう関連しているのか

の順番に調べていったことをアウトプットしていきます。

 

SEOの意味

SEOはSearch Engine Optimizationの略で検索エンジン最適化のことです。

 

HPをGoogleやYahoo!などの検索エンジンの検索上位にし訪問者数を増やすための手法です。

検索エンジンとは情報を検索するためのシステムのこと

 

例えば「SEOとは」とGoogle Chromeで検索すると以下のような検索結果がでます。

上位4位はSEOのルールをきちんと理解されているHPでGoogleに信頼されているサイトになっています。

 

SEOを使う理由

SEOを使う理由はサイトに訪問する多くのユーザーはオーガニックサーチの流入が多いからです。

 

オーガニックサーチは自然検索、つまり検索窓に知りたいキーワードを入れて出る検索結果のこと。

 

せっかく書いたブログや大金を使って作成したHPは読まれなければ意味がありません。そのためこのSEOを使って訪問者の流入を増やすことが重要です。

 

私もよりSEOを意識してブログ書こうと思います!

HTMLとSEOの7つの関連

ライティングでもSEOを意識する記事を作成することが大切ですがHTML構造時もSEOが必須。

理由はHTMLの最適化がGoogleからの評価が上がるからです。

 

 

HTMLとSEOは以下の7つが関連しています。

  • titleタグ
  • metaタグ
  • hタグ(見出し)
  • canonical
  • リストタグ
  • aタグ
  • alt属性

上記の順番にまとめていきますね。

 

 

①titleタグ

キーワード検索したときに検索結果一覧で表示されるものがタイトルタグで表示されているもの。

 

このタイトルタグは非常に重要なのでキーワードはタイトルに入れる必要があります。

 

  • 文字数35文字程度
  • サイトの特徴がわかるキーワードの盛り込み
  • ページのファーストビューとタイトル内容に相違がないようにする

上記を意識したタイトル設定が大切。

 

②metaタグ

metaタグは<html>内に記載されているものです。

 

このmetaタグはページの情報を不可するために記載するタグです。

 

タイトルと関連性のあるキーワードや内容を盛り込む必要があります。

③hタグ(見出し)

記事中にある目次に表示されているものが見出しで非常に重要な部分なのでhタグ中に狙いたいキーワードを入れること。

 

h1タグからh2、h3…と順番につけていくことが必要。

 

注意したい点はフォントサイズとして利用しないこと。

 

④canonical(カノニカル)

canonicalはURLを統一化し正規化するタグのこと。

 

1つのページにも関わらず、

  • http
  • https
  • wwwの有無

など複数のURLを持っていることがあります。

 

これだとGoogleからの評価が分散化されるためSEOの効果が発揮されません。

  • canonicalタグで1つのURLを指定して評価を統一ながらSEO効果を高める
  • 絶対パス(URLを全部書く書き方)で指定を推奨
  • 「ドメインの正規化」:サイトを立ち上げたら最初に設定すること

 

canonicalタグは<head>内に以下のように記載すること。

<link rel="canonical" href="https://example.com/">

 

ブログを立ち上げたらしていきたいものですね。

 

⑤リストタグ

SEOはリストタグも関係します。

 

クローラーが重要なキーワードだと判断するためです。

クローラ(Crawler)とは、ウェブ上の文書や画像などを周期的に取得し、自動的にデータベース化するプログラムである。

引用:Wikipedia

 

リストタグは

  • <li>
  • <ul>
  • <ol>

を使って上記のように<li>、<ul>、<ol>を箇条書きにしているもののことです。

 

⑥aタグ:リンク

aタグはリンクに関係しておりリンクテキストはリンク先のキーワードを入れる必要があります。

<a href="リンク先のURL" rel="nofollow”>リンクテキスト</a>

ちなみにリンク先のページがSEO評価を受けたくない場合は「rel=”no follow”」を使うようです。

⑦alt属性:画像表示

画像にもSEOが関係しています。

 

何らかのエラーなどによって画像が表示されない場合に「alt属性」に記載されている内容が表示されるので

 

<img src=”aaa.jpg” alt=”画像の説明”>

 

上記のように画像の説明は必須です。

 

web制作時に上記のことを忘れないためにも以下のチェックシートを横に作成しようと思います。

 

 

ライティングのSEOだけを意識しているとcanonicalについては触れていないことが多かったた目見落としがちなところなので調べて良かったです…!

 

(もりけんさん(@terrace_tech)ありがとうございます‼)

HTML②アクセシビリティ

アクセシビリティについて調べていったことをまとめていきますね。

  1. アクセシビリティの意味
  2. なぜ使うのか
  3. HTMLとの関連性

上記の順番にまとめていきます!

 

アクセシビリティの意味

Webのアクセシビリティは障害を持つ人々に対するweb上のバリアフリー化

 

視覚障害、聴覚障害など身体においてさまざまな障害を持つ人々を意識してweb上でも点字や音声ブラウザ、テキストブラウザなどの非視覚系のものでインターネットを身近なものにする目的がある。

【注意】アクセシビリティとユーザビリティは混同しがち

アクセシビリティとよく混同されがちなユーザビリティ。

 

ユーザビリティは5つの特性をもっています。

  1. 学習のしやすさ
  2. 効率の良さ
  3. 記憶のしやすさ
  4. エラーの起こしにくさ
  5. 主観的満足度

このようにアクセシビリティとは異なるので混同しないこと。

Webコンテンツアクセシビリティガイドライン14項目とチェックシート

アクセシビリティ14のガイドラインは以下のものがあります。

アクセシビリティ14のガイドライン
ガイドライン1. 聴覚および視覚コンテンツの同等の代替手段を提供します。
ガイドライン2. 色だけに依存しないでください。
ガイドライン3. マークアップとスタイルシートを使用し、適切に実行します。
ガイドライン4. 自然言語の使用法を明確にする。
ガイドライン5. スムーズに変換するテーブルを作成します。
ガイドライン6. 新しいテクノロジーを特徴とするページが適切に変化することを確認します。
ガイドライン7. 時間に依存するコンテンツの変更をユーザーが制御できるようにします
ガイドライン8. 組み込みユーザーインターフェイスに直接アクセスできることを確認します。
ガイドライン9. デバイスに依存しない設計。
ガイドライン10. 暫定的なソリューションを使用します。
ガイドライン11. W3Cテクノロジーとガイドラインを使用します。
ガイドライン12. コンテキストとオリエンテーション情報を提供します。
ガイドライン13. 明確なナビゲーションメカニズムを提供する。
ガイドライン14. 文書が明確でシンプルであることを確認します。

引用:Webコンテンツアクセシビリティガイドライン1.0

※英語表記のものをGoogle翻訳によって日本語にしているので若干日本語がおかしいところがあるかもしれません。

 

アクセシビリティのチェックシートもWebコンテンツアクセシビリティガイドライン1.0に掲載されていました。

引用:Webコンテンツアクセシビリティガイドライン1.0

 

 

Webのバリアフリー化にする10の方法

実際にweb製作時にバリアフリーで意識することは以下の10があります。

■ バリアフリーを確立するアクセシビリティを向上させるために、以下の点に留意しましょう。

  • 画像には alt属性を用いて、適切な説明文を記述する
  • フォントの大きさは、相対値を用いて設定する
  • ナビゲーションにアクセスキーを設ける
  • フォームのコントロールにはタブキーを設定する
  • font、b、u などの物理要素の使用を避ける
  • スクリプトが実行できない環境のために、noscript要素を使って代替を用意する
  • フレームを使用する場合には、noframes要素を用いて代替を用意する
  • テーブルは、summary属性を用い、適切に変換できるよう配慮する
  • テーブルのヘッダセルには abbr属性などを利用して情報を盛り込む
  • 文書情報を埋め込むヘッダ部に、文書の前後関係を明示的に記述する

引用:アクセシビリティ --- Accessibility

 

<画像>

画像はただ単にalt属性に「会社のロゴ」という説明ではなく「◯◯会社」などの適切な説明文が必要。

 

<ナビゲーションにアクセスキーを設ける>

マウスが使えない環境もしくはマウスが使えない可能性があるために以下のように「HOMEに変えるためには"H"を押すだけで良いような環境設定をしておく。

<a href="index.html" accesskey="h">Home</a>

引用:アクセシビリティ --- Accessibility

 

<物理要素の使用を避ける>

色や太字、斜体などで文字を装飾するのではなく代替タグやスタイルシートを用意しておく。

 

abbr ヘッダセルの内容を短く説明する

summary テーブルの説明

引用:アクセシビリティ --- Accessibility

 

web製作者はどんな状況でどんな人が使うかなどのことを視野にいれつつ作成する必要があるということがアクセシビリティを調べてわかりました!

 

具体的にどうやってweb制作で組み込んでいくかについては『アクセシビリティ向上のためにコーディングで出来ることまとめ』の記事がわかりやすかったのでリンクを貼っておきます。

LP作成完了までのタスク②CSS

CSSのLP作成完了までのタスクは以下の4つ。

  1. CSS ・flex, or gridで横並び
  2. position absolteとrelativeの違いを理解2つのwidthが違う要素で中央配置
  3. media queryでスマホ対応できる
  4. display blockとinline-block, inlineの違い

 

今日は「CSS ・flex, or gridで横並び」「position absolteとrelativeの違いを理解2つのwidthが違う要素で中央配置」をする!

CSS①flexかgridで横並び

flexもgridも横並びにすることができます。

 

他にも横並びにするCSSがあります。

 

横並びにする表現

  • float
  • table-cell
  • inline-block
  • flex
  • grid

 

これらについてCSSで横並びを表現できる5パターンとそれぞれの役割(使い所)の記事を参考にまとめていきますね。

 

float

floatは画像の周りにテキストが回り込むようなレイアウトになります。

<HTML>

<img class="float-test" src="https:~" alt="">

<CSS>

.float-test{

float: right;
width: 100px;
margin-right: 10px;
margin-bottom: 10px;

}

table-cell

レスポンシブデザインで表の対応時に用います。

 

  • スマホでは → display: block;
  • PCでは → display: table-cell;

引用:CSSで横並びを表現できる5パターンとそれぞれの役割(使い所)

上記の結果スマホでは表が縦に、PCでは表が横になるように変更することができます。

inline-block

レスポンシブデザインでinline-blockを入れることによって画面幅が変わります。

 

画面幅が変わることでテキストが1列から2列に変更など見やすくしてくれるなど対応してくれます。

引用:CSSで横並びを表現できる5パターンとそれぞれの役割(使い所)

はにわまんさんが書いてらっしゃいますが注意点は「意味が分からない余白と戦う」ことになるそうです。笑

flex

flexは整列した要素を伸縮することが可能でUIのレイアウトに役立つもの。

 

はにわまんさん(@haniwa008)曰くレイアウト目的で横並びにするなら

display: flex;

1択だそうです。

 

 

 

上記の3つだけを理解できれば良いそうです…!

  1. justify-content: space-between;:両端は端っこにくっつけて間は均等にする
  2. flex-direction: column;:横並びから縦並びに変更
  3. flex-wrap: wrap;:折返し
  4. flex-direction: row-reverse;:順番を入れ替える
    flex-direction: column-reverse;:逆向きになる

 

キャパオーバーになりそうなくらい量が多いのでこれは助かります…!

 

はにわまんさん(@haniwa008)ありがとうございます…!

 

ちなみにflexboxは要素が増減・可変する場合に使用すると楽だそうです。

grid

ページ全体のレイアウトのようなある程度大きな領域の分割をするときに向いているもの。

 

 

シンプルにかくことができるのはうれしいですね!

 

①display: grid;→列をつくる
②grid-template-columns→行のグリッド間に10pxの余白『単位:fr』
③grid-row-gap→列のグリッド間に10pxの余白
④grid-column(row)-gap

 

でもどういった状況でgridを使うのかよくわからない…CSS GridとFlexboxの使い分けに答えがありました!

 

・ターゲットはもちろんモダンブラウザだ!(Internet Explorerではない)
・要素の数やサイズは既に決まっている
・横方向だけではなく、縦方向も細かく制御したい
・装飾的な理由でHTML構造を妥協したくない

引用:CSS GridとFlexboxの使い分け

gridは縦方向までの自由度が高いようなので使い勝手がよさそう…!

 

CSS②position absoluteとrelativeの違いを理解できて、2つのwidthが違う要素で中央配置ができるようになる

absoluteとrelativeの違い、2つのwidthが違う要素で中央配置ができるようになるについて調べてまとめていきます。

absoluteとrelativeの違い

absoluteは親要素を基準に位置を変えることができ、relativeは現在の位置から要素を10pxずつ移動させることができます。

 

2つの違いは「基準点の位置」。

 

positionプロパティによって要素を移動させることや、画像とテキストを重ねること、そして画面上に要素を固定することができます。

 

おわりに

「2つのwidthが違う要素で中央配置」は今日は理解できなかったので明日に持ち越し…!

 

もりけんさんがツイートしていたけど2日かかるものもあるということ頭に入れる必要があるということがわかったな〜

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada