「CSS」の記事 - Crieit

Bootstrap 5 + scroll-margin-top + ダークモード + パララックスについてメモ

2022-04-28T00:04:15+09:00

経緯

Bootstrap 5 で JavaScript の記述なしにアンカーリンクへのアニメーション付きスクロールが scroll-behavior で実装されていることを最小限構成で確認したので、改めて Bootstrap 5 で検証したいと思います。

css変数 + ページごとのキービジュアル画像の変更

キービジュアル (ページ最上部にある画像 + 見出し + キャッチコピー等のパーツ) の背景画像について、ページごとに異なる画像を表示させたい、というのはよくある話だとは思います。

今回は css変数を使って

予め headタグ内の styleタグでは background-image: var(--img); でcss変数で指定しておく
各要素で変数の値を都度差し替える

という形で画像を切り替える形式を採ってみました。

なお、今回はデモなので Jumbotron風の実装で。

ダークモード

// layout/_l-main.scss
@charset "utf-8";

@use "../foundation" as f;

.l-main {
    background-color: f.$bg-color;
    color: f.$color;
    #dark > & {
        /* ダークモード対応 */
        @media (prefers-color-scheme: dark) {
            background-color: f.$color;
            color: f.$bg-color;
        }
    }
}

メディアクエリ @media (prefers-color-scheme: dark) によるダークモードを試しに記述。

ブログのような色に対して中立性の高いコンテンツの場合は使えそうですが、ブランドカラーが決まっている場合は難しそうな感。

個人的には基本ダークモードの方がありがたいのですが……。

パララックス

最後はパララックス。これについてはパッケージを利用しました。

    "dependencies": {
        "ukiyojs": "^3.0.0"
    },

import Ukiyo from 'ukiyojs';

window.addEventListener( 'load', () => {
    const ukiyoParallaxes = document.querySelectorAll( '.ukiyo' );
    ukiyoParallaxes.forEach( ( ukiyoParallax ) => {
        new Ukiyo( ukiyoParallax, {
            scale: 1.75,
            speed: 1.75,
        } );
    });
});

公式のドキュメント通りです。

GitHub - yitengjun\/ukiyo-js: ⛰️Modern parallax library for picture elements and any images

検索すると自前実装も出てくるのですが、後々を考えるとパッケージの方が良さそうな気がするので。

参考

css変数で背景画像指定

CSS変数でbackground-imageを指定するとChromeとSafariで挙動が異なるのを解決する - Qiita

(css) scroll-behavior と scroll-margin-top についてメモ

2022-04-27T23:58:57+09:00

css の scroll-behavior と scroll-margin-top について検証したのでメモ。

経緯

Bootstrap 5 で何気なく検証をしていたら、特に何をしたわけでもないのに同一ページ内のアンカーリンクにアニメーション付きでスクロールしたので気になりました。

自前の JavaScript では何も記述していないプレーンな状態だったので、 Bootstrap 5 の JavaScript かと思ったのですが、該当の CDN からの読み込みの scriptタグを削除しても動作したので「すわ css 側か？」となり調べてみることにしました。

調査結果

結果、 scroll-behaviorプロパティに依るものと分かりました。具体的には、

html {
    scroll-behavior: smooth;
}

この記述でページ全体にスクロールアニメーションが付与されていました。

しかも調べてみると、別ページのアンカーリンクに遷移する場合は

ページ遷移
遷移先のページでアンカーリンクまで自動的にアニメーション付きでスクロール

という挙動をすることが分かりました。

css で別ページのアンカーリンクまで対応しているのであれば、上述の挙動が気になる場合を除けばもはやこれ1つで済んでしまうのではないでしょうか……。

注意点としては、 iOS Safari が15.4(2022/3/14リリース、2022/4/27記事執筆時点で最新版) のみサポートとなっているため、最新版以外の Safari のサポートが必要な場合は polyfill 等の代替手段を講じる必要性がありそうです。

PJAX 等のデフォルトではない遷移をした際の挙動については未検証なので何ともですが少し気になります。

それと、もう一点気になったのは Bootstrap のケースで言うとナビゲーションバーに .fixed-top を付けていた場合。つまりナビゲーションバーが画面上部に固定表示で追従するパターンですね。

頻出するパターンですが、このケースでは工夫しないとアンカーリンク移動時にナビゲーションバーの裏側にコンテンツが隠れてしまうという課題がありました。

かつてはこれを margin-top: -80px; padding-top: 80px; 等とネガティブマージンとパディングで調整・相殺するテクニックを使っていましたが……。

scroll-margin-top

ここで兼ねてより目を付けていたのが scroll-margin-top 。 scroll-snap と呼ばれるスクロール時に特定の位置で止めたり誘導するプロパティの1つで、上述のアンカーリンク遷移時にナビゲーションバーの裏側に隠れてしまう問題を解決する方法として利用できます。

.anchor-link {
    scroll-margin-top: 80px;
}

これまで上述のようなネガティブマージョンとパディングの相殺や、あるいは before疑似要素を利用した方法で調整していた手間が、上述の通り1行指定するだけで解決できます。

css変数を使用するならば、

:root {
    /* 変数定義 */
    --navbar-height: 80px;
}
html {
    /* スムーススクロール */
    scroll-behavior: smooth;
}
.header {
    /* ナビゲーションバーを上部固定表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    /* css変数を使用して高さを指定 */
    height: var(--navbar-height);
}
.main {
    /* スクロール可能なコンテンツ領域の上端部分はめり込むのでここは普通に margin-top でナビゲーションバー分下げる。css変数使用。 */
    margin-top: var(--navbar-height);
}
.anchor-link {
    /* アンカーリンクが裏側に隠れるのを抑止。css変数使用。 */
    scroll-margin-top: var(--navbar-height);
}

このようなイメージですね。

"scroll-margin-top" | Can I use... Support tables for HTML5, CSS3, etc

ちなみにこちらは iOS Safari 14.7 以降で有効ですが、やはりそこそこ新しめの Safari である必要があるので、こちらもケースによっては注意が必要そうです。

参考

ネガティブマージョンとパディングの調整

ネガティブマージン・パディングで固定ヘッダー使用時のアンカーリンクに対応する
【CSS】ページ内リンクのジャンプ先の位置を調整する at softelメモ
- 疑似要素を使う手法もあり

CSSで文字をアニメーションさせる方法

2022-04-03T12:30:16+09:00

文字をアニメーションさせて目立たせるやり方です。

見出しに使ったりワンポイントに使ったりいろいろできると思います。

この記事では以下のpタグの文字をアニメーションさせていきます。

あいうえお

文字の色を変える

まずは簡単な色を変えるアニメーションです。

#text {
    animation: color-loop 1s infinite;
}
@keyframes color-loop {
    0% {
        color: red;
    }
    50% {
        color: blue;
    }
    100% {
        color: red;
    }
}

「animation: color-loop 1s infinite」はcolor-loopを1秒間で繰り返し(infinite)行うという意味です。

@keyframesは時間のどの割合の時に何を変更するかを指定します。赤から50％で青になり100％で赤に戻るという内容です。

もちろんこの割合をもっと細かく設定したり色の数を増やしたりできます。

文字を拡大縮小させる

#text {
    display: inline-block;
    animation: scale-loop 1s infinite;;
}
@keyframes scale-loop {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(2, 2);
    }
    100% {
        transform: scale(1, 1);
    }
}

scale()で拡大縮小をさせることができます。拡大縮小したい倍率を指定すればOKです。(X方向、Y方向)になっています。

一つ注意なのが「display: inline-block」を指定しておく必要があることです。これが無いと変化する幅が文字列の幅より大きくなってしまいX軸方向で大きくずれてしまいます。

文字を回転させる

#text {
    display: inline-block;
    animation: rotate-loop 1s infinite linear;
}
@keyframes rotate-loop {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

linearは変化を等間隔で変化するようにする指定です。

scaleは度(degree)で指定します。マイナスの値にすると反対に回ります。

一文字ずつずらしてアニメーションさせる

最後に文字列を一文字ずつずらしてアニメーションさせてみます。

まずはCSSはこんな感じです。

#text {
    /*今回は無しです*/
}
#text span {
    display: inline-block;
    animation: scale-loop 1s infinite linear;
}
#text span:nth-child(2) {
    animation-delay: 0.1s;
}
#text span:nth-child(3) {
    animation-delay: 0.2s;
}
#text span:nth-child(4) {
    animation-delay: 0.3s;
}
#text span:nth-child(5) {
    animation-delay: 0.4s;
}

span:nth-child(n)は文字の数だけ用意しておきます。今回は5文字なので5までしか作っていません(１は遅らせる必要が無いのでありません)。

animation-delayはアニメーションを遅らせたい時間です。

次にjavascript。

window.addEventListener("load", function(){
    textAnimation();
});
function textAnimation(){
    var elm = document.getElementById("text");
    var text = elm.innerHTML;
    for(let i = 0; i < text.length; i++){
        html += "" + text[i] + ""
    }
    elm.innerHTML = html;
}

id=textの文字を取得して文字を分割してspanタグで挟んでいます。

これで一文字ずつ指定した時間分遅れてアニメーションします。

javascriptだけでやってみた

上のサンプルのjavascriptを改造してcssを減らして楽にできるようにしてみました。

window.addEventListener("load", function(){
    textAnimation("text", 0.1);
});
function textAnimation(id, delayTime){
    var elm = document.getElementById(id);
    if(!elm)return;
    var text = elm.innerHTML;
    elm.innerHTML = "";
    for(let i = 0; i < text.length; i++){
        const span = document.createElement('span');
        const node = document.createTextNode(text[i]);
        span.appendChild(node);
        span.style.animationDelay = delayTime * i + 's';
        elm.appendChild(span);
    }
}

これならCSSの「span:nth-child(n)」の部分をわざわざ記述する必要が無くなってとても楽ちんです。

引数でidと時間の間隔も指定できるようにしたので使い勝手もかなり良くなりました。

もうちょっと派手にしてみた

最後に色も追加して派手に目立つようにしました。

See the Pen 文字アニメーション by いんわん (@inwan78) on CodePen.

stylelint 周りのアップデート (Scss対応、 rgb 指定)

2022-03-05T23:05:27+09:00

久々にパッケージガーデニングしたら stylelint から Scss 関連や rgb の指定で怒られるようになってしまったので対処。

現象

$ stylelint ./src/scss/**/*.scss

src/scss/global/_scssVariables.scss
 19:19  ✖  Unexpected unknown function "color.scale"   function-no-unknown
 21:19  ✖  Unexpected unknown function "color.adjust"  function-no-unknown
 22:17  ✖  Unexpected unknown function "color.adjust"  function-no-unknown
 23:19  ✖  Unexpected unknown function "color.scale"   function-no-unknown
 24:20  ✖  Unexpected unknown function "color.scale"   function-no-unknown

src/scss/object/component/_c-button.scss
 19:31  ✖  Expected modern color-function notation  color-function-notation

src/scss/_plugins/articlesns/_articlesns.scss
 40:16  ✖  Unexpected unknown function "color.scale"  function-no-unknown
 53:31  ✖  Unexpected unknown function "map.get"      function-no-unknown
 57:35  ✖  Unexpected unknown function "color.scale"  function-no-unknown
 57:47  ✖  Unexpected unknown function "map.get"      function-no-unknown
 57:81  ✖  Unexpected unknown function "map.get"      function-no-unknown

npmパッケージをアップデートした際に stylelint やそれに関連するパッケージ等をアップデートしたところ、いくつかの項目で怒られるようになってしまいました。

この中で特に気になったのが Expected modern color-function notation color-function-notation のエラー。

かじさんはTwitterを使っています「stylelint-config-standard の 23.0.0 アップデートで、 color-function-notation が 'modern' で追加された。従来のコンマ区切りだったrgb()、rgba()をスペース区切りに揃えるもの。ついでにrgbaをrgbに揃えている。 https:\/\/t.co\/yHFngFOS8J」 \/ Twitter

検索したところ、このツイートがヒット。

stylelint-config-standard のアップデートで色指定が引っかかるようになったようです。これは css level 4 の構文に対応したもののようです。

CSS Color Module Level 4 （日本語訳）

構文としては次のように変更になります。

/* 旧来 */
.hoge {
    background-color: rgba(48, 48, 48, 0.5);
}

/* 新 */
.hoge {
    background-color: rgb(48 48 48 / 50%);
}

rgb() と rgba() から rgb() へ統一
RGB値はカンマ区切りからスペース区切りへ
RGB値とアルファ値の区切りはカンマからスラッシュへ

一方、 Scss でも独自に rgb() が存在しています。このおかげで、 Scss で次のように色の指定でRGB値ではなく16進数や変数を使用しても問題が発生しないわけですね。

$black: #333;

.hoge {
    background-color: rgba($black, 0.5);
}

ただ、 Scss 側ではまだカンマ区切りしか対応していなさそうです。そのため、仮に css level 4 の構文を使用して Scss のトランスパイルを走らせると、次のようにエラーになってしまいます。

[hh:ii:ss] gulp-notify: [sass] Error: src\scss\object\component\_c-newscards.scss
Error: Missing element $blue.
    ╷
128 │     box-shadow: inset 2px 2px 5px 0 rgb(g.$us-main-color 0.5);
    │                                     ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  src\scss\object\component\_c-newscards.scss 128:37  @use
  src\scss\contents.scss 36:1                         root stylesheet


 19:31  ✖  Expected modern color-function notation  color-function-notation

Scss の構文にすると stylelint でコケて、 stylelint のデオフォルトに従って css level 4 の構文にすると Scss のトランスパイルが通らない、と。

対処

仕方ないので、上述引用のツイートと同様に color-function-notation のパラメータを legacy にすることで回避することにしました。

.stylelint.json

    "rules": {
        // 略
        "color-function-notation": "legacy",
        // 略
    }

余談

上述対処の前に他の回避方法がないか試す中で、一通りパッケージをアップデートしたりしましたがかえって Scss の関数等のエラーが出てしまったのは冒頭の通り。

そこでそれらへの対応として次のようにしました。

package.json

    "devDependencies": {
        // 略
        "stylelint-config-standard-scss": "3.0.0",  // 追加
        // 略
    }

.stylelint.json

    "rules": {
        // 略
        "at-rule-no-unknown": null,                                                                    // Scss関数は stylelint-config-standard-scss に任せるようにしたため独自で追加していた設定は削除
        "function-no-unknown": [
            true,                                                                                      // map.get や color.scale 等 Dart Sass の関数は引っかかってしまうのでルールを追加
            {
                "ignoreFunctions": [
                    "/^map\\..+/",
                    "/^color\\..+/"
                ]
            }
        ],
        "scss/at-rule-no-unknown": true,                                                               // Scssのデフォルト関数以外は引っかかるようにする
        "scss/dollar-variable-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",  // 互換性のためケバブケース強制は除去
        "scss/at-mixin-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",         // 互換性のためケバブケース強制は除去
        "scss/at-mixin-argumentless-call-parentheses": "always"                                        // 互換性のため引数なしのmixin呼び出しの際は括弧強制
        "stylelint-config-standard-scss": "3.0.0",  // 追加
        // 略
    }

その上で .stylelint.json のルールをいくつか変更しました。

これで stylelint を走らせてエラーが出なくなったことを確認。

参考

css level 4

CSS Color Module Level 4 （日本語訳）
Getting error in CSS with rgb\(0 0 0 \/ 15%\) - Stack Overflow
- 似たようなケース

marked

Marked Documentation

パースする関数が marked から marked.parse メソッドに変更になっていた。

WEB版Twitterの色を元に戻すぞ

2021-08-14T13:55:16+09:00

Twitterの仕様がまた変更されました。個人的には頻繁に仕様を変えて色々とっかえひっかえ試していき、より良いものを追求するという姿勢自体には賛成ですが、今回の仕様変更はちょっと困るなあ、という感じです。

今回の仕様変更は配色の変更です。これはとても困ります。特に白と黒逆やろ！と思います。絶対間違えて誤フォローや誤フォロー解除が発生しまくるでしょう。なので、私の環境ではWEB版だけでも戻します。内容としてはWEB版Twitterのトレンドとかトピックを非表示にすると同じようなことをします。

使うのはStylebotという拡張機能。分かる人向けに書くと、サイトごとに独自のCSSを記述して上書きして見た目を好きなように変更したり、見たくない要素を非表示にしたりできるというものです。

Chromeの拡張機能ですが、対応するブラウザで使えます。私の場合はBraveというブラウザでも問題なく使用できています。Braveに関して興味があればメインブラウザをChromeからBraveに変えた話をご覧ください。

Stylebotで以下のコードを貼り付けてください。色は好みに合わせて自由にカスタマイズできます。詳しくはHTMLカラーコードなどでググってください。

/* フォロー中の背景色 */
div.css-18t94o4.css-1dbjc4n.r-1niwhzg.r-1ccsd61.r-sdzlij.r-1phboty.r-rs99b7.r-15ysp7h.r-4wgw6l.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr {
    background-color: #09f;
}

/* 保存の背景色 */
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-16y2uox.r-6gpygo.r-1b7u577.r-peo1c.r-1ps3wis.r-1ny4l3l.r-1udh08x.r-1guathk.r-1udbk01.r-o7ynqc.r-6416eg.r-lrvibr.r-3s2u2q.r-1glkqn6 {
    background-color: #09f;
}

/* 保存の文字色 */
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-16y2uox.r-6gpygo.r-1b7u577.r-peo1c.r-1ps3wis.r-1ny4l3l.r-1udh08x.r-1guathk.r-1udbk01.r-o7ynqc.r-6416eg.r-lrvibr.r-3s2u2q.r-1glkqn6 div {
    color: white
}

/* 未フォローの背景色 */
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-15ysp7h.r-4wgw6l.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr {
    background-color: transparent;
    border: solid 2px white;
}

 /* 未フォローの文字色 */
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-15ysp7h.r-4wgw6l.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr div{
    color: white;
}

今回行ったのは、開発者モードで該当の要素を見つけ出してStylebotで設定の付与です。Stylebotでも要素選択は可能なのですが、開発者モードで行った方が小回りがきいてやりやすいです。

本来は共通クラスのみ抜き出して少ない記述でやりたかったのですが、あまりにも面倒くさくてベタ書きしました。

上記コードはTwiterの仕様変更で無効になる可能性がありますが、その時はまた同じことをすればいいです。

それでは素敵なTwitterライフを！

マウスについてくる動くボタン

2021-06-21T12:46:26+09:00

今回はJavaScriptとCSSを使ってマウスについてきてクリックするとウインドウを閉じるボタンを作りたいと思います

コード

sub

参考サイト

マウスポインタの位置、座標を取得する - JavaScript プログラミング
https://www.ipentec.com/document/javascript-get-pointer-position

CSSの基礎勉強

2021-06-09T23:40:35+09:00

CSSの基礎文法

HTMLにstyleタグを記述する

HTMLのタグの中にstyle属性を記述する

    あいうえお

styleの継承：HTMLタグの親要素を指定してスタイルを記述した場合、子要素にもそのスタイルが受け継がれる。

    
        あいうえお
        aiueo

    body {color:green; font-size:20px;}

bodyのスタイルが、その子要素(h1, p)に継承される。

あいうえお
aiueo

デフォルトでは、継承されないスタイルを継承されるようにするには、子要素のスタイルにinheritを指定する。

    h1 {
        border: inherit;
    }

class属性を使ったスタイリング。CSSのセレクターで、.class名とする。

 　こんにちは

    .hoge {
        color:green;
    }

ボックスモデル

HTMLの要素は全てボックスという四角い領域を生成する。ボックスは大きくわけて、インラインとブロックに分けられる。

インラインボックス：span,a,em,strong,imgといったタグで指定した要素は、インラインボックスを生成する。要素は、上下に並んでいく。インラインボックスでは、widthやheightを指定できない(置換要素と呼ばれるimg,input,textareaは指定できる)、上下のmarginを指定できないという特徴がある。
ブロックボックス：table,h1,p,div,ul,liなどのタグで指定した要素はブロックボックスを生成する。要素は左に詰めて並んでいく。ブロックボックスでは、widthやheightを指定できる。また、marginやpaddingを指定できる。displayプロパティをinline-blockに変更することで、サイズの変更が可能となる。

CSSでは、ボックスモデルという概念を理解する必要がある。これは、4つの領域で構成され、外側から順に、margin,border,padding,contentとなる。ボックスのサイズはこの4つの領域のサイズを足し合わせて算出される。

margin:ボックスの一番外側にある余白。marginでサイズを指定できる。垂直方向のmarginは相殺が起こる。
border:marginの内側にある枠線。border-widthでサイズを指定できる。
padding:contentとborderの間にある余白。枠線とコンテンツの余白となる。paddingでサイズを指定できる。
content:要素そのものの内容が表示される領域。widthとheightでサイズを指定できる。

よく使うスタイル集

color:色を変更する

    h1{color: green;}

font-size:フォントの大きさを変更する

    h1{font-size:12px;}

font-weight:フォントの太さを変更する

    h1{font-weight:bold;}

text-align:ブロック要素の位置を変更する

    h1{text-align:center;}

text-decoration:テキストに装飾線を表示する

    h1{text-decoration:underline;}

font-family:フォントを変更する。左から順に適用される。ユーザーのブラウザに指定したフォントが存在しない場合、一つ右のフォントを適用する。

    h1{font-family:Verdana, 'Arial Black', メイリオ, sans-serif;}

line-height:行ボックスの高さを指定する。指定の単位をemとした場合、font-sizeを係数倍した高さになる。また、単位を指定した場合は、子要素にも親要素で計算した高さが継承されるが、単位を指定しなかった場合は、子要素で高さは再計算される。

    h1{line-height: 2em;}

vertical-align: 行ボックス内のベースラインを基準に、テキストと同じボックス内の画像の上下位置を変更する。数値を指定した場合は、ベースラインから数値分離れた位置となる。

    .img_a {vertical-align: top;}

リストのスタイル指定。list-style-typeでリストの点を変更する。list-style-positionでリストの点の位置を変更する。list-style-imageでリストの点に画像を使用することができる。

    ul {
    list-style-type: circle;
    list-style-position: inside;
    list-style-image: url(./img/icon.png);
    }

list-style:リストのスタイルを一括指定する。imageとtypeの両方が指定された場合は、画像が優先される。list-styleの前に個別の指定をしていた場合、list-styleのデフォルトで上書きされる。

    ul{list-style: circle inside url(../img/icon.png);}

ボックスを中央揃えにする。

    .box {
        margin-left: auto;
        margin-right: auto;
    }

*　display:ブロックの切り替えや、非表示化。

    .box {display:none;} /*非表示*/
    .box {display:inline-block;} /*インラインブロック化*/

z-index:要素の重なり順を制御。

    .box {z-index: 1;}
    .box2 {z-index: 2;}

box-sizing:width,heightの指定範囲を拡大する。

    .box {
        box-sizing: border-box; /*borderを含む*/
        width: 100px;
        height: 100px;
    }

calc():サイズの計算を行う。

    .box{width: calc((100% - 20px) / 5);}

続・コードを書いてステータス画面を表示する

2021-04-30T14:10:13+09:00

続・コードを書いてステータス画面を表示する

※この内容は、2021年5月1日・2日の二日間、Maker Faire Kyoto 2021に併せてオンライン開催される「子どもプログラミングパーク」の展示作品の一つとして書かれました。

総説

これは、Webブラウザに表示されたステータス画面の値を操作する、小さなサンプルコードです。
このガイドテキストに沿ってコードを書き進めていくことで、ステータス画面を作成し、コンフィグ画面でステータスの値を操作することが出来るようになります。

サンプルコード：objective-volhard-ktrfs - CodeSandbox

このガイドテキストを全て終えたプログラムは下記のようになります。

サンプルプログラム：IamStronger • REPL • Svelte

解説 Webアプリケーションフレームワーク

このサンプルコードはHTMLとCSSで書かれていますが、プログラム全体ではWebアプリケーションフレームワーク「Svelte」を使用しています。

App.svelteファイルの構成は、上から順に、JavaScript、HTML、CSSとなっており、一つのファイルの中に必要な機能と要素そしてスタイルをまとめて書くことが出来ます。

今回使用したSvelteには、実際に入力した内容を確かめながら学ぶことができるチュートリアルが用意されています。説明は英語ですが、短文で簡潔にまとめられているのでGoogle翻訳などで読んでも理解しやすい内容になっています。
このサンプルプログラムで興味をもったら、ぜひ試してみて下さい。

Hello world から始まります。

Introduction / Basics • Svelte Tutorial

今回使用したSvelteの他にも、世界では様々なWebアプリケーションフレームワークが日々改良を重ねています。

いますぐ自由に使えるものもいくつかありますので、実際に触って試してみて、自分にあったWebアプリケーションフレームワークを見つけてみてください。

WEB版Twitterのトレンドとかトピックを非表示にする

2021-04-18T21:20:18+09:00

TwitterのWEB版では、右側に「いまどうしてる？」(トレンド)や「おすすめユーザー」「おすすめトピック」などが表示されています。

トレンドはともかく、トピックに関しては全然使っていないのでハッキリいって邪魔なんですよね。そもそも機能として不要と思うのですが、それに加えてフォローしていないトピックも突然TLに出てきて本当に邪魔です。不必要な情報が視界に入るとイライラするので消してしまいます。

今回はGoogle Chromeで拡張機能を使用しますが、Microsoft EdgeやFirefoxなどもChromeの拡張機能を使用できるので、同じ方法で対応できます。

使用する拡張機能は「Stylebot」という拡張機能です。

手順は次の通りです。

拡張機能「Stylebot」をインストール
非表示にしたい部分を選択して非表示設定

簡単ですね。

まずは、こちらからアクセスし、「Chromeに追加」をクリックして有効化してください。

次に、Twitterを開いて、拡張機能より「Stylebot」を開きます。

すると、次のような画面が開きます。

非表示にしたい項目を選択して、「レイアウト」の「隠す」を選択します。

選択した「いまどうしてる？」が非表示になりました。

同様に他の項目を選択すると、スッキリしました。

この「Stylebot」は他にも文字の色などもカスタマイズすることができます。自分好みのTwitter環境にして、素敵なツイ廃ライフをどうぞ！

ちなみに、手っ取り早く「いまどうしてる？」「おすすめユーザー」「おすすめトピック」を非表示にする場合、「Stylebot」の下の<> コードのところに以下をコピペしてください。

なお、Twitterの仕様などにより無効になったりレイアウトが崩れたりする可能性があります。

.css-1dbjc4n.r-1ysxnx4.r-k0dy70.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1udh08x {
  display: none;
}

【VSCode】拡張機能一覧（主にWeb系システム開発用）

2021-03-28T18:20:44+09:00

個人用メモ。
主にPHPを使用して開発する環境で使用している拡張機能一覧。
（他のも混じっているけど）
（後で追加・変更・削除するかも）

VSCode

Bookmarks
　あらかじめソースコード中にブックマークを設定しておくと、他の場所からブックマークまで一瞬で移動することが出来る。
indent-rainbow
　インデントを色付きで表示してくれる。
Japanese Language Pack for Visual Studio Code
　VSCodeの日本語化。

HTML

Auto Close Tag
　自動的に閉じタグを追記してくれる。
Auto Rename Tag
　タグを変更すると、対応する閉じタグを自動的に変更してくれる。
HTML Snippets
　HTMLの予測変換を表示してくれる。
HTMLHint
　HTMLの文法チェックをしてくれる。

PHP(Laravel)

Bracket Pair Colorizer 2
　メソッドやArrayなどで、対となるカッコを色付きで表示してくれる。
php cs fixer
　PHPソースを自動整形してくれる。
　※別途、「php-cf-fixer.phar」のインストールが必要。
PHP Debug
　PHPをステップ実行してデバッグできるようになる。
PHP IntelliSense
　PHPの予測変換を表示してくれる。

【2021.8.8 追加】
* Laravel Blade Snippets
　Laravelのbladeファイル内のタグやディレクティブを色付きで表示してくれる。

Laravel Blade formatter
　Laravelのbladeファイル用のフォーマッタ。
　blade独自のディレクティブもインデントしてくれる（これ重要）。

JavaScript(Node.js,Vue.js)

ESLint
　JavaScriptの構文チェックをリアルタイムで実行してくれる。
　※Vue.jsで使用するには設定が必要。
JavaScript (ES6) code snippets
　JavaScriptの予測変換を表示してくれる。
Vetur
　Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットを行ってくれる。

CSS(Sass,SCSS)

IntelliSense for CSS class names in HTML
　CSSクラス名を入力するときに、入力補完してくれる。
SCSS Formatter
　SCSSコードを自動整形してくれる。

その他

Log File Highlighter
　ログファイルの内容を色付きで表示してくれる。
MySQL
　VSCodeでMySQLを使用可能にする。
Rainbow CSV
　CSVファイルをカラムごとに色分けして表示してくれる。
Regex Previewer
　正規表現の実行結果をプレビュー表示してくれる。
SFTP
　サーバへ自動的にソースファイルをアップロードしてくれる。

【参考】

「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法
https://incloop.com/visualstudiocodeのデバッグ設定/

Visual Studio Codeで作るPHP開発環境のおすすめ拡張機能17選
https://wonwon-eater.com/vscode-php-plugin/

VScodeの日本語化ができない変わらない時の対処法[Visual Studio Code]
https://rabotiku-sato.com/vscode-japanese-setting

vscodeでVue.jsを書くときに使っているプラグインとか
https://qiita.com/dayoshix/items/c61a75a971331418c348

【HTML編】Visual Studio Code おすすめプラグイン紹介 #02
https://so-da.tech/tech/vscode/vscd3/

VSCodeのAuto Rename Tagで閉じタグも自動変更
https://tech.pjin.jp/blog/2020/04/27/vscode_extension_auto_rename_tag/

VSCode で HTML の文法チェックを行う拡張機能 HTMLHint
https://loumo.jp/archives/26229

VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法
https://onedarling.site/programming/tool/vscode-indent-rainbow/

【2020年版】VSCodeでhtml/css/jsの拡張機能おすすめ
https://uetani33.net/vscode-web-extensions/#toc_id_3_2

VSCode使い必見！？使って便利な Visual Studio Code 拡張機能10選
https://www.geekfeed.co.jp/geekblog/vscode_extension

【超便利】VSCodeでMySQLを利用する方法
https://newmtube07.com/vscode-mysql/

[Visual Studio Code] PHPのコードを整形する「php cs fixer」の設定
https://www.searchlight8.com/visual-studio-code-php/

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利
https://www.karelie.net/vscode-sftp/

Windows10でVisual Studio Code + vue-cliの開発環境構築メモ
https://belhb.hateblo.jp/entry/2020/08/08/142540

【2021.8.8 追加】
LaravelでVisual Studio Codeを使う時に入れておきたい拡張機能3選
https://biz.addisteria.com/laravel-vscode/

Laravel blade formatter VSCode Extensionを作った
https://shufo.dev/2020/10/03/published-vscode-blade-formatter/

VSCodeでBladeテンプレートを整形する
https://blog.nplpl.com/310

Crieit用ユーザスタイルシート

2021-01-09T12:23:32+09:00

Stylus でスタイル当ててみました。コード部分は等幅になっているのが好きなので……。

pre, code {
    font-family: monospace !important;
}

p > code, li > code {
    color: #824 !important;
}

/* プレビューで hr が見えるように色を調整 */
.tui-editor-contents hr {
    border-top: 1px solid #ddd;
}

.hljs-comment {
    color: #99a;
    font-style: normal;
}

以下は見栄え確認用のサンプル。

fdsa fdsa fdsa

fdsa fdsa fdsa

https://crieit.net/posts/Crieit-5ff921b4cf458

# コメント

ライブラリを使わず、HTML,CSS,JSのDOM操作でブロック崩しゲームを作る

2020-12-24T00:53:23+09:00

・アドベントカレンダーなんでも　12/24に投稿します。
記事内容は自分のブログに書いたのでこちらをご覧ください。
(このアドベントカレンダー、crieitでしか記事公開できないと思わなかったので自分のブログに書いてしまいました！すみません！)

ライブラリを使わず、HTML,CSS,JSのDOM操作でブロック崩しゲームを作る

ポートフォリオのテンプレートのfeature部分

2020-10-25T10:42:27+09:00

テキストが下に表示されてしまう

index.html

    
    
      
        
          FEATURE
        
        
          1サイトの解説
        
        
          
            
            
            
          
          
            サイト名：
              
サイト名が入る

              https://●●●.com
            
            担当：
Design / Coding (Responsive) / WordPress / Writing
            コメント：
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
          
          
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

CSS

floatを使ったパターンです。

@charset "utf-8";

/* リセットCSS
----------------------------- */
html,body,h1,h2,ul,li{
  margin: 0;
  padding: 0;
  line-height: 1;
}
img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-style: none;
}
ul,li{
  list-style: none;
}
a{
  text-decoration: none;
  color: #1ca9e3;
}

/* body
----------------------------- */
body{
  font-family: "Quicksand","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .8px;
  word-break: break-all;
  color: #333333;
}

/* 文字
----------------------------- */
.heading-primary{
  font-family: 'Josefin Sans',sans-serif;
  font-size: 40px;
  letter-spacing: .05em;
}
.section-heading{
  text-align: center;
  margin-bottom: 20px;
}
.section-lead{
  margin-bottom: 30px;
  text-align: center;
}

/* レイアウト
----------------------------- */
.inner{
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 40px;
}

/* header
----------------------------- */
header{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86vh;
}
.logo{
  position: relative;
  margin-bottom: 30px;
  padding: 0 20px;
  text-align: center;
}
.logo-title{
  font-family: 'Nunito',sans-serif;
  font-size: 76px;
  letter-spacing: .1em;
}
.logo-subtitle{
  font-size: 22px;
  margin-top: 5px;
  text-align: center;
  letter-spacing: .2em;
}

/* グローバルナビ
----------------------------- */
.gnav{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #ffffff;
  -webkit-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, .2);
  box-shadow: 0 3px 3px -3px rgba(0, 0, 0, .2);
}
.gnav-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.gnav-item{
  font-family: 'Josefin Sans',sans-serif;
  font-size: 16px;
  padding: 0 24px;
  letter-spacing: .05em;
}
.gnav-link{
  position: relative;
  display: inline-block;
  padding: 20px 0;
  /* -webkit-transition: .3s;
  transition: .3s; */
  color: #333333;
}
.gnav-link:hover{
  opacity: .5;
}

/* WORKSセクション
----------------------------- */
.works-list{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 80px;
}
.works-item{
  flex-basis: 32.31552%;
  margin: 0 auto 40px;
  text-align: center;

}
.works-body{
  text-align: center;
}
.works-title{
  font-size: 12px;
  font-weight: bold;
  margin-top: 8px;
}
.works-text, .works-url{
  font-size: 10px;
}

/* FEATUREセクション
----------------------------- */
.feature-item{
  /* display: flex; */
  flex-wrap: wrap;
}
.feature-img-wrapper{
  /* flex-basis: 45%; */
  width: 45%;
  margin-right: 40px;
  float: left;
}
.feature-body{
  flex-grow: 1;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

iosだけ画像が縦に伸びる時

2020-10-19T18:10:44+09:00

「display:flex;」を指定している箇所に、「align-items: flex-start;」を追記するだけ!!

https://nichiyogogo.com/image-looks-stretched/

slack流量計ver3をリリースしました。

2020-04-27T21:53:23+09:00

slack流量計とは

サービス運営者コミュニティ「運営者ギルド」のslackの統計情報を可視化するアプリケーションです。

ver2リリース記事

ver3で何が変わったの？

VPSに移設

これまでslackに統計情報を集計するbotアプリケーションとして運用していましたが、サーバをVPSに移設しました。

WEBアプリケーション化

貴重なslackのリソースを消費せずにWEBで閲覧できるようになりました。(要slackサインイン)

使っている技術

ReactJS
NodeJS/Express/TypeScript
passport
node-cron
chart.js
slack/client

技術的な話

react-bootstrap-table2をbootstrap CSSを適用せずに作る

分析機能を作ることが多いので、表を多用するのですが、react-bootstrap-table2というコンポーネントを結構使っています。

これまではbootstrap CSSを適用した後にこれでもかというぐらいCSSを上書きしていたのですが、今回は自力でキャレットを実装できました。
ページネーションもlist-style-type: none;に気づいてサクサク実装。
CSSいじるの楽しい！

th{
    font-size: 12px;
    .dropdown>.caret{
        &::after{
          font-family: "Font Awesome 5 Free";
          content: "\f0d7";  
        }
    }
    .dropup>.caret{
      &::after{
        font-family: "Font Awesome 5 Free";
        content: "\f0d8";  
      }
    }
    .caret{
      &::after{
        font-family: "Font Awesome 5 Free";
        content: "\f0d7";  
      }
    }
  }

  ul.pagination{
  display: flex;
  list-style-type: none;
  text-align: center;
  li.page-item{
    >a.page-link{
      text-decoration: none;
      background-color: #555555;
      padding: 3px;
      margin-right: 3px;
      color: white;
    }
    &.active > a.page-link{
      text-decoration: none;
      background-color: #bfbfbf;
      padding: 3px;
      margin-right: 3px;
      color: #555555;
    }
  }
}

passportを使ったslackサインインの実装

これは前回twitterサインインの実装をしたのが役に立ちました。

以下ソース抜粋

import passportConfig from './passportConfig';
import * as session from 'express-session';
const MySQLStore = require('express-mysql-session')(session);
passportConfig();
const passport = require('passport');

app.use(passport.initialize());
app.use(passport.session()); 
app.use(
  session({
    secret: '＊＊＊＊＊＊',
    resave: false,
    store: new MySQLStore(dbConfig),
    saveUninitialized: false,
    cookie:{
      httpOnly: false,
      secure: false,
      maxage: 1000 * 60
    }
  })
);

passport-slackはシリアライズ/デシリアライズを使っていないようなので、
実装個所は変わりますが、認証が成功した際にセッションに情報を格納するといけました。

(req: Request, res) => {
        req.session.user = req.account;
        res.redirect(BACKEND);
      }

自分だけのオリジナル紙面を作れる「スポーツ新聞メーカー」をリリースしました。

2020-04-23T00:32:48+09:00

サービスURL

https://sports-news-maker.netlify.app

何ができるか

新聞名
見出し
試合のスコア(3-10イニングまで)
画像
縦見出し
写真のキャプション

を編集してこのようなオリジナル紙面を作れます。

特徴

入力フォームの隠蔽

パワプロ風画面ジェネレータで作ったコンポーネントを流用しています。
クリックするまで入力フォームが出ない仕様です。

縦書きの見出し

縦書きをCSSでデザインしています。
writing-modeというプロパティだけでは、英文字が横になってしまうので、text-orientationというプロパティで英文字対応を行っています。

style={{
            writingMode:'vertical-rl',
            textOrientation:'upright',
            fontSize:`calc(6vw - ${store.getState().newsTitle.length/2}px )`,
            margin:5,
            width:'1em',
            whiteSpace:'nowrap',
            fontWeight:'bold'
          }}

レスポンシブ

フォントサイズや画像の大きさ、マージンなどを画面の幅によって変わるようCSSで実装しています。

セピアフィルター

画像に新聞らしくセピアフィルターをかけています。
へぇ、CSSってこんなこともできるんだ!という新しい発見がありますね。

{{
          maxWidth:'85vw',
          objectFit:'cover',
          filter:'sepia(30%)',
         }}
        src={this.state.image_src}/>

振り返り

今回はほぼ一日で作ったので、またフロントで完結しています。
時間があればOGPでシェア機能つけたら面白いかもしれません。
あとは試合スコアのチーム名を長くすると表示が乱れるのは課題です。
幅を固定してフォントサイズを文字長で反比例させればいいですかね。

意外と簡単！自分のサイトをダークモード対応してみた【技術編】

2019-09-24T04:49:33+09:00

スプランプ（splamp.info）というサイトの管理人をしているウラルです。

来ましたよ、ダークモードの時代が。2019年はダークモード元年です。

ダークモードの時代が来た

何を言っているかお分かりでしょうか。
実は、2019年はWindows・iOS・Androidという三大OSがダークモード対応をするという、大きな時代の節目なのです。

OSの更新日とダークモード設定方法

2019年5月22日
Windows 10 May 2019 Update配信開始。「個人用設定 > 色」から「既定のアプリモード」を「黒」にする。

2019年9月4日
Android10配信開始。「設定 > ディスプレイ」から「ダークテーマ」をオンにする。

2019年9月20日
iOS13配信開始。「設定 > 画面表示と明るさ」から「外観モード」を「ダーク」にする。

Webが対応しないでどうする

個人的な所感ですが、開発者の中でダークモード対応は興味としては薄いように感じます。

しかし、Webこそダークモードの流れに乗るべきなのです。なぜなら、ほとんどのWebサイトの背景は真っ白じゃないですか！目が眩むし、夜眠れなくなりそうです。

私は、以前からWebサイトでダークモードの対応をしたかったのですが、OSレベルでのダークモード対応が普及していなかったため、ずっと待っていました。サイト内にダークモードボタンを設置しても、ブラウザが真っ白では意味がありませんからね。

三大OSが対応した今、もう何も遮るものはありません。

CSSだけで実装できる

ダークモード対応は、難しい技術が必要なのでしょうか。いいえ、CSSだけでいいんです。

CSSのメディアクエリの１つである、prefers-color-schemeを使います。

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。
prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN

構文によると、ダークモードがオンになるとprefers-color-schemeがdarkになり、オフだとlight、そもそも機能を持ち合わせていない場合はno-preferenceという値になります。

実際に利用する場合はどう使うのでしょうか。
おすすめは、CSS変数との併用です。既存の構造を崩さずに、ダークモード用の色彩設定を追加することができます。

例

:root {
    --header-bg: white;
    --body-bg: white;
    --body-color: black;
}

@media (prefers-color-scheme: dark) {
:root {
    --header-bg: hsl(212, 38%, 12%);
    --wrapper-bg: hsl(212, 40%, 17%);
    --body-color: #e4e4e4;
}
}

header {
    background: var(--header-bg);
}

body {
    background: var(--body-bg);
    color: var(--body-color);
}

CSS変数を参照させることで、ダークモードに切り替わると一斉に色が変わります。

imgタグの画像の切り替えは若干面倒ですが、私はライト用とダーク用の2つを連続で並べて、CSSでdisplay: noneとdisplay: inlineを入れ替えるようにしました。

大変だけど

これまで白ベースで作ってきたサイトにとっては、ダークモードの対応は破壊的な修正にあたります。角丸で四隅が白い画像だとか、色でごまかしていた要素の境目などを、見直さなければいけません。

しかし、それはデメリットばかりではありません。それは、負の遺産になりかけていたCSSを直すチャンスかもしれません。（少なくともうちのサイトは構造から改善しました）

三大OSがダークモードに対応した今、時代の流れはダークモード対応です。
実装自体は簡単ではあるものの、色使いの検討や構造の見直しに割と時間がかかるので、早め早めに手を付けたいものです。
アクセシビリティとか言って、やがて対応に迫られてくるのは間違いありません。

次回は【デザイン編】として、ダークモードデザインについて記事にしようと思います。

Chromeのplaceholderの色は#757575

2019-09-24T00:05:17+09:00

HTMLのや</code>に使われる<code>placeholder</code>属性の文字色は、CSSでは疑似要素<code>::placeholder</code>の中で設定できますが、デフォルトの色が分からなかったので調べました。</p> <p><a href="https://crieit.now.sh/upload_images/f37dd84b36bcbac2749ed7d9d5d7127f5d88e29c1b118.png" target="_blank" rel="nofollow noopener"></a><br /> ▲これのことね</p> <h1 id="結果"><a href="#%E7%B5%90%E6%9E%9C">結果</a></h1> <p>Chromeでスポイトで色を取って確認したところ、<code><input></code>も<code><textarea></code>も<code>#757575</code>=<code>rgb(117, 117, 117)</code>=<code>hsl(0, 0%, 46%)</code>でした。</p> <h1 id="感想"><a href="#%E6%84%9F%E6%83%B3">感想</a></h1> <p>デフォルトがCSSでは定義されておらず開発者ツールではわからないので、スポイト使うしかありませんでした（´・ω・｀）</p> <p><a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder">https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder</a></p> </article> <article> <h1>CSSアニメーションでトランザム！</h1> <p>2019-09-09T22:37:51+09:00</p> <h1 id="トランザムシステムってなに？"><a href="#%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B6%E3%83%A0%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%AB%EF%BC%9F">トランザムシステムってなに？</a></h1> <p>アニメ「機動戦士ガンダムOO」に登場する、機体の性能を向上させ、<strong>一定時間</strong>スペックの3倍以上に相当する出力を得ることができる仕組みのこと。</p> <p>その際にコクピットに出る表示が印象的だったのですが、<br /> CSSアニメーションを使ったローディング表示やスピナーを見て、<br /> 「実はCSSアニメーションだけで表現できるのでは...」と思い始めて3か月ぐらい経ちました。</p> <p><a href="https://crieit.now.sh/upload_images/b08b548caec5795ad40e35af9c85f4c95d764f1a11e8a.png" target="_blank" rel="nofollow noopener"></a></p> <h1 id="キーになる技術"><a href="#%E3%82%AD%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B%E6%8A%80%E8%A1%93">キーになる技術</a></h1> <h2 id="２つのプログレスバーを制御する"><a href="#%EF%BC%92%E3%81%A4%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%AC%E3%82%B9%E3%83%90%E3%83%BC%E3%82%92%E5%88%B6%E5%BE%A1%E3%81%99%E3%82%8B">２つのプログレスバーを制御する</a></h2> <p>参考として挙げたQiita記事ではプログレスバーの作り方としてソースだけではなく考え方が書かれており、この処理を上下左右反転させればよいことがわかりました。</p> <h2 id="グラデーションを効果的に使う"><a href="#%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%8A%B9%E6%9E%9C%E7%9A%84%E3%81%AB%E4%BD%BF%E3%81%86">グラデーションを効果的に使う</a></h2> <p>今回は<strong>禍々しい</strong>グラフィックに特徴があるので、できるだけ真似るために</p> <ul> <li>プログレスバー</li> <li>内円の中心</li> <li>円の外側</li> </ul> <p>にグラデーションを使用しています。</p> <h2 id="点滅(opacityの変更)を使う"><a href="#%E7%82%B9%E6%BB%85%28opacity%E3%81%AE%E5%A4%89%E6%9B%B4%29%E3%82%92%E4%BD%BF%E3%81%86">点滅(opacityの変更)を使う</a></h2> <p>時間制限の限界が近づいたことを知らせるために赤と通常色で交互に色を変えたり、opactiy(不透明度)を変えたりしています。</p> <h1 id="デモ"><a href="#%E3%83%87%E3%83%A2">デモ</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://ckoshien.github.io/css-trans-am/">GitHub Pages</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://github.com/ckoshien/css-trans-am">ソース</a></li> </ul> <h1 id="今後の展望"><a href="#%E4%BB%8A%E5%BE%8C%E3%81%AE%E5%B1%95%E6%9C%9B">今後の展望</a></h1> <ul> <li>今回は小さいサイズで作成してしまったので全体的にサイズ調整する</li> <li>粒子チャージに対応する <ul> <li>一旦粒子を使い切ってしまった場合、再チャージの描写を入れる <ul> <li>これはたぶんjsなしでは無理だと思います。</li> </ul></li> </ul></li> </ul> <h1 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/Keita_I/items/72f302b6470a2ccdd9f4">CSSアニメーションで円形プログレスバーを作る方法</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://1-notes.com/flash-animation/#toc_id_4">色々なパターンの点滅するCSSアニメーションサンプル</a></li> </ul> </article> <article> <h1>Nuxt.js製のWebサービスにmarked+highlightjsでMarkdownで書いた読書メモを表示できるようにしてみた</h1> <p>2019-09-04T18:29:26+09:00</p> <p>先日、開発中の<a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読用の書籍管理アプリ</a>の新機能として、<br /> Markdownで書ける読書メモを追加したので、その時の備忘録。</p> <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">✅読書中のメモが残せる読書メモ機能✨読書メモを残せる機能を追加しました‼️マークダウンで書けて、全メモをクリップボードにコピーできちゃいます😊はてなブログなどマークダウンが使えるなら、コピペで記事も書くことも😍(続く <a target="_blank" rel="nofollow noopener" href="https://t.co/K3pjr4noVo">pic.twitter.com/K3pjr4noVo</a></p>— めもらば@公式 (@MemoryLoverz) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz/status/1168227417950806016?ref_src=twsrc%5Etfw">September 1, 2019</a></blockquote> <h3 id="全体の流れ"><a href="#%E5%85%A8%E4%BD%93%E3%81%AE%E6%B5%81%E3%82%8C">全体の流れ</a></h3> <p>やりかたとしては、こんな感じ<br /> 1. Markdownの文字列を<a target="_blank" rel="nofollow noopener" href="https://github.com/markedjs/marked">marked</a>を使ってHTML化<br /> 2. <code><pre></code>の部分は、markedで<a target="_blank" rel="nofollow noopener" href="https://github.com/highlightjs/highlight.js/">highlightjs</a>を使うように設定<br /> 3. Markdown用のCSSを追加して見た目を調整</p> <h3 id="VueのSFCで書くとこんな感じ"><a href="#Vue%E3%81%AESFC%E3%81%A7%E6%9B%B8%E3%81%8F%E3%81%A8%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98">VueのSFCで書くとこんな感じ</a></h3> <pre><code class="html"><template> <div class="marked" v-html="markedHtml"></div> </template> <script lang="ts"> import { Component, Vue, Prop } from "nuxt-property-decorator"; import marked from "marked"; import hljs from "highlightjs"; @Component({ components: {} }) export default class NoteItem extends Vue { // マークダウンで書かれたテキスト @Prop({ required: true }) memo!: string; created() { // markedでhighlightjsを利用するように設定 marked.setOptions({ langPrefix: "", highlight: function(code, lang) { return hljs.highlightAuto(code, [lang]).value; } }); } private get markedHtml() { // markedを実行した結果を返す return marked(this.memo); } } </script> </code></pre> <p>ポイントとしてはこんな感じ。</p> <ol> <li><code>created()</code>内でmarkedの設定。ハイライト処理にhighlightjsを使うように。</li> <li>computedの<code>markedHtml()</code>内でmarkedを実行</li> <li><code><div v-html="markedHtml"></code>でHTMLを表示</li> </ol> <h3 id="マークダウン用のCSSを追加する"><a href="#%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3%E7%94%A8%E3%81%AECSS%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B">マークダウン用のCSSを追加する</a></h3> <p>上記のままだと、Webサイトに適用しているCSSがそのまま適用されてしまうので、<br /> こんなになってしまい、あまりよい感じではない...</p> <p></p> <p>なので、<code>.marked</code>というクラスは以下の要素にマークダウン用のCSSを設定して調整する。</p> <p>0から作ると大変なので、<a target="_blank" rel="nofollow noopener" href="https://qiita.com/skkzsh/items/99e30bbbfe69f379b583">@skkzshさんのQiita記事</a>に書いてある、<br /> <a target="_blank" rel="nofollow noopener" href="https://github.com/simonlc/Markdown-CSS">simonlc/Markdown-CSS</a>や<a target="_blank" rel="nofollow noopener" href="https://github.com/kottkrig/Markdown-CSS">kottkrig/Markdown-CSS</a>を参考に設定していく。</p> <p>できたのがこんな感じ。<br /> あとはサイトのデザインと合わせて、少しずつ調整〜</p> <pre><code class="scss">// **************************** // * Marked // **************************** .marked { p { margin: 1em 0; } img { max-width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1em; } h4, h5, h6 { font-weight: bold; } h1 { font-size: 2.5em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: 0.9em; } ol { margin: 1em 0; padding: 0 0 0 2em; } ul { margin: 1em 0; padding: 0 0 0 2em; list-style: disc; } dd { margin: 0 0 0 2em; } table { margin: 10px 0 15px 0; border-collapse: collapse; } td, th { border: 2px solid #ccb8a3; padding: 3px 10px; } th { padding: 5px 10px; } blockquote { padding-left: 1em; margin: 0; color: #666666; border-left: 0.3em #f6f0e5 solid; } } </code></pre> <p>このCSSを適用するとこんな感じに!!<br /> いい感じになった(<em>´ω｀</em>)</p> <p></p> <p>いろいろ便利なライブラリがあるのでサクッとできてステキ♪</p> <h2 id="こんなのつくってます！！"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%EF%BC%81%EF%BC%81">こんなのつくってます！！</a></h2> <p>上記の読書メモ機能を追加した、積読用の読書管理アプリ「積読ハウマッチ」！<br /> <a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!</p> <p></p> <p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ</p> <p>要望・感想・アドバイスなどあれば、<br /> 公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで♪</p> <h1 id="参考にしたサイト"><a href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88">参考にしたサイト</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://mizchi.hatenablog.com/entry/2018/10/23/221446">大量のテキストを食っても速い Markdown Editor 作った - mizchi's blog</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/bmf_san/items/fe2b4b4591dd17ee7103">React＋marked＋highlight.jsでマークダウンエディタをつくる - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/tadnakam/items/1323d03743fc0101aa50">コードのハイライト表示 JS ライブラリ３種 - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="http://kannokanno.hatenablog.com/entry/2013/06/19/132042">JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 - ぼっち勉強会</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/skkzsh/items/99e30bbbfe69f379b583">Markdownでスタイルシート - Qiita</a></li> </ul> </article> </main></body></html>

「CSS」の記事 - Crieit

Bootstrap 5 + scroll-margin-top + ダークモード + パララックス についてメモ

ほげ

ぴよ

(css) scroll-behavior と scroll-margin-top についてメモ

CSSで文字をアニメーションさせる方法

stylelint 周りのアップデート (Scss対応、 rgb 指定)

WEB版Twitterの色を元に戻すぞ

マウスについてくる動くボタン

CSSの基礎勉強

あいうえお

続・コードを書いてステータス画面を表示する

WEB版Twitterのトレンドとかトピックを非表示にする

【VSCode】拡張機能一覧（主にWeb系システム開発用）

Crieit用ユーザスタイルシート

ライブラリを使わず、HTML,CSS,JSのDOM操作でブロック崩しゲームを作る

ポートフォリオのテンプレートのfeature部分

FEATURE

iosだけ画像が縦に伸びる時

slack流量計ver3をリリースしました。

自分だけのオリジナル紙面を作れる「スポーツ新聞メーカー」をリリースしました。

意外と簡単！自分のサイトをダークモード対応してみた【技術編】

Chromeのplaceholderの色は#757575

Bootstrap 5 + scroll-margin-top + ダークモード + パララックスについてメモ