ボタンのホバーエフェクトを試行錯誤していたところ、なかなかいい表現かもと思ったので、書きました。

アイコン付きのボタンをホバーすると、アイコンが変わる、というものです。

デモの様子

実際のデモはこちら

使ったアイコン

• Material Icons

CodePen 用に CDN 経由で使えるものを選択しただけなので、もちろん他でも です。

ポイント

• ボタン要素の ::after にアイコンを指定

a.button-with-icons::after {
  font-family: 'Material Icons';
  content: '\e038';
  /* 中略 */
}

• ボタン要素の :hover の ::after にもアイコンを指定

a.button-with-icons:hover::after {
  font-family: 'Material Icons';
  content: '\e87d';
}

デモで書いたコードは こちら です。

今回、jQueryによるタブの切り替えの方法について、備忘録的に記載していきます。

HTML

まずは、表示させるHTML部分のコードです。
タブ部分のul要素と表示するコンテンツ部分のul要素の2つを作成します。

qiita.html

<ul class="tabs">
    <li class="active">タブ１</li>
    <li>タブ２</li>
    <li>タブ３</li>
    <li>タブ４</li>
</ul>
<ul class="contents">
    <li class="active">サッカー</li>
    <li>バスケ</li>
    <li>野球</li>
    <li>バレー</li>
</ul>

CSS

次はCSSの記述です。
タブ部はactiveクラスが付与されているタブのみ色を変化させます。
またコンテンツ部は非表示にし、activeクラスが付与されている要素のみを表示する仕様です。

qiita.css

.tabs{overflow:hidden;}
.tabs li{background:#ccc; padding:5px 25px; float:left; margin-right:1px;}
.tabs li.active{background:#eee;}
.contents li{display:none;}
.contents .active {padding:20px; display:block;}
ul { list-style: none;}

jQuery

最後にjQueryの記述です。
クリックされたタブに対して、タブ部とコンテンツ部の両方にactiveを付与します。

qiita.js

$('.tab li').click(function() {
    var index = $('.tabs li').index(this);
    $('.contents li').removeClass('active');
    $('.contents li').eq(index).addClass('active');
    $('.tabs li').removeClass('active');
    $(this).addClass('active')
});

今回は、index()メソッドを用いて何番目のタブがクリックされたかを判別し、
その番号と同じ順番にあるコンテンツ部の要素にactiveを付与する処理にしました。

Sass勉強中の為、出来ることを備忘録がてら纏めて書いていきます。

mixinミックスイン

scssではmixin(ミックスイン)機能を使用して、cssのスタイルを定義しておいて別の場所でそのスタイルを使いまわすことが出来ます。「継承」と似ていますが若干の違いがあります。

mixinの基本的な使用方法の例です。
「mixin」で定義し「include」で使用します。

.scss

@mixin hoge{
   border:1px solid #ccc;
   padding:15px;
}
.huga{
   @include hoge;
   background-color: #eee;
}

cssに変換するとこの様になります。

変換後の.css

.huga {
   border:1px solid #ccc;
   padding:15px;
   background-color: #eee;
}

mixinで定義したスタイルも.hugaに反映されています。
ただ、これだと継承とあまり変わりませんね。。

引数を使用したmixin

継承との違いとして、mixin機能は引数を使用することが出来ます！
引数を変数にすることでより便利にmixin機能を使用することが出来ます。

.scss

@mixin hoge($color){
   border:1px solid $color;
   padding:15px;
}
.huga{
   @include hoge(#ccc);
   background-color: #eee;
}

cssに変換するとこの様になります。

変換後の.css

.huga {
   border:1px solid #ccc;
   padding:15px;
   background-color: #eee;
}

また、引数に初期値を指定しておくことが出来ます。

.scss

@mixin hoge($color:#ccc){
   border:1px solid $color;
   padding:15px;
}
.huga{
   @include hoge();
   background-color: #eee;
}

cssに変換するとこの様になります。

変換後の.css

.huga {
   border:1px solid #ccc;
   padding:15px;
   background-color: #eee;
}

初期値の上書きも可能です。
includeの際 hoge(#fff)と指定してcssに変換すると、

変換後の.css

.huga {
   border:1px solid #fff;
   padding:15px;
   background-color: #eee;
}

渡した引数「#fff」で初期値の「#ccc」が上書きされました。
基本のスタイルを決めておき、バリエーションで変化させる際に重宝します！

リンク

Sassで出来ること【vol.1】Sassとは？
Sassで出来ること【vol.2】入れ子(ネスト)・変数
Sassで出来ること【vol.3】関数
Sassで出来ること【vol.4】継承
Sassで出来ること【vol.5】mixin(ミックスイン)

事象

こんな現象になった場合

原因

chrome64から、()や,にはアンダーラインが重ならない仕様になった

対応

CSS以下のプロパティを指定すれば解決

+  text-decoration-skip-ink: none;

参考

• Chrome 64 から下線がおかしい
• Chrome 64 からリンクの下線が途切れる：text-decoration-skip-ink プロパティについて - Corredor

親要素内で、子要素の位置をCSSでデザインする

親要素にposition:relativeで基準位置を作る
子要素にposition:absoluteで基準位置からの絶対値で位置を指定する
そしてtopbottomleftrightで具体的な位置を指定する。

↓は黄色い親要素のボックスの右上に文字を配置

HTML

<div class="sotowaku">
  <div class="moji">文字</div>
</div>

CSS

.sotowaku{
  width:300px;
  height:300px;
  background:yellow;
  position:relative;
}

.moji{
  position:absolute;
  top:0;
  right:0;
}

モチベーション

Electronアプリの起動が遅いときの処方箋です。Electronアプリの起動時間が遅く、次のような挙動でした。

• Electronアプリを起動すると、ウィンドウは直ぐに表示される。
• しかし、ウィンドウ内部のHTMLの表示が遅い。
• ElectronのイベントでいえばwebContents.once('did-finish-load, ...')の発火が遅い。

HTMLのロードが遅い原因として、Google fontを使っていたことが原因でした。しかし、あくまで体感ですが、Google fontはElectronであってもキャッシュされているような挙動をします。

ElectronでのWebフォントのキャッシュについて

で結局ボトルネックはどこで、どう解決するかという話です。

Google Fontの読み込み

Googleフォントを利用する場合、私の場合はCSS上で読み込みを行っていたので、次のように書いていました。

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

body{
font-family: "Noto Serif JP",serif;
}

その他にはlinkタグでHTMLのヘッダーに記述する方法もありますね。

しかしどちらにせよ、最初に読み込むのはfontではなく、 https://fonts.googleapis.com/css2 というファイル (以下css2ファイル)ということです。

css2ファイルの中身は、次のようになっています。

/* [0] */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif JP'), local('NotoSerifJP-Regular'), url(https://fonts.gstatic.com/s/notoserifjp/v7/xn7mYHs72GKoTvER4Gn3b5eMXNvMckQlPa61uNKcCqOfbtLXoH3502Rk.0.woff2) format('woff2');
  unicode-range: U+25e56, U+25e62, U+25e65, U+25ec2, U+25ed8, U+25ee8, U+25f23, U+25f5c, U+25fd4,
 ...(略)...,
 U+2f9d0, U+2f9de-2f9df, U+2f9f4;
}
/* [1] */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif JP'), local('NotoSerifJP-Regular'), url(https://fonts.gstatic.com/s/notoserifjp/v7/xn7mYHs72GKoTvER4Gn3b5eMXNvMckQlPa61uNKcCqOfbtLXoH3502Rk.1.woff2) format('woff2');
  unicode-range: U+1f230-1f23a, U+1f240-1f248, U+1f250-1f251, U+2000b, U+20089-2008a, U+200a2, U+200a4, U+200b0, U+200f5, U+20158, U+201a2, U+20213, U+2032b, U+20371, U+20381,
 ...(略)...,
 U+25c4b, U+25c64, U+25da1, U+25e2e;
}
/* [2] */
@font-face {
...(略)...

このようにcss2ファイルの中身は、@font-faceの束になっています。

つまり、Google fontの読み込みは

1. css2ファイルの読み込み
2. フォントデータの読み込み

の順で二段階のファイル読み込みが発生します。そして、後者はキャッシュされますが、前者はキャッシュされていないようです（あくまで体感です）。

つまり、ボトルネックはcss2ファイルの読み込み速度でした。

処方箋

さて、あらためて、フォントデータの方はキャッシュされるとして、css2の読み込みを改善させる必要があります。どうするかといえば、css2ファイルをローカルに持つということです。

まず、googleフォントの@importやlinkに記述するURLを適当なブラウザのURL欄に入力してアクセスします。

するとcss2の中身がテキストで表示されます。この内容を全て選択してコピーし、適当なテキストエディタで張り付けしてローカルに保存しましょう。ここでは仮に保存名はimp_NotoSerifJP.css2としておきます。

次に、HTML上で読み込むCSSの中身を、最初の例から次のように変更します

/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');
*/

@import url('./imp_NotoSerifJP.css2');

body{
font-family: "Noto Serif JP",serif;
}

こうすることで、ローカルからcss2ファイルが読み込まれるようになり、読み込み速度が改善します。

まとめ

Google fontの読み込みではcss2ファイルとfontデータの二段階になっており、後者はキャッシュが効きますが、前者が速度的なボトルネックになることがあります。前者のcss2ファイルをローカルに持たせることで、Electronアプリの起動速度を改善できました。

私の作っているアプリでは、1秒以上かかっていた起動時間がかなり改善されました。

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【CSS】セレクタチートシート | コレワカ

CSSとは

Cascading Style Sheetsの略で、
ウェブページのスタイルを指定するためのマークアップ言語のこと。
HTMLなどで書かれた文書を色やフォントやレイアウトなどを変えることが可能。
CSSリファレンス | MDN

CSSセレクタとは

CSSを適用させたいHTML要素を指定するためのもの

基本の書き方

CSS

セレクタ{
  プロパティ: 値;
}

基本のセレクタ

ユニバーサルセレクタ (全称セレクタ) で指定

全ての要素にスタイルを適用

See the Pen
CSS_* by engineerhikaru (@engineerhikaru)
on CodePen.

タグ名で指定

指定したタグの要素にスタイルを適用

See the Pen
CSS_tag by engineerhikaru (@engineerhikaru)
on CodePen.

class名で指定

指定したclass名の要素にスタイルを適用

See the Pen
CSS_class by engineerhikaru (@engineerhikaru)
on CodePen.

id名で指定

指定したid名の要素にスタイルを適用

See the Pen
CSS_id by engineerhikaru (@engineerhikaru)
on CodePen.

複数要素の指定

指定した複数の要素にスタイルを適用

See the Pen
CSS_multiple by engineerhikaru (@engineerhikaru)
on CodePen.

子孫要素

指定したある要素の階層下の要素にスタイルを適用

See the Pen
CSS_progeny by engineerhikaru (@engineerhikaru)
on CodePen.

ある要素の直下の子要素

指定したある要素の直下の子要素にスタイルを適用

See the Pen
CSS_below by engineerhikaru (@engineerhikaru)
on CodePen.

ある要素の兄弟要素

指定したある要素の兄弟要素にスタイルを適用

See the Pen
CSS_brother by engineerhikaru (@engineerhikaru)
on CodePen.

ある要素の隣の要素

指定したある要素の隣の要素にスタイルを適用

See the Pen
CSS_next by engineerhikaru (@engineerhikaru)
on CodePen.

属性セレクタ

属性で指定

指定した属性に一致する要素にスタイルを適用

See the Pen
CSS_attribute by engineerhikaru (@engineerhikaru)
on CodePen.

属性で指定(完全一致)

指定した属性と属性名に完全一致する要素にスタイルを適用

See the Pen
CSS_attribute-perfect by engineerhikaru (@engineerhikaru)
on CodePen.

属性で指定(完全一致+α)

指定した属性と属性名に完全一致する要素(他に属性名があってもOK)にスタイルを適用

See the Pen
CSS_attribute-perfectalpha by engineerhikaru (@engineerhikaru)
on CodePen.

属性で指定(前方一致)

指定した属性と属性名に前方一致する要素にスタイルを適用

See the Pen
CSS_attribute-forward by engineerhikaru (@engineerhikaru)
on CodePen.

属性で指定(後方一致)

指定した属性と属性名に後方一致する要素にスタイルを適用

See the Pen
CSS_attribute-backward by engineerhikaru (@engineerhikaru)
on CodePen.

属性で指定(部分一致)

指定した属性と属性名に部分一致する要素にスタイルを適用

See the Pen
CSS_attribute-part by engineerhikaru (@engineerhikaru)
on CodePen.

擬似要素

要素の前・後を指定

before：指定したある要素の前にスタイルを適用(要素もどきを作成)
after：指定したある要素の後ろにスタイルを適用(要素もどきを作成)

See the Pen
CSS_before-after by engineerhikaru (@engineerhikaru)
on CodePen.

1行目を指定

指定したある要素の文字の1行目にスタイルを適用

See the Pen
CSS_first-line by engineerhikaru (@engineerhikaru)
on CodePen.

1文字目を指定

指定したある要素の文字の1文字目にスタイルを適用

See the Pen
CSS_first-letter by engineerhikaru (@engineerhikaru)
on CodePen.

擬似クラス

最初の子要素

最初の子要素にスタイルを適用

See the Pen
CSS_first-of-type by engineerhikaru (@engineerhikaru)
on CodePen.

最後の子要素

最後の子要素にスタイルを適用

See the Pen
CSS_last-of-type by engineerhikaru (@engineerhikaru)
on CodePen.

○番目の子要素

○番目の子要素にスタイルを適用

See the Pen
CSS_nth-of-type by engineerhikaru (@engineerhikaru)
on CodePen.

後ろから○番目の子要素

後ろから○番目の子要素にスタイルを適用

See the Pen
CSS_nth-last-of-type by engineerhikaru (@engineerhikaru)
on CodePen.

奇数の子要素

奇数の子要素にスタイルを適用

See the Pen
CSS_nth-of-type-odd by engineerhikaru (@engineerhikaru)
on CodePen.

偶数の子要素

偶数の子要素にスタイルを適用

See the Pen
CSS_nth-of-type-even by engineerhikaru (@engineerhikaru)
on CodePen.

n倍数の子要素

n倍数の子要素にスタイルを適用

See the Pen
CSS_nth-of-type-n by engineerhikaru (@engineerhikaru)
on CodePen.

ただ一つの場合の子要素

ただ一つの場合の子要素にスタイルを適用

See the Pen
CSS_only-child by engineerhikaru (@engineerhikaru)
on CodePen.

子要素が空の親要素

子要素が空の親要素にスタイルを適用

See the Pen
CSS_empty by engineerhikaru (@engineerhikaru)
on CodePen.

ページ内リンク先

ページ内リンク先の要素に対してクリック後のスタイルを適用

See the Pen
CSS_target by engineerhikaru (@engineerhikaru)
on CodePen.

ルート要素

ルート要素(htmlタグ)にスタイルを適用

See the Pen
CSS_root by engineerhikaru (@engineerhikaru)
on CodePen.

ダイナミック擬似クラス

ホバー状態のリンク

ホバー状態のリンクにスタイルを適用

See the Pen
CSS_hover by engineerhikaru (@engineerhikaru)
on CodePen.

クリック状態のリンク

クリック状態のリンクにスタイルを適用

See the Pen
CSS_active by engineerhikaru (@engineerhikaru)
on CodePen.

フォーカス状態のリンク

フォーカス状態のリンクにスタイルを適用
※フォーカスとは、キーボードのTabキーでの選択状態のこと

See the Pen
CSS_focus by engineerhikaru (@engineerhikaru)
on CodePen.

リンク擬似クラス

未訪問のリンク

未訪問のリンクにスタイルを適用

See the Pen
CSS_link by engineerhikaru (@engineerhikaru)
on CodePen.

訪問済のリンク

訪問済のリンクにスタイルを適用

See the Pen
CSS_visited by engineerhikaru (@engineerhikaru)
on CodePen.

UI要素状態擬似クラス

要素が有効な時

要素が有効な時にスタイルを適用

See the Pen
CSS_enabled by engineerhikaru (@engineerhikaru)
on CodePen.

要素が無効な時

要素が無効な時にスタイルを適用

See the Pen
CSS_disabled by engineerhikaru (@engineerhikaru)
on CodePen.

要素がチェック状態の時

要素がチェック状態の時にスタイルを適用

See the Pen
CSS_checked by engineerhikaru (@engineerhikaru)
on CodePen.

否定擬似クラス

○以外の要素

○以外の要素にスタイルを適用

See the Pen
CSS_not by engineerhikaru (@engineerhikaru)
on CodePen.

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【CSS】セレクタチートシート | コレワカ

課題

radioボタンを使ったinputの動作制御がIEだけうまく行かないのを修正する

原因

IEはinput[type=radio]のchangeイベントがとれない (っぽい)

ソース

$(function(){
    // $('input[name="' + hoge + '"]') = radioボタン
    $('input[name="' + hoge + '"]').change(function(){
        concole.log('clicked'); // IE11で出力されない
    });
});

解決

IEはinput[type=radio]のchangeイベントがとれないとわかったので、clickで代用してやればよい。
今回はあえて、IEは'click'、そのほかは'change'と三項演算子で分岐させることにした。

var ua = window.navigator.userAgent.toLowerCase();
var isIE = ua.indexOf('msie') >= 0;
$(function(){
    // $('input[name="' + hoge + '"]') = radioボタン
    $('input[name="' + hoge + '"]').change(function(){
        concole.log('clicked'); // 出力されない
    });
});

こう書けばIEだけは'click'になり、他のブラウザは'change'がイベントが指定される。

........でも、分岐させなくてもいいかな～とも少し思ったり^^;

参考

https://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie

Webページを作っていると初期設定として何度も使用するコードがでてきます
毎回つくっているとめんどうなのでテンプレートとして用意してコピペでコーディングを進められるようにすると楽です

コードを追加する場所

Emmetでも基盤はできますが、勉強していくと自分用にカスタマイズしておいたほうがスムーズです

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- head情報-->
</head>
<body>

  <!-- script -->
</body>
</html>

スマホ対応用のビュー設定

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

今や必須のスマホ対応
記述は毎回一緒なのでとくにいじることはないでしょう
Edge用の記述も一緒にいれておきましょう

ページディスクリプション(ページの説明)

  <meta name="description" content"ページの内容を表す文章">

検索エンジンのクロールから除外する

絶対に除いてもらえるものではないので注意です

  <meta name="robots" content="noindex,nofollow">

OGPタグ

ツイッターやファイスブックでリンクされたときの表示の設定

  <meta name="twitter:card" content="summary_large_image" /> 
  <meta name="twitter:site" content="ユーザー名" />
  <meta property="og:title" content="ページタイトル" />
  <meta property="og:type" content="website">
  <meta property="og:url" content="絶対パス" />
  <meta property="og:image" content="画像のURL" />
  <meta property="og:site_name" content="サイト名" />
  <meta property="og:description" content="記事抜粋" />

content内をページに合わせて入力

summaryかsummary_large_imageを選べます

個人的にはlargeが好みです

og:typeはトップページだとwebsiteかblog,下層ページはarticle

htmlにもprefixを追加します

<html lang="ja" prefix="og: http://ogp.me/ns#">

link系も追加

よく使うものを設定しておきましょう

  <link rel="stylesheet" href="">

私は

• ファビコン
• Bootstrap
• fontawesome
• google font

を初期設定で追加しています

body前に追加するscriptタグ設定

<script src="./js/config/jquery-3.3.1.min.js"></script>
<script src="./js/config/popper.min.js"></script>
<script src="./js/config/popper-utils.min.js"></script>
<script src="./bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>

jquery, Bootstrap, 基本的なJavascriptファイルを読み込んでいます

よく使うライブラリがあれば設定しておきましょう

jqueryやBootstrapはファイルを設定しています
あまりないと思いますがバージョンが変わって不具合でるとめんどくさいのでCDNは使用しません

好みですね

フォルダ構成

パスが変わってしまうのでフォルダ構成もきめておくと良いです

私は

• bootstrap
• script
  • config
• css
• public
  • ページ1.html
  • ページ2.html
• index.html

としています
新しいスキルなどで構成は変わると思うので参考程度に

まとめ

記述はほとんどかわらないのに覚えるのはけっこう時間とられるし、めんどう

ぜひ自分のテンプレート作ってみましょう
記述の仕方も忘れがちなので、自分なりのコメントもいれておくと便利かも

flexbox▼

親要素にflexboxを付与することで、子要素を横並びにします。

floatプロパティと機能は同じですが、floatの副作用である親要素の縮小が無いため、
floatプロパティと比較すると非常に使い勝手は良いです。

justify-contentプロパティ▼

justify-content: 〇〇;といった形で、display: flex;に併記します。
すると横並び方向の詳細を決めることができます。

justify-content: center; ▶︎ 要素を中央寄せ
justify-content: start; ▶︎ 要素を左寄せ
justify-content: flex-end; ▶︎ 要素を右寄せ
justify-content: space-between; ▶︎ 要素の両端が左右に寄り、等間隔
justify-content: space-around; ▶︎ 要素が左右に寄り、等間隔。（両端の余白と要素間の余白が１：２）

まとめ▼

flexboxにはまだまだ種類があり、奥が深い為初学者の方は整理しづらいと思いいますが、
積極的に使用することを意識すれば基礎部分には慣れてきますのでどんどん活用しましょう。

次回以降の更新でも紹介していきます！

100日チャレンジの326日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
326日目は、

おはようございます
326日目 2h
・架空LP模写13日目1h（@ririru_123）
・架空LP模写：お問い合わせ部分を作成
・ポートフォリオ作成1h：cssアニメーション導入#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) May 25, 2020

webサイト上でよく見かけるボタンを３つにまとめてみた。

私的よく見かけるボタンエフェクト3種

・通常のhoverボタン
　一番よく使われているであろうhoverを使ったボタン
・hoverスライドボタン
　hoverすると背景色がスライドしてきて色が変わるボタン
・activeを使った押せるボタン
　ポチッと押せるボタン

Code Pen

See the Pen buttons by taka (@gb-sweep) on CodePen.

まとめ

正直単なるhoverだけのボタンがダントツで一番使われているが、他の２つも見かけるので覚えておいて損は無いし、何よりものすごく簡単に実装できてなんか凝ってる感が出てよい

TL;DR

運営しているサービス、fRatのランディングページをGitLab Pagesを使用して公開していますので、その方法のご紹介です。
GitLab Pagesを使えば、自動更新付き無料SSLが使えるし、無料でWebサイトを公開できます。
ポートフォリオとしてのゴリゴリのHTML/JavaScriptを使って、自由度の高いWebページを配置することもできます。

はじめに

組織や自己のブランディング、ポートフォリオ公開のために、Webサイトを公開している方は多いのではないでしょうか？
もしくは、この状況下でWebサイトを公開して、オンラインでの活動を開始しようとしている方もいらっしゃると思います。
そんなとき、自分でサーバを用意してWordpressなどを使ってサイト公開をするのも一つの手ですが、無料で、かつ自由度の高いWebサイトを公開する手段もあります。
本ドキュメントでは、無料でWebサイトを公開する方法をお伝えします。

GitLab とGitLab Pages

GitLabは、ファイルをバージョン管理してくれるWebサイトです。（もっといろいろなこともしてくれます。）
GitLabの機能の一つに、アップロードしたファイルをWebサイトとして公開してくれる、というものがあります。
本ドキュメントでは、この機能を使って、Webサイトを構築する方法をご説明します。

ページをアップロード、公開する。

GitLabでアカウントを作成、ログインしてください。

ヘッダーから「➕」マークを押して、New projectを選択します。
Project nameを入力して、Create Projectボタンを押します。
出来上がったページから、

「Set up CI/CD」を押します。
表示された入力欄で、

以下のように入力します。

image: alpine

pages:
  script:
  - ls
  artifacts:
    paths:
    - public

入力したら、「Commit changes」を押します。

続けて、公開ページを作っていきます。
左メニューのRepository→Filesを押して、

タイトルちょっと下の「+」から「New directory」を選択します。
表示されるダイアログの「Directory name」にpublicと入力して、「Create directory」を押します。
続けて「＋」から New Fileを選択しFile name にindex.htmlと入力します。
あとは入力欄にHTML、JavaScript、CSSで好きなように書いていきます。もちろんJavaScriptは単独でファイルを作成していただいても結構です。
私は、Tree.jsを使用したかんたんなサンプルを作ってみました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<canvas></canvas>
<script>
    const width = document.body.offsetWidth;
    const height = document.body.offsetHeight;
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('canvas')
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(45, width / height);
    camera.position.set(0, 0, 5);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshNormalMaterial();
    const box = new THREE.Mesh(geometry, material);
    scene.add(box);

    function tick() {
        box.rotation.y += 0.01;
        box.rotation.z += 0.013;
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
    }
    tick();
</script>
<style>
    body,
    canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
</style>

作れたら、「Commit changes」を押します。

続きまして、Webサイトとして作ったindex.htmlを公開します。

左のメニューの「Settings」→「General」から「Visibility, project features, permissions」→「Pages」で「Everyone」を指定して、「Save changes」ボタンを押してください。

これでサイトが公開されます。
サイトのURLは左メニュー「Settings」→「Pages」の「Your pages are served under:」から確認できます。

もし、独自ドメインで運用したい場合は、同じく「Settings」→「Pages」の「New Domain」から設定できます。独自ドメインにした場合でも、Let's EncryptによるSSL証明書の発行および自動更新機能がついているのでとても便利です。

自分でサイト運用するよりも楽で安全ですよ？

自分で用意したサーバでWordPressなどを運用している方は、サーバを正しい状態に設定したり、セキュリティーパッチを当てたりと、安全な状態を保つのは大変です。Webページを公開したいだけであれば、本ページのやり方で十分です。mkdocsやHexoなどを使って、CMSでページを作ることもできます。
また、この状況下で業務をオンライン化したい方。まずはWebページで活動を公開するのに、本ページのやり方でかんたんにトライしてみてはいかがでしょう？

fRatでは、この方法でランディングページを作成するとともに、mkdocsによるHTML生成を使って、マニュアルを公開しています。

GitLab PagesでかんたんWebサイト公開、ぜひ、お試しください。
お困りの点がありましたら、@bottegauniへどうぞ。