ども！デザインエンジニアのMasaです。

なんのために共有するのか？

これからwebサイトをcssを仕事にしようと思っている人や、
自分で凝ったHPとかつくってみようかなーと思っている人に
webサイト構築ってどんなものなのかの片鱗を共有してマッチを増やし、ミスマッチを減らすため。

「知りたかったことが知れた！」
とか
「新しいことが知れた！」
と思ったら左のいいねボタンをポチッとお願いします！

仕事をはじめる前の状態はどうだったのか？

HTML

よく使うタグはだいたい覚えてるくらいのレベル。
チーティングとしてHTMLクイックレファレンスはよく使った
http://www.htmq.com/

CSS

セレクタの使い方がわかってきたくらいのレベル。

HTMLにclass="hogehoge"ってして.cssファイルに
.hogehoge{font、padding、margin}ってすればええんやろと、
そしてHTML要素の中に直接style="・・・"って書くと優先度が高いんでしょ？ってレベル
（だからwordpressなどに組み込むときに悪影響がでたりするので避けるんだが…）

CSSのセレクタの優先度計算はこちら
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

bootstrap4

HTMLとCSSがわかってたらbootstrapはコードみたらだいたい理解できるレベル。

かりに「忘れちゃったぞ〜」と思ってもだいたいこの
「bootstrap4 移行ガイド」を読めばわかるし、
なんならサンプルまで用意してくれている用意周到具合で超便利。
https://cccabinet.jpn.org/bootstrap4/

jQuery

progateを2周はして、だいたい何をどう書けばいいかわかっている状態。
jQueryのprogateのまとめはこちら！

jQuery初心者はこれだけでOK！progateで学習したjQueryまとめ
https://qiita.com/pocket_ma_kun/items/c8edcaf660a439e58660

HTML+CSS+bootstrap4+jQueryで何をつくったことがあったのか？

上の技術を使ってHPくらいは作成したことがある状態。

こんなサイト↓
Ed.D. ~Eros Driven Development~
https://storage.googleapis.com/edd-homepage/IntroductionEdD/index.html

どう考えて仕事に着手したのか？

「大枠をbootstrap4で記述すれば、あとはその大枠の中の小さな部品たちを書いていけば楽ショーでしょ」って考えてた。ところがbootstrap4を使ったことで思いもよらぬ事件が発生することに。。。

どんな問題が発生したのか？

◆Bootstrapなどを上書きするクラスの指定方法
・htmlの要素や、bootstrap4のデフォルトでついているcolorやmarginやpaddingが邪魔でデザイン通りにならない。
→それを上書きするための方法としてこういうセレクタの書き方を知れた。

「ul .class名」というセレクタで
ul要素自身を含んで下の階層のどこかにあるclassって名前のプロパティをいじる。

「ul.class名」というセレクタで
ul要素自身の中のclassって名前のプロパティをいじる。
→
結局Bootstrapなどのライブラリを使わないほうが
デザインによっちゃ早いことがある…

仕事をやっていて学んだことは？

「学ぶためには稼ごう」というちきりん師匠のコトバ通り、今回のシゴトで学べたことめっちゃ多いっす！！
「払うべきか、稼ぐべきか」
http://d.hatena.ne.jp/Chikirin/20100413

◆webデザイナーの人とどのくらいコーディングをはじめる前に考え方を共有しているのか？
例えば、各ブロックのタイトルの文字サイズは◯pxにしています。
各コンテンツのテキストは◯pxにしています。
各コンテンツは縦方向・横方向に伸びるようにしてください。
各テキストのどの部分がアンカー要素で、どの部分は非アンカー要素なのか？
などなど

案件の後で知ったこの記事内容を知っていればかなりラクだったやろうなーと感じた！
webサイト構築・webデザイン系の人には一読しておいてほしい。
https://zukulog098r.com/design-xd/

◆メディアクエリの使い方
今回の案件はスマホとPCの両方で見れるサイト構築が求められたので、
メディアクエリを学習できた！これはすげー便利。
まるごとコピペすれば使えるのでいろいろいじってみると血肉になるぞぃ。

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">

    <title>Learning</title>
  </head>
  <body>
    <div class="changeColor">
      <h1>サンプルテキスト</h1>
    </div>
  </body>
</html>

css

/*SPファーストの書き方*/
/*SPを基準にプロパティを書く*/
.changeColor{
  background-color: #3effff; /*スカイブルー*/
  width: 100vw;
  height: 50vh;
}

/*SPを基準にして、あるクラスのPCでの変更点を書く*/
/*今回はデバイス幅に応じて色だけ変更する*/
@media screen and (min-width:576px){
 .changeColor{
  background-color: #c16666; /*淡い赤*/
 }
}

書き方で注意することがある。
CSSも上の行から適応されていくので
@mediaは後から書かないとうまく動かない。

◆CSSプロパティにはある程度書く順番がある
順番ってあるのかなーって感じていたらあるっぽい。
好きな順番を指定して、ソートしてくれるプログラムまたはエディタ欲しいわ笑
CSSプロパティ記述順序
https://qiita.com/mgn/items/6154ccd2e23b2e65c769

◆Githubでバージョン管理するの超便利。
自動で差分を計算してくれるので、どこで何が変わったがためにうまくいくようになったか、また逆にうまく動かなくなったのかわかる。

◆デザイン通りにコーディングをして「見栄え」を重視するのか、
ライブラリやCDN(contents delivery network. ライブラリのリンクをHTML内に書いておけば)を使うことを前提にして「スピード」を重視するのか、一体どちらの方針なのか？によってコーディングする人の時間や精神力の使い方がまったく変わってくるので注意

◆学んだ結論
CSSを0から書くのは結構手間暇を使うからオレはけっこうキツイって感じた。
自分の芸術作品のために使うならまだわかるが、スピードを求めるならライブラリやフレームワークにあわせたデザインに自分でやっていきたいところ。

今後の課題は？

webflowを学習してCSSを0からゴリゴリ書かなくてもサクッとHTML+CSS+JSが書き出されると噂のツールを勉強してCSSを0から書かなくてもよい状態に成長したい！成長する！

「知りたかったことが知れた！」
とか
「新しいことが知れた！」
と思ったら左のいいねボタンをポチッとお願いします！
ではではドロン！！

処女作：エロ診断メーカー(共同製作：Kei)
https://ero-shindan.herokuapp.com/

【初心者におすすめ！】HTML＋CSS+bootstrapでwebサイト案件を0から解説。