基本的なことだけど、知っておきたいWEB知識まとめ

セブでITの勉強して、日本に帰ってきてWEB制作会社で働くようになったけど、学校でITの勉強をしてても、分からないことも多かった。思うと恥だなと思うこともあるけど、初心者の人も知っておいたら損はないなと思うので、書いてみる。
始めって、分からないことが分からないから、無駄に時間かけてしまう。最近WEB系の友達とWEB業界って大変だよねーって話してた。特にはじめは。入社するまでに知識があるに越したことはないけど、なかなか、勉強の仕方が分からないこともある。勉強をやらないとなと思いつつ、すすんでなかったな。そのジレンマとの戦い(笑) なので、今思えば知っておいたら良かったなという知識を書くいてみる。

ブレイクポイント

プログラミングの勉強をしてると、スマホ用のデザインを使う時って、Bootstrapを使うことがあると思う。でも基本的に @media screen and (max-width:750px) を使ってる、むしろBootstrapは今、あまり使わない。基本的にSEO対策もあるしスマホでみる人が多いから、今はPC用とSP用のデザインを作る。ブレイクポイントの数値はものによって変わる。

TDK

タイトル、ディスクリプション、キーワード。SEO対策してたら分かるんじゃないかなと思う。キーワドは書かないこともある。SNSのシェアをするOGPとかも覚えておいた方が良い。 https://marketingnative.jp/how-to-use-open-graph-protocol/

プラグイン

jquery のプラグインを使って動きをつける。 参考サイト https://to-memo.com/web/convenient_plugin_conclusion01/
各プラグインをダウンロードして、貼り付ける。

CSSアニメーション

動きがあるとプログラミングかと思うかもしれないけど、CSSでできる。例えば、hoverしたときに、色が変わる処理を加えた時、動く処理をゆっくりするときは、transition: 0.3sで0.3秒遅くなる。https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes を見ると良いかもしれないけど、@keyframesを使って、アニメーションの処理をする。

パス

パスは、絶対パス、相対パス、ルート相対パスがある。同じサイトであれば、だいたい相対パスかルート相対パスを使う。絶対パスはhttps://〜始まる。ルート相対パスは、〜.com/img/xxxのimgから始まる。htmlであれば、〜.com/aaa/bbb.htmlが/aaa/bbb.htmlになる。相対パスはhttps://webliker.info/78726/にも記載してあるけど、../のような表記で、../で一個上の階層に戻る感じ。

フォント

フォントはブラウザによって変わる。androidは明朝体指定しても表示されないとか。そういう時は、webフォントを使う。拡張子はwoffが一番良いと思う。あとはgoogleフォントを使うこともある。https://saruwakakun.com/html-css/basic/google-fonts ただWEBフォント使うと重くなって、表示が遅くなってしまう。

vw

スマホ版を作成するときは、vwをよく使う。vwは画面幅のこと。ちなみにvhは高さのことだけど、あまり使わない。フォントサイズの指定もvwを使う。例えばデザインが750で作ってあったら、デザインツールのフォントサイズ÷750 縦の余白や横のサイズを決めるときも使う。

ツール

ITの進化のおかげで、仕事が早くなりつつあるって実感してる(笑) これとかhttps://www.diffchecker.com/ 差異を調べてくれるツール。最近めっちゃ役にたった。便利なツールがいっぱい。google拡張機能とか。

とりあえず以上。

コメント