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環境設定方法

推薦する

Linux statコマンドの使用

1. コマンドの紹介stat コマンドは、ファイルまたはファイル システムに関する詳細情報を表示する...

Grafana+Prometheus を使用して MySQL サービスのパフォーマンスを監視する

Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...

nginxとバックエンドポート間の競合の解決策

質問： Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...

jsで七夕告白連打の効果を実現、jQueryで連打技術を実現

この記事では、jsとjQueryテクノロジーを使用して告白弾幕を実現する方法を紹介します。具体的な内...

Vueは画像のドラッグと並べ替えを実装します

この記事の例では、画像のドラッグと並べ替えを実装するためのVueの具体的なコードを参考までに共有して...

IDEA に基づいて Tomcat サーバーを展開するための詳細な手順

目次導入ステップ1ステップ2: アイデアで動的Webプロジェクトを作成するステップ3: Tomcat...

MySQL 8.0.22 圧縮パッケージの完全なインストールと構成のチュートリアル図 (テスト済みで効果的)

1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...

MySQLデッドロック問題の詳細な分析

序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...

MySQL で中国語を入力するときに発生するエラー 1366 の解決方法

MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...

js と jQuery での Ajax の使用例の詳細

目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...

Linux プラットフォームの MySQL でリモート ログインを有効にする

開発中、MySQL へのリモートアクセスでよく問題に遭遇します。そのたびに検索する必要があり、面倒に...

Docker メモリ監視とストレステストの方法

起動していたDockerコンテナはメモリを使い果たした状態になっており、再起動せずにコンテナのメモリ...

Vue3 はメッセージコンポーネントの例を実装します

目次コンポーネント設計最終的なコンポーネントAPIの定義コンポーネント構造の定義テンプレートとスタイ...

NavicatでMySQLビッグデータをインポートする際のエラーの解決方法

Navicat がエクスポートしたデータはインポートできません。最後に、MySQLコマンドのインポー...

Linux で同じバージョンの R を使用して Seurat2 と Seurat3 を同時にインストールするチュートリアル

Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...