Web入門〜たまに趣味でWebページ作りたいなぁ〜

botman_orange Web
スポンサーリンク

はじめに

たまに趣味で Web ページ作りたいなぁって思うことがあるんですが毎回どうやって設定したり書いたりするんやっけ?となるので基本的なことについてのメモです。業務で1回だけ HTML さわったことありますが、JS、CSS は \<script> と \<style> で HTML に書かれてて全画面 \<table> で作られてるやつだった。(知識ないからこれが普通なんだと当時は思ってた。。。)

構成

gulp + webpack + babelをつかってみたこの記事にあるような構成でやってます。Sass は必須で webpack, babel はいまいちよくわかってないです。。。(まあ突っ込んどけばいいだろう)

HTML

タグ

とりあえずタグは全部小文字でかけばいいと思う(XHTML がどうたら)

ファイル名

ファイル名は小文字で単語の区切りは -(ハイフン)にしとけばいいと思います。
参考:URLに利用するのは-(ハイフン)と_(アンダースコア)とどちらがSEO的により良いのか?

テンプレ構成

最低限必要なのは下記の構成??

これで favicon の設定も大体いけてるはず。favicon 生成は下記サイトでやった。(色々生成されるけど2つ置いとけば大体いけるはず。。。)

様々なファビコンを一括生成。favicon generator

X-UA-Compatible に関しては下記参考

IE対策の「X-UA-Compatible:IE=edge」は必要か?

HTML に関しては下記で色々みるといいはず

JavaScript

タグ

script タグをどこに書くのか?についてはとりあえず body タグの終端に書いとけばいいと思います。
参考:teratail:scriptタグはなんで通常bodyに書くのか。

scriptタグの記述場所は別にどこでも構わないのですが、bodyタグの終端に記述する理由は以下のような理由があるのではないかと思います。

・javascriptファイルを読み込んでいる間は、HTMLファイルを読み込まないため、ページのレンダリングを行わせてからjavascriptファイルを読み込むことで表示速度を早くする。
・CSSはheadタグ中に、javascriptはbodyタグの下にまとめて記述することでわかりやすくなる。

ただし、HTMLが解析される前に実行されるべきjavascriptファイルなどはheadタグ内に記述するべきだと思います。

ファイル名

ファイル名は HTML と同じで小文字で単語の区切りは -(ハイフン)にしとけばいいと思います 。

コーディング規約

変数名もメソッド名もパスカルケース。その他細かいのは下記参考

参考:Javascriptのコーディングスタイルを復習 - Google編

HTMLのクラス名

jquery で対象クラスの要素書き換えやクラス変更をする場合 JavaScript で操作する要素ですよということをわかりやすくするために対象要素のクラス名は js- プレフィックスを付けとくとわかりやすいと思います。(実際の現場でやってるかはしりません)

jqueryをCDNで利用する場合は色々あるらしい(しらんかった。。。)

公式サイト

CSS

タグ

link タグは head タグ内に書けばいいはず

ファイル名

ファイル名は HTML と同じで小文字で単語の区切りは -(ハイフン)にしとけばいいと思います 。

HTMLのクラス名

この辺はOOCSS、BEM、SMACSS、FLOCSS とか色々あるみたいですが BEM がわかりやすいので BEM でいきたいと思います。
が、FLOCSS が全部のいいとこ取りみたいなやつで提唱者も日本人で日本語でルールが書いてあるので FLOCSS でもいいかもしれないです。

SCSS書き方

たまにしか書かないので基本構文もよく忘れるので基本構文について書いときます。

CSS 基本

SCSS 基本

参考

SCSSテンプレ

scss テンプレとして下記の3つを用意します

  • _reset.scss
  • _variable.scss
  • _base.scss

_reset.scss

_reset.scss には destyle.css など適当なリセット CSS を貼り付けます。

_variable.scss

_variable.scss には下記のように余白や基本的な色、ブレークポイントなどを定義します。

参考:【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版]

_base.scss

_base.scss には全てのページで適応したい CSS などを定義します。

ページごとの index.scss などに _base.scss をインポートして使います。

CSSフレームワーク

がっつり CSS 書くのがめんどくさい場合は下記のような CSS フレームワークを使うとサクッとできます。

その他は下記参考
2020年版:おすすめの人気CSSフレームワークと特徴の総まとめ

公開方法

作ったら後は公開するだけ!とりあえず無料でできる方法として2つ書いときます。

XFREEで公開する

1つ目は XFREE で公開する方法です。ここで無料登録すると HTML サーバーと PHP サーバーが使えます。できたものをここにアップすれば公開できます!!

ふつうにアップすると一個ずつしかできなかった気がしますが FileZilla とか FTP クライアントを利用するとアップが楽です。

XFREE は無料で公開できますが https ではなく http になります。。。まあ遊びで使うには十分だと思います。(PHP サーバー利用の場合はモバイル版で広告表示があります。HTML サーバーの場合はモバイル版でも広告はでません)

前公開したのがこれ

はむはむへんかん

GitHub Pagesで公開する

使い方は下記記事参考にどうぞ
GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた

XFREE と違い PHP は使えませんが https になるしソース管理もできちゃいます!(たしか同じリポジトリにdocsフォルダを作れば公開できたはず。。。)

前公開したのがこれ

でぃ〜えぬえ〜へんかん

おわりに

たまに Web ページ作りたいなぁって思うときがあるのでここみたらさっと作れる感じになってればいいなぁ。モダンな開発はよくわからない。。。TypeScript とか Vue.js, Angular, React とか使ってみたいなぁという気持ちもなくはない。

なんか違うところあったらお気軽にご指摘くださいmm

参考

コメント

タイトルとURLをコピーしました