CSS3 を使用してピカチュウのアニメーション壁紙を作成する例

CSS3 を使用してピカチュウのアニメーション壁紙を作成する例

文章

さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでなければ退屈で、見る気にもなれません。

PS: 私のアニメーションのサイズは比較的大きい (720 x 1280) ため、この GIF アニメーションを記録するために半分に縮小しました。しかし、実際には、元のサイズで表示する方が良いでしょう。そのためには、記事の最後に記載されているアドレスからダウンロードできます。

話を元に戻しましょう。実は、このアニメーション効果は難しくありません。構造が非常にシンプルで明確であることがわかります。シンプルですが、効果は非常に良いので、ぜひやってみたいと思います。

さて、とてもシンプルなので、私が実装した HTML 構造を見てみましょう。

<div class="pikachu_container">
    <div class="header">
        <div class="header_main">
            <span class="バッテリー"></span>
            <span class="clock" id="nowTime">09:00</span>
        </div>
    </div>
    <div class="time">
        <h1>09:00</h1>
        <p id="date">2015年9月3日</p>
        <p>ピカチュウのかわいい携帯壁紙</p>
    </div>
    <div class="body">
        <div class="目">
            <div class="leftEye"></div>
            <div class="rightEye"></div>
        </div>
        <div class="鼻"></div>
        <div class="頬">
            <div class="leftCheek"></div>
            <div class="rightCheek"></div>
        </div>
        <div class="口">
            <div class="口_メイン">
                <div class="舌"></div>
            </div>
        </div>
        <div class="hands">
            <div class="leftHand">
                <div class="leftHand_main">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div class="leftshadow"></div>
                </div>
            </div>
            <div class="rightHand">
                <div class="rightHand_main">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div class="rightshadow"></div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box_main">
                <div class="box_circle"></div>
            </div>
        </div>
    </div>
    <p class="author">@JR</p>
</div>

メインの構造は比較的明確で、上部に電池と時間、真ん中に時間と日付、そしてピカチュウの本体に分かれています。ピカチュウの体は目、鼻、口、ほっぺ、手、ボールに分かれています。

HTML 構造を構築したら、測定した画像の各部分のサイズに応じて CSS スタイルを記述します。

次に、各部分の CSS 実装コードを共有します。

まず初期化する

*{
    マージン:0;
    パディング:0;
}
体{
    フォント ファミリ:"Microsoft YaHei";
    色:#fff;
}
.pikachu_container{
    幅:720ピクセル;
    高さ:1280ピクセル;
    背景:rgb(251,205,60);
    位置:相対;
    オーバーフロー:非表示;
    マージン:0 自動;
}

バッテリーと時間のトップ

.pikachu_container .header{
    幅:100%;
    高さ:50px;
    行の高さ:50px;
    位置:相対;
    トップ:0;
    左:0;
}
.pikachu_container .header .header_main{
    幅:160ピクセル;
    高さ:100%;
    位置:絶対;
    右:0;
    トップ:0;
    フォントサイズ:30px;
    オーバーフロー:非表示;
}
.header .header_main .battery{
    表示:インラインブロック;
    幅:34px;
    高さ:18px;
    境界線:3px 実線 #fff;
    境界線の半径:5px;
    位置:絶対;
    上位:50%;
    左:23px;
    上マージン:-12px;
}
.header .header_main .battery:after{
    コンテンツ：'';
    表示:インラインブロック;
    幅:5px;
    高さ:14px;
    背景:#fff;
    位置: 絶対;
    上:2px;
    右:2px;
    -webkit-animation:charging 2s linear infinite;
    -moz-animation:charging 2s linear infinite;
    -o-アニメーション: 2 秒間の無限充電;
    -ms-animation:chargeng 2s linear infinite;
    アニメーション: 2 秒間無限に充電します。
}
@-webkit-keyframes 充電中
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
@-moz-keyframes 充電中
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
@-o-キーフレーム充電中{
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
@-ms-keyframes 充電中{
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
@keyframes 充電中{
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
.header .header_main .battery:before{
    コンテンツ：'';
    表示:ブロック;
    幅:3px;
    高さ:12px;
    背景:#fff;
    左上の境界線の半径:4px;
    左下の境界線の半径:4px;
    位置: 絶対;
    上:3px;
    左:-6px;
}
.header .header_main .clock{
    位置: 絶対;
    右:14px;
    トップ:0;
}

中央日時

.pikachu_container .time{
    幅:100%;
    高さ:250px;
    位置: 相対的;
    上:70px;
    左:0;
    テキスト配置:中央;
}
.pikachu_container .time h1{
    フォントサイズ:90px;
    文字間隔:8px;
    テキストシャドウ:-1px 2px 3px rgba(0,0,0,0.5);
}
.pikachu_container .time p:nth-of-type(1){
    フォントサイズ:30px;
    上マージン:10px;
}
.pikachu_container .time p:nth-of-type(2){
    フォントサイズ:26px;
    上マージン:8px;
    -webkit-animation:textShake 1s 無限;
    -moz-animation:textShake 1s 無限;
    -o-animation:textShake 1s 無限;
    -ms-animation:textShake 1s 無限;
    アニメーション:テキストシェイク 1 秒 無限;
}
@-webkit-keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        -webkit-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        -webkit-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        -webkit-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-moz-keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        -moz-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        -moz-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        -moz-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-o-keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        -o-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        -o-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        -o-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-ms-keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        -ms-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        -ms-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        -ms-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        変換:回転(1度)、3D変換(2px、-2px、0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        変換:回転(0度)、3D変換(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        変換:回転(-1度)、3D変換(-2px、2px、0);
    }
}

ピカチュウの目

.pikachu_container .body{
    幅:100%;
    高さ:940px;
    位置: 相対的;
    上:50px;
    左:0;
}
.体 .目{
    位置: 相対的;
}
.body .eyes .leftEye、.body .eyes .rightEye{
    幅:85px;
    高さ:85px;
    境界線:5px実線rgb(2,0,1);
    背景:rgb(51,51,51);
    境界線の半径:50%;
    位置: 絶対;
    上:40px;
}
.body .eyes .leftEye{
    左:150px;
}
.body .eyes .rightEye{
    右:150px;
}
.body .eyes .leftEye:after、.body .eyes .rightEye:after{
    コンテンツ：'';
    表示:ブロック;
    幅:40px;
    高さ:40px;
    背景:#fff;
    境界線:5px実線rgb(2,0,1);
    境界線の半径:50%;
    位置:絶対;
    上:2px;
    左:2px;
    -webkit-animation:eyeMove 3s 無限;
    -moz-animation:eyeMove 3s 無限;
    -o-animation:eyeMove 3s 無限;
    -ms-animation:eyeMove 3s 無限;
    アニメーション:eyeMove 3s 無限;
}
@-webkit-keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}
@-moz-keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}
@-o-keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}
@-ms-keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}
@keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}

ピカチュウの鼻

.body .nose{
    位置:絶対;
    幅:28px;
    高さ:18px;
    背景:rgb(51,51,51);
    境界線:4px実線rgb(2,0,1);
    境界線の半径:36px/26px;
    残り:50%;
    上:100ピクセル;
    左マージン:-18px;
    -webkit-animation:noseMove 3s 無限;
    -moz-animation:noseMove 3s 無限;
    -o-animation:noseMove 3s 無限;
    -ms-animation:noseMove 3s 無限;
    アニメーション:noseMove 3s infinite;
}
@-webkit-keyframes ノーズムーブ{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}
@-moz-keyframes 鼻を動かす{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}
@-o-keyframes noseMove{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}
@-ms-keyframes 鼻を動かす{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}
@keyframes 鼻を動かす{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}

ピカチュウのほっぺ

.body .cheek{
    位置: 相対的;
}
.body .cheek .leftCheek、.body .cheek .rightCheek{
    幅:120ピクセル;
    高さ:120px;
    境界線:5px実線rgb(2,0,1);
    背景:rgb(231,74,57);
    境界線の半径:50%;
    位置: 絶対;
    上:170px;
    -webkit-animation:cheekMove 3s 無限;
    -moz-animation:cheekMove 3s 無限;
    -o-animation:cheekMove 3s 無限;
    -ms-animation:cheekMove 3s 無限;
    アニメーション:cheekMove 3s 無限;
}
@-webkit-keyframes cheekMove{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
@-moz-keyframes 頬移動{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
@-o-keyframes cheekMove{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
@-ms-keyframes 頬を動かす{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
@keyframes 頬を動かす{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
.body .cheek .leftCheek{
    左:60px;
}
.body .cheek .rightCheek{
    右:60px;
}

ピカチュウの口

.体 .口{
    位置: 相対的;
    幅:180ピクセル;
    高さ:220px;
    残り:50%;
    上:180ピクセル;
    左マージン:-90px;
}
.body .mouth .mouth_main{
    位置: 絶対;
    左:0;
    上:0px;
    幅:180ピクセル;
    高さ:220px;
    背景:rgb(132,37,41);
    境界線:4px実線rgb(2,0,1);
    右上の境界線の半径:15px 15px;
    左下の境界線の半径: 250px 570px;
    右下の境界線の半径: 250px 590px;
    オーバーフロー:非表示;
    -webkit-animation:mouthMove 3s 無限;
    -moz-animation:mouthMove 3s 無限;
    -o-animation:mouthMove 3s 無限;
    -ms-animation:mouthMove 3s 無限;
    アニメーション:口を3秒動かす無限;
}
@-webkit-keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
@-moz-keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
@-o-keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
@-ms-keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
@keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
.body .mouth:after、.body .mouth:before{
    コンテンツ：'';
    表示:ブロック;
    幅:112ピクセル;
    高さ:38px;
    背景:rgb(251,205,60);
    ボーダー下部:4px 実線 rgb(2,0,1);
    位置: 絶対;
    上:-13px;
    zインデックス:3;
}
.body .mouth:after{
    左境界線:4px 実線 rgb(2,0,1);
    左下の境界線の半径: 340px 180px;
    左:-30px;
    -webkit-transform:回転(-24度);
    -moz-transform:回転(-24度);
    -o-transform:回転(-24度);
    -ms-transform:回転(-24度);
    変換:回転(-24度);
}
.body .mouth:before{
    右ボーダー:4px 実線 rgb(2,0,1);
    右下の境界線の半径: 340px 180px;
    右:-30px;
    -webkit-transform:rotate(24度);
    -moz-transform:回転(24度);
    -o-transform:回転(24度);
    -ms-transform:回転(24度);
    変換:回転(24度);
}
.体 .口 .舌{
    幅:200px;
    高さ:200px;
    背景:rgb(221,102,106);
    上マージン:40px;
    左マージン:-10px;
    左上の境界線の半径: 380px;
    右上の境界線の半径: 420px 380px;
    オーバーフロー:非表示;
}

ピカチュウの口はまだ熟考する価値があり、最も重要なことは、この効果を実現するために border-radius を使用することです。この丸い角の機能は非常に強力ですが、どのように使用するかによって効果は大きく変わります。

ピカチュウのボール

.body .box{
    幅:82ピクセル;
    高さ:82px;
    境界線:3px 実線 #fff;
    境界線の半径:50%;
    位置: 相対的;
    ボックスの影:0 0 5px rgba(255,255,255,0.9);
    残り:50%;
    上:320ピクセル;
    左マージン:-44px;
    -webkit-animation:box-rotate 4s easy-in-out 無限交互;
    -moz-animation:box-rotate 4s イーズインアウト 無限 交互に;
    -o-animation:box-rotate 4s easy-in-out 無限交互;
    -ms-animation:box-rotate 4s easy-in-out 無限交互;
    アニメーション:box-rotate 4s easy-in-out 無限交互;
}
@-webkit-keyframes ボックス回転{
    0%、90%、100%{
        -webkit-transform:rotate(0度);
    }
    40%,50%{
        -webkit-transform:rotate(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-moz-keyframes ボックス回転{
    0%、90%、100%{
        -moz-transform:回転(0度);
    }
    40%,50%{
        -moz-transform:回転(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-o-keyframes ボックス回転{
    0%、90%、100%{
        -o-transform:回転(0度);
    }
    40%,50%{
        -o-transform:回転(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-ms-keyframes ボックス回転{
    0%、90%、100%{
        -ms-transform:回転(0度);
    }
    40%,50%{
        -ms-transform:回転(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@keyframes ボックス回転{
    0%、90%、100%{
        変換:回転(0度);
    }
    40%,50%{
        変換:回転(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
.body .box .box_main{
    幅:80ピクセル;
    高さ:80px;
    境界線の半径:50%;
    背景:rgb(236,2,3);
    境界線:1px 実線 #333;
    位置: 絶対;
    トップ:0;
    左:0;
    オーバーフロー:非表示;
}
.body .box .box_main:before{
    コンテンツ：'';
    表示:ブロック;
    幅:80ピクセル;
    高さ:40px;
    背景:#fff;
    位置:絶対;
    下:0;
    左:0;
}
.body .box .box_main:after{
    コンテンツ：'';
    表示:ブロック;
    幅:80ピクセル;
    高さ:12px;
    背景:rgb(59,53,67);
    位置:絶対;
    上位:50%;
    左:0;
    上マージン:-6px;
}
.body .box .box_main .box_circle{
    幅:24px;
    高さ:24px;
    境界線:8px実線rgb(59,53,67);
    境界線の半径:50%;
    背景:#fff;
    位置: 絶対;
    残り:50%;
    上位:50%;
    左マージン:-20px;
    上マージン:-20px;
    zインデックス:5;
}
.body .box .box_main .box_circle:after{
    コンテンツ：'';
    表示:ブロック;
    幅:16px;
    高さ:16px;
    境界線:1px実線rgb(59,53,67);
    境界線の半径:50%;
    位置:絶対;
    上位:50%;
    残り:50%;
    左マージン:-9px;
    上マージン:-9px;
    -webkit-animation:bg_change 4s 無限;
    -moz-animation:bg_change 4s 無限;
    -o-animation:bg_change 4s 無限;
    -ms-animation:bg_change 4s 無限;
    アニメーション:bg_change 4s 無限;
}
@-webkit-keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}
@-moz-keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}
@-o-keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}
@-ms-keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}
@keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}

追記：手に関しては、事前にコードがたくさんあり、記事が少し長くなってしまったので、アップロードはしません。必要な場合は、私の github からダウンロードできます。

この場合のgithubダウンロードアドレス: https://github.com/JR93/pikachu

オリジナルリンク: https://www.cnblogs.com/jr1993/p/4779678.html

上記は、CSS3を使用してピカチュウのアニメーション壁紙を作成する例の詳細です。CSS3を使用してピカチュウの壁紙を作成する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

<<:  clearfixとclearの例

>>:  LinuxシステムでのSystemC環境設定方法

推薦する

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

MySQL 5.5.27 インストール グラフィック チュートリアル

1. MYSQLのインストール1. ダウンロードしたMySQLインストールファイルmysql-5.5...

Linux で完全な Samba サーバーを構築する方法 (CentOS バージョン)

序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...

インターネット接続なしでLinux Centos7にアプリケーションをインストールする方法の詳細な説明

1. 前の章では、プログラムを yum リポジトリに直接インストールできることを学びましたが、そのた...

Linux で Hadoop クラスターをインストールするための詳細な手順

目次1. usrディレクトリにHadoopディレクトリを作成し、インストールパッケージをそのディレク...

Tomcatのデフォルトプログラム公開パスの使用と変更についての説明

tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

ウェブサイト上のWeiboコンポーネントの再設計の詳細な紹介（写真とテキスト）

前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...

Dockerコンテナ間のホスト間通信 - オーバーレイベースの実装方法

オーバーレイネットワーク分析組み込みのホスト間ネットワーク通信は、常に Docker の待望の機能で...

Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。

序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...

Web データ ストレージ: Cookie、UserData、SessionStorage、WebSqlDatabase

クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...

JavaScriptエラーキャプチャの詳細な説明

目次1. 基本的な使い方とロジック2. 特徴3. エラーオブジェクト4. キャッチアンドスロー戦略の...

Vite と Vue CLI の長所と短所

Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...

高並列処理 nginx サーバー向け Linux カーネル最適化構成の説明

デフォルトの Linux カーネル パラメータは最も一般的なシナリオに基づいており、高い同時アクセス...