100日チャレンジの172日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

172日目は

おはようございます
171日目

webサイトコーディングの課題
短い縦線の区切り線追加とか#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) November 28, 2019

ツイートは171日目ですが、172日目です。

はじめに

記事を書く目的は「自分のやり方の整理整頓」です。
というのも、自分はこう考えてやってるけど合ってるんだっけ、もっといいやり方あるかもな、、と最近思う今日この頃。

「業務の中でマークアップもするよ！」といった方、
「これからマークアップをやっていこうと思っているよ」といった方へ
一つの考え方として参考になるようなものになればと思います。

デザインが上がってきたときにやること

デザインカンプを貰った時にまず考えること・やることを記述します。
ちなみに、デザインがあがってきた時に「さあ！コーディングだ！」と突然手をつけたら色々ぐっちゃぐちゃになって爆死します。(経験談)

PCのデザイン、スマホのデザインを見比べる

※デザインカンプにPCとスマホ両方のデザインがあることを前提に記述します。

PCのデザインとスマホのデザインを見比べて、どこがどう違うのかをじっくり見ます。
ここでは以下を意識しています。

• 余白のルール
  • コンテンツ間の余白
  • コンポーネント同士の余白等
• テキストサイズのルール
  • 見出しのテキストサイズ
  • 本文のテキストサイズ
  • 注釈のテキストサイズ等
• コンテンツの位置関係
  • レスポンシブ前提の場合、要素の位置をスタイルの調整のみで変更できるかどうかを確認する
• 増える|消える要素はあるか

ルールが見えてこなかったり、不明な点がある場合は、素直に「教えてください」や、「こう実装しようと思ってるんですけど意図合ってますか？」とデザイナーさんにお伺いしています。
また、実装が難しそうな場合は、
「このやり方ならできます」や、「このやり方はどうでしょうか」と3案くらい持ってメリット・デメリットと合わせて説明し、
自分が思う「これがベスト」を提案してます。

文書構造が破綻しそうにないかをチェック

マークアップをする上で文書構造は、見出しと文章の関係性を明確にする上でとても大事です。
また、スクリーンリーダーで読み上げた際に、見出しがないことで文章が成り立たなかったり、意図していない見出しの中に画像やテキストの内容が紐づいてしまう等もあります。

それを防ぐために以下の観点でデザインを見て、文書構造を考えます。

• 見出しはどこかを考える
  まず見出しは何かを明確にしていきましょう。
  私はデザインカンプに直接「h1」や「h2」と泥臭くペンで書いてます。

• 見出しに紐づくものは何か
  上記で見出しを明確にしたら、次にその見出しの中になんのコンテンツが入るかを確認します。

以下の画像では、タイトルに紐づくのは画像とテキストであるようにしなければなりません。
以前私がやってしまったNGパターンを紹介します。

上記の「タイトル」を見出し要素（h1,h2等）としてコーディングする場合
単純に再現するだけならば、、、

<!-- NGパターン -->
<div class="container">
<h1 class="pageTitle">ページタイトル</h1>
  <div class="l-grid">
    <div class="l-grid_item">
      <div class="img">
        <img src="https://placehold.jp/150x150.png" alt="">
      </div>
    </div>
    <div class="l-gird_item">
      <h2 class="title">タイトル</h2>
      <p class="text">テキストテキストテキストテキストテキスト</p>
    </div>
  </div>
  <div class="l-grid">
    <div class="l-gird_item">
      <h2 class="title">タイトル</h2>
      <p class="text">テキストテキストテキストテキストテキスト</p>
    </div>
    <div class="l-grid_item">
      <div class="img">
        <img src="https://placehold.jp/150x150.png" alt="">
      </div>
    </div>
  </div>
</div>

と以前の私はやってしまってました。(大反省)
一見見た目は再現できているように見えますが
、上記では1つ目の画像が別の見出しのものに紐づいてしまうので、文書構造上はNGです。
なので、実際には

<!-- 多分OKパターン -->
<div class="container">
  <h1 class="pageTitle">ページタイトル</h1>
  <div class="l-grid l-grid-flexReverse">
    <div class="l-gird_item">
      <h2 class="title">タイトル</h2>
      <p class="text">テキストテキストテキストテキストテキスト</p>
    </div>
    <div class="l-grid_item">
      <div class="img">
        <img src="https://placehold.jp/150x150.png" alt="">
      </div>
    </div>
  </div>
  <div class="l-grid">
    <div class="l-gird_item">
      <h2 class="title">タイトル</h2>
      <p class="text">テキストテキストテキストテキストテキスト</p>
    </div>
    <div class="l-grid_item">
      <div class="img">
        <img src="https://placehold.jp/150x150.png" alt="">
      </div>
    </div>
  </div>
</div>

上記がマークアップ上正しい記述となります。
これだと、画像がタイトルに紐づく形になるので問題ないです。
画像とテキストを逆順にするのであれば、逆順にする用のclass属性を付けてあげましょう。

まとめ

今回はデザインが上がってきた時、コーディングを行う前に脳内整理として大きく上記２点をやるといいのではないかなと思ってます。
この後に、コーディング規則とか、どんな設計にするとか色々工程はあるのですが、それは後日公開しようかなと思っています。
もしそのほかにも「自分はこれをやってるよ！」「これを意識しているよ！」等ありましたら、教えていただけると幸いです。
よい、コーディングライフを！

結果

約半年間の勉強を経て、以下のようなホームページを制作しました。（ホームページ制作に費やした時間は3か月ほどです。）空いてる時間を見つけては少しずつ制作していったのでかなり時間がかかってしまいました。（笑）

焼き鳥 Dinning たんと ｜ 野々市の焼き鳥居酒屋

[PC版サイト]

[スマホ版サイト]

サイトは、モバイルフレンドリー、SEO対策、ユーザーエージェント判定、jQueryによるアニメーションなどを考慮しました。
サイト制作には、HTML5、CSS3、Bootstrap4のみを学習した状態で取り掛かり、必要な技術や知識はその都度学びながら作業を進めていきました。

使用した言語やフレームワーク

・HTML5
・CSS3
・Bootstrap4
・jQuery

ホームページを作ろうと思ったきっかけ

半年ほど前にwebプログラミングの勉強を始め、徐々に勉強をしていく中で完全オリジナルのホームページを作りたいと思うようになったのがきっかけです。最初は、クラウドソーシングを用いて誰かのためにホームページを作ろうと考えていました。しかし、初心者である私は一つも案件を受注することができませんでした。そこでポートフォリオ作成のためにも現在自分がアルバイトをしている居酒屋のホームページを勝手に作ってみることにしました。（笑）
出来上がったホームページをオーナーに見せてみるとぜひ欲しいということで公開に至りました。

サイト公開までの制作手順

1. サイトのデザイン、レイアウト、構造を大まかに決める
2. HTML、CSSを記述し、大まかなサイトを作り上げる
3. Bootstrap4を用いて余白やレイアウトを調節する
4. レスポンシブ対応にするためにスマホ版のサイトを作成する（1~3を繰り返す）
5. XAMPPを使用し動作確認
6. 文書、写真の用意
7. seo対策
8. jQueryの実装
9. レンタルサーバーを借りる（ロリポップ）
10. ユーザーエージェント判定、CSSハックに対応する
11. ホームページ公開

1. サイトのデザイン、レイアウト、構造を大まかに決める

正直自分はデザインやレイアウトを決めるのに一番頭を抱えました。デザインの勉強などもしたことがなかったので他の居酒屋ホームページを見まくりました。（笑）たくさんのホームページの中からいいなと思ったデザインを参考にしてサイトを制作しました。

2. HTML、CSSを記述し、大まかなサイトを作り上げる

HTML、CSSを記述し、大まかにサイトを作りました。文書や写真は仮のものを使用し、１で考案したデザインを形にしていきました。

3. Bootstrap4を用いて余白やレイアウトを調節する

CSSのフレームワークとしてBootstrap4を導入しました。制作したホームページの大半はBootstrap4を用いています。フレームワークによりかなりCSSの記述が楽になるのでCSSのフレームワークを学ぶことをお勧めします。自分の思い通りにCSSが反映されない時は、Chromeのディベロッパーツールを用いることで原因を突き止めていました。

4. レスポンシブ対応にするためにスマホ版のサイトを作成する（1~3を繰り返す）

サイトをレスポンシブ対応にする方法はいくつもありますが、自分はPC用サイトとスマホ版サイトを分けて作ることにしました。そのほうが、より自分の思い通りにレイアウトを調節できると感じたからです。手順としては、PC版と同じように1~3を行っていく形です。

5. XAMPPを使用し動作確認

ここまでのプログラミング反映の確認はChromeで行っていました（ディベロッパーツールを使うことでスマホ版のサイトも確認していた）。しかし、スマホ版のサイトを実機で確認がしてみたかったためサーバーが必要になりました。レンタルサーバーは費用がかかるため、無料でサーバー構築ができるXAMPPというソフトを使用しました。少し費用はかかりますが、圧倒的に楽で簡単なのは、レンタルサーバーを借りることです。

6. 文書、写真の用意

自分は、料理の魅力やオーナーの気持ちを伝えれるように文書を作成しました。写真は一部オーナーから頂き、足りない写真は自分のスマートフォンで営業時間外に撮影し編集しました。画像編集には、無料のソフトであるGIMPを使用しました。

7. seo対策

主なseo対策として、サイトに使用するワードについて気を付けました。（スモールワードとビッグワードをうまく使い分けることが大事。）また、HTMLファイル内にメタディスクリプションを記述したり、ファビコンの設定なども行いました。

8. jQueryの実装

サイトに動きを与えるためにjQueryを実装しました。サイトに動きを与えることでよりサイトが使いやすく見やすいものになっていきます。jQueryは、「スクロール幅によってトップに戻るボタンを出現させる」「ドロワーナビを表示させる」「ヘッダーとフッターのHTMLを別ファイルで管理する」といった箇所で実装しました。

9. レンタルサーバーを借りる（ロリポップ）

サイトが完成形に近づいてきたのでレンタルサーバーを借りました。レンタルサーバーはロリポップを使用しました。実践的にホームページをWeb上にアップロードしてみることでホームページの運用を体験しました。個人的にホームページをアップロードする瞬間が一番楽しかったです。（笑）

10. ユーザーエージェント判定、CSSハックに対応する

PC版のサイトとスマホ版のサイトをアクセスした端末によってうまく振り分けれるようにユーザーエージェント判定をjQueryで制御しました。
いざ、サイトを公開しようと思いアップロードしたところブラウザごとにレイアウトが乱れてしまうことが起きていたのでCSSハックにも対応させました。

11. ホームページ公開

自分の思うようなホームページが完成したので公開に至りました。今後は、「Google Search Console」や「Google Analytics」を用いてseo対策がうまく適応されているかどうかを確認しつつ、ホームページを運用していくつもりです。

感想

ホームページを作成してみて一番重要なのは、使用する写真とSEO対策であると感じました。より画質の良く、映える写真を利用することで見栄えのいいホームページになります。またそれを検索上位に表示させるSEO対策も必須です。
レイアウトが思い通りにいかないことが多く、試行錯誤を繰り返すことはとても大変でしたが、その分達成感はものすごくありました。現在HTMLやCSSなどを勉強していてアウトプットする方法を探している方は、オリジナルのホームページやブログを作成し、公開してみるといいと思います。

今後の展望

ホームページの作成当初は、出来上がったサイトを元にクラウドソーシングや近所のお店への直営業から案件を受注することを目標をしていましたが、ホームページが出来上がっていくにつれてより自分の技術を向上させたいと思うようになっていきました。
今後は、今回作成したホームページの運用とともにJavaScriptやそのフレームワークを中心に勉強していきたいと考えています。
ホームページのSEO対策についての改善案や、おすすめするJavaScriptのフレームワークなどありましたら教えてもらえると嬉しいです。

CSSのレイアウトの歴史

はじめに

これは新人教育用で軽いCSSの問題やらを作ろうとして、備忘録的にまとめたものです。
CSSでレイアウトを設定するにあたって使うプロパティの歴史についてを書き留めました。
内容としては深くないですが、こんなのあったんだーと思い返してください。

1.テーブルレイアウト-table layout-

See the Pen jOOgjpm by k1-web (@k1-web) on CodePen.

当時を知らないので、他の人に聞きながらこんな風かなーと実装していました。
現代から見ると、無理やりテーブルでどうにかしてる感がすごい・・・。
ただやってることを考えると、flexboxに近いのかな？って思えてきます。
ただ全部テーブルって今やるとなると中々にフラストレーションたまります。

2.フロートプロパティ-float property-

See the Pen oNNKrmR by k1-web (@k1-web) on CodePen.

flexboxやgridなどに至っていない人はまだ結構現役なのかな？と思われるプロパティ。
昨今は基本的に::after疑似要素にclearfix（フロート解除）を付けていますが、あえて懐かしい空divで解除してみました。
自分自身としては、もうすでにflexboxがメインになってしまっているので、使うことはないだろう・・・というプロパティです。
ただやはり左右に並んで配置したいときに使うプロパティとしては長らく使用されていました。
clearfixがないとレイアウトが総崩れしてしまうっていうのが無ければ、まだまだ使えたのかな？と思うところもあります。

3.インラインブロック-inline block-

See the Pen MWWNMNG by k1-web (@k1-web) on CodePen.

display: inline-block;を使ったレイアウト、floatでのめんどくさいレイアウトが総崩れはありません。
ただし、要素の幅をびたびたに設定するとなぜかコンテンツとの間に余白がでてしまいます。
それはinline-blockという文字状態を装ったブロック要素になるため、
letter-spacingなどの文字間プロパティが効いてしまいます・・・
そのため、一度font-sizeやletter-spacingを無効にして再度設定しないといけないという煩わしさがあります。
floatはレイアウトするために要素を追加しなければならなく、
inline-blockはプロパティを追加しなければならないという感じになりました。
でも、使い勝手としてはfloatより断然扱いやすいので、ie10前とか対応したい場合はinline-blockを使えばいいと思います！

4.フレキシブルボックス-flexible box-

See the Pen wvvVVKd by k1-web (@k1-web) on CodePen.

古いブラウザでもベンダープレフィックスを使えばie11から対応しているdisplay: flex;です。
floatや、inline-blockで追加していたものはなくなりました・・・！
プロパティが多いのでとっかかりはなかなか難しいですが、かなり使いやすく自由度が高いです。
レイアウト自体の調整の他に、flex-directionを使用すれば、上下の配置にしたり、左右逆で配置など向きの変更が簡単です。
さらに子要素に与えるorderプロパティを使えば、表示順序の並べ替えなどもできます！

5.グリッドレイアウト-grid layout-

See the Pen vYYooxK by k1-web (@k1-web) on CodePen.

ie11に対応が厳しい（-ms-が必要）のため、実践的に使ったことはありませんが、試してみるとこんな感じ。
全体的なレイアウトは簡単にしていできたのでいいなーと思いました。
セクショニングレベルにはgrid layout、インナーのアイテムの並びにはflexboxってのが今後のデフォになってるみたいです。
各要素に名前を持たせて、親要素で制御するっていうのはなんかプログラムに近い発想かなーと思ってます。
ie11に完全対応orもうなくなるとかではないかぎり実践で使うことはないかなーとは思います・・・

あとがき

実際に古きレイアウトを作ってみてやりにくさや別の視点があったり、
そのあと新しいものをしてみるとこの歴史があってこその仕様だったんだなーと思うところがあったり、
新人教育として備忘録にしたかったものですが、なかなか勉強になりました。

経験のないtable layoutとgrid layoutに関しては、もーちょいちゃんとやりたかったなーと思ってます。
今後もこの記事をちょくちょく修正していきたいと思います。

はじめに

こんにちは！@70days_jsです。

記事のレコメンドとかで使われているあの、画面の端から端までループするスライダーを作りました。
分かりづらいですよね。。。作ったものはこれです。↓

苦戦した挙句、なんとか機能自体はcssで完結できたものの、コードがとても汚くなってしまいました。
さらに、1つ変更すれば動かなくなったり、あまりレスポンシブでなかったり、とりあえず形にしたという状態です。

今回は説明もかなり分かりづらいと思うので、直接すベてのコードが見たいという方はこちらへ→(html,　css, JavaScript)

今日は42日目。(2019/11/29)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day42.html

やったこと

もう一回になりますが、今日はこれを作りました。↓

htmlの全体はこんな感じです。↓

    <div class="wrapper">
        <ul class="listWrapper first">
            <li><a href="#"><img src="day31_image/1.jpg">
                    <div>
                        <p>記事タイトル</p><div>記事の内容</div>
                    </div>
                </a>
            </li>
  <!-- 以下、画像分だけ同じようにliを繰り返す -->
        </ul>
  <!-- 上にあるulとクラス名以外、全て同じ！ -->
        <ul class="listWrapper second">
            <li><a href="#"><img src="day31_image/1.jpg">
                    <div>
                        <p>記事タイトル</p><div>記事の内容</div>
                    </div>
                </a>
            </li>
  <!-- 以下、画像分だけ同じようにliを繰り返す -->
        </ul>
     <div>

ulが2つあります。
ulの中身はどちらも同じもので、違うのはクラス名だけです。（最初にfirst, 2つ目にsecondクラスをつけた）
同じものが2つあるのは途切れなくループしているように見せるためです。
1つ目のulのliの数と、2つ目のulのliの数は同じにします。（cssのanimationの関係で）

次はcssです。animationが冗長な感じになってしまいました。
大事なところだけ抜き出します↓

.wrapper {
    width: calc(100vw / 5);
}

.first {
    animation: cat 16s -8s ease infinite;

}

.second {
    animation: mountain 16s ease infinite;
}

.wrapper:hover ul {
    animation-play-state: paused;
}


@keyframes cat {
    0% {
        transform: translateX(100%);
    }
    5% {
        transform: translateX(80%);
    }
    10% {
        transform: translateX(80%);
    }
    15% {
        transform: translateX(60%);
    }
    20% {
        transform: translateX(60%);
    }
    25% {
        transform: translateX(40%);
    }
    30% {
        transform: translateX(40%);
    }
    35% {
        transform: translateX(20%);
    }
    40% {
        transform: translateX(20%);
    }
    45% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(0%);
    }
    55% {
        transform: translateX(-20%);
    }
    60% {
        transform: translateX(-20%);
    }
    65% {
        transform: translateX(-40%);
    }
    70% {
        transform: translateX(-40%);
    }
    75% {
        transform: translateX(-60%);
    }
    80% {
        transform: translateX(-60%);
    }
    85% {
        transform: translateX(-80%);
    }
    90% {
        transform: translateX(-80%);
    }
    95% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes mountain {
    0% {
        transform: translateX(0%);
    }
    5% {
        transform: translateX(-20%);
    }
    10% {
        transform: translateX(-20%);
    }
    15% {
        transform: translateX(-40%);
    }
    20% {
        transform: translateX(-40%);
    }
    25% {
        transform: translateX(-60%);
    }
    30% {
        transform: translateX(-60%);
    }
    35% {
        transform: translateX(-80%);
    }
    40% {
        transform: translateX(-80%);
    }
    45% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(-100%);
    }
    55% {
        transform: translateX(-120%);
    }
    60% {
        transform: translateX(-120%);
    }
    65% {
        transform: translateX(-140%);
    }
    70% {
        transform: translateX(-140%);
    }
    75% {
        transform: translateX(-160%);
    }
    80% {
        transform: translateX(-160%);
    }
    85% {
        transform: translateX(-180%);
    }
    90% {
        transform: translateX(-180%);
    }
    95% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(-200%);
    }
}

.wrapper {
width: calc(100vw / 5);
}

ここはulの中にあるliの数を5つにしたので、5で割っているだけです。

.first {
animation: cat 16s -8s ease infinite;
}
.second {
animation: mountain 16s ease infinite;
}

animation名の指定と、もう一つfirstだけに-8sを書いています。
この8はanimationの時間（16秒）を2で割った数字です。
ループっぽく見せるために時間の調整をしています。

.wrapper:hover ul {
animation-play-state: paused;
}

ul（スライダー）にマウスを乗せたら停止するようにしています。

次は@keyframesですが、これは5%刻みで、20%移動しては停止する、というのを繰り返しています。
多分もっといい書き方があると思うのですが、今回は作るだけで精一杯でした・・・。

最後に、機能とは一切関係ないですが、色の装飾にJavaScriptを使ったので紹介しておきます。

// .one-boxクラスは全てのliについているクラス名
let oneBox = document.getElementsByClassName('one-box');

for (var i = 0; oneBox.length > i; i++) {
    let content = oneBox[i];
    randomColor(content);
}

function randomRGB() {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    let rgb = [r, g, b];
    return rgb;
}

function randomColor(element) {
    let rgb = randomRGB();
    let r = rgb[0];
    let g = rgb[1];
    let b = rgb[2];
    element.style.backgroundColor = 'rgba(' + r + ', ' + g + ',' + b + ', .3)';
}

このコードで背景の色をそれぞれランダムに設定しています。

感想

将来自分のサイトを作ったときに、記事のレコメンド機能があればいいなと思って作ったんですが、なかなか大変でした。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

1.写真が画面の端から端へ流れる無限ループするアニメーション | chocolat | Freelance Frontend Engineer

とても分かりやすかったです。ありがとうございます！