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

はじめに

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

構成

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

HTML

ファイル名

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

テンプレ構成

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ページの説明文" />
    <title>ページタイトル</title>
    <link rel="icon" href="img/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
  </head>
  <body>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ページタイトル</title>

</head>

<body>

</body>

</html>

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

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

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

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

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

JavaScript

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

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

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

ファイル名

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

コーディング規約

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

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

HTMLのクラス名

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

<div class="js-hoge">
</div>

1 2	<div class="js-hoge"> </div>

$('.js-hoge').text('jsでテキストを変えたよ');

1	$('.js-hoge').text('jsでテキストを変えたよ');

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

<!--本家？？-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<!--google-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!--Microsoft-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>

<!--CDNJS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<!--jsDelivr-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

公式サイト

CSS

ファイル名

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

HTMLのクラス名

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

SCSS書き方

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

CSS 基本

/*要素名*/
h1 {
  color: blue;
}

/*クラス指定*/
.piyo {
  color: blue;
}

/*ID指定*/
#hoge {
  color: blue;
}

/*子孫要素指定（div内のp指定）*/
div p {
  color: blue;
}

/*子要素指定（div内のp指定、孫要素には適応されない）*/
div > p {
  color: blue;
}

/*直後の要素指定（h1直後のp指定）*/
h1 + p {
  color: blue;
}

/*要素名*/

h1 {

color: blue;

}

/*クラス指定*/

.piyo {

color: blue;

}

/*ID指定*/

#hoge {

color: blue;

}

/*子孫要素指定（div内のp指定）*/

div p {

color: blue;

}

/*子要素指定（div内のp指定、孫要素には適応されない）*/

div > p {

color: blue;

}

/*直後の要素指定（h1直後のp指定）*/

h1 + p {

color: blue;

}

SCSS 基本

div {
  background: red;
  p { /* div pになる */
    color: white;
  }
}

div {
  width: 300px;
  &.hoge { /* div.hogeになる */
    width: 150px;
  }
}

/*変数*/
$main_color: red; 
div {
  color: $main_color;
}

/*map（!defaultは同名の変数が未定義の場合のみ値を反映するやつ）*/
$breakpoints: (
  'sm': 'screen and (max-width: 320px)',
  'tab': 'screen and (max-width: 599px)',
  'pc': 'screen and (max-width: 959px)',
) !default;

/* mixin :sp のようにデフォルト引数を設定できる*/
@mixin  max-screen($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/* mixin呼び出し*/
.hoge {
  width: 70%;
  @include mq(tab) {
    width: 80%;
  }
  @include mq() {
    width: 100%;
  }
}

div {

background: red;

p { /* div pになる */

color: white;

}

div {

width: 300px;

&.hoge { /* div.hogeになる */

width: 150px;

}

/*変数*/

$main_color: red;

div {

color: $main_color;

}

/*map（!defaultは同名の変数が未定義の場合のみ値を反映するやつ）*/

$breakpoints: (

'sm': 'screen and (max-width: 320px)',

'tab': 'screen and (max-width: 599px)',

'pc': 'screen and (max-width: 959px)',

) !default;

/* mixin :sp のようにデフォルト引数を設定できる*/

@mixin max-screen($breakpoint: sp) {

@media #{map-get($breakpoints, $breakpoint)} {

@content;

}

/* mixin呼び出し*/

.hoge {

width: 70%;

@include mq(tab) {

width: 80%;

}

@include mq() {

width: 100%;

}

参考

SCSSテンプレ

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

_reset.scss
_variable.scss
_base.scss

_reset.scss

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

_variable.scss

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

/// カラー（ライト・ダークモードでそれぞれベース・メイン・アクセントを定義）
$color-light_base: #fff;
$color-light_main: #333;
$color-light_accent: #EF8303;

$color-dark_base: #333;
$color-dark_main: #1e1e1e;
$color-dark_accent: #EF8303;

// ライト・ダークモードの文字色定義
$color-light-text_default: #4c4c4c;
$color-dark-text_default: #f6f5f5;

/// 余白（とりあえず８の倍数で定義）
$space_s: 8px;
$space_m: 16px;
$space_l: 24px;
$space_xl: 32px;

/*====================
スマホ 320〜559px
タブレット 560〜959px
PC 960px以上
====================*/
$breakpoints: (
  'sp': 'screen and (max-width: 320px)',
  'tab': 'screen and (max-width: 559px)',
  'pc': 'screen and (max-width: 959px)',
) !default;

$color-mode: (
  'light': '(prefers-color-scheme: light)',
  'dark': '(prefers-color-scheme: dark)',
) !default;

// ==============================
// mixin
// ==============================
@mixin max-screen($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

@mixin color($mode: dark) {
  @media #{map-get($color-mode, $mode)} {
    @content;
  }
}

/// カラー（ライト・ダークモードでそれぞれベース・メイン・アクセントを定義）

$color-light_base: #fff;

$color-light_main: #333;

$color-light_accent: #EF8303;

$color-dark_base: #333;

$color-dark_main: #1e1e1e;

$color-dark_accent: #EF8303;

// ライト・ダークモードの文字色定義

$color-light-text_default: #4c4c4c;

$color-dark-text_default: #f6f5f5;

/// 余白（とりあえず８の倍数で定義）

$space_s: 8px;

$space_m: 16px;

$space_l: 24px;

$space_xl: 32px;

/*====================

スマホ 320〜559px

タブレット 560〜959px

PC 960px以上

====================*/

$breakpoints: (

'sp': 'screen and (max-width: 320px)',

'tab': 'screen and (max-width: 559px)',

'pc': 'screen and (max-width: 959px)',

) !default;

$color-mode: (

'light': '(prefers-color-scheme: light)',

'dark': '(prefers-color-scheme: dark)',

) !default;

// ==============================

// mixin

// ==============================

@mixin max-screen($breakpoint: sp) {

@media #{map-get($breakpoints, $breakpoint)} {

@content;

}

@mixin color($mode: dark) {

@media #{map-get($color-mode, $mode)} {

@content;

}

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

_base.scss

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

@import "variables";
@import "reset";

// 以下全てのページで適応したい CSS
body {
  background-color: $color-light_base;
  color: $color-light-text_default;
  @include color() {
    background-color: $color-dark_base;
    color: $color-dark-text_default;
  }
}

@import "variables";

@import "reset";

// 以下全てのページで適応したい CSS

body {

background-color: $color-light_base;

color: $color-light-text_default;

@include color() {

background-color: $color-dark_base;

color: $color-dark-text_default;

}

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

@import "base";

// 以下対象ページで適応したい CSS

@import "base";

// 以下対象ページで適応したい CSS

CSSフレームワーク

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

公開方法

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

XFREEで公開する

１つ目は 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

参考

Amazon.co.jp