Webデザイナーじゃない日記 Day 22『コーディングシェアハピ備忘録、始めました』

どうかしているよ日本人

２時間遅れて出社しましたが、社長からはお咎めなどなく、むしろ「大丈夫だった？」と心配していただきました。ホワイト企業で良かったです。

ちなみに私と先輩以外の社員は全員、電車の影響でお休みになりました。笑

社長もおっしゃってましたが、こんな台風の日でも出社する日本の風習はホントどうかしてますよね。

と言いつつ、私もどうにか出社しようと試みた側なので、どうかしているんですけどね。

仕事としてのLP制作開始

デザイン会社の方からデザインデータが送られてきたので、ついにコーディング開始です。

サイトとLPがきたのですが、LPの方を私一人で担当することになりました！

ディレクトリなどのルールはある程度ありますが、コーディングルールは完全に自由です。

前回のLPコーディングでcss設計をミスったので、今回はコーディングし始める前にまずは紙でhtmlとcssの構造を確認しました。

アニメーション実装デビュー戦

加えて、またアニメーションの要望もきたので、ついにここ最近のJavaScriptの勉強の成果が試されます。

つってもスクロールに応じたフェードイン程度ですが、せっかくなので次の目標を持ってアニメーションを実装したいと思います。

1. デザインの良さを活かす
2. ユーザーが見やすい、ストレスを感じない
3. カッコいい

本当は３を優先したい所ですが、それはただのエゴ。デザイナーとして何を実現させたいかを考えてコーディングしたいと思います。

今日のコーディング備忘録

退勤中に見たコーディングの知識を見て、自分がやっていたコーディングは間違いだったことに気付きました。これではいかんと思い、

これから、職場・Twitterを通して日々新しく知るコーディングの知識・スキルについて、備忘録として、書き留めていこうと思います。

コーディングスキルはまだまだですが、駆け出しエンジニアさんや、Webデザイナーを目指している方のお役に立つこともできると思います。一緒に勉強していきましょう！

ちなみに、もし間違っていたことを言っていたら、ガンガンに指摘していただいて大丈夫です！

Twitterでの学び

• 見出しの下に見出しはダメ

  • (例)<h2>猫の種類<h3>三毛猫</h3></h4>

    ---

• HTML要素に直にcssを指定してはダメ（非推奨）

  • (例)h2{font-size:1.8rem;}など
    ちなみに、reset.cssなどでの
    html{font-size:62.5%}や
    img{vertical-align:bottom}などはオッケーだそうです。

    ---

• head内のmetaタグ「title」は、「description」の前に書く

  • ※ちなみにdescriptionは、さほどSEO対策にはならないという説があります。（サルワカさんのサイトより：https://saruwakakun.com/html-css/basic/meta-tag）
    

    ---

• heightはpaddingなどで高さを確保する

  • 指定しても良いが、レスポンシブ化を考えると…という事。
    (例)四角を設けて、中に文字を入れて上下中央揃えにしたい時、
    height,line-height,vertical-alignなどで指定するが、レスポンシブで崩れる。
    paddingなら1つの値を変えるだけで済む
    ということだと思います（間違ってたらご指摘お願いします）
    

    ---

• imgタグはpタグで囲って使う

  • (例)<p><img src=””></p>
    インライン要素は基本的にブロックレベル要素の中で使わなければいけない。
  • ※ちなみにHTML5から登場したimgを囲うためのブロック要素figureタグは、その画像がなくなっても大丈夫な時に使います。
    
    • (正しい使い方）紫色を作るには、赤色と青色を１：１で混ぜます。（この下に絵の具を混ぜているfigure,img
      ⇛文章だけで成り立っているから画像がなくなってもOK
    • （誤った使い方）紫色の作り方（この下に赤と青の絵の具を混ぜているfigure,img）
      ⇛画像がなくなると作り方が分からないからNG

仕事中に調べたことの学び

• sectionタグの中には、基本的にhタグが必要。

• スマホで向きを変えた時（横向きにした時）に、ブラウザ側で文字の自動調整をさせたくない場合、text-size-adjust:100%を指定する

  • 正しくは、
    body{
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    }（bodyでなく、調整したくない要素に直書きでも可
    ちなみにデフォルトはauto。100%かnone指定で自動調整がオフになる。
    しかし、noneを指定するとChromeやsafariで崩れるそうなので必ず100%でオフにする。