…て、見てしまいましたｗ なお、同じ本に収録されているネタの中では #田中圭一 フィオリーナの願い事 - はぁとふる売国奴のマンガ - pixiv これが一番ウケましたｗ 話がだいぶそれましたが 牧場の少女カトリ - Wikipedia Wikiにより詳しく書かれていたり、 牧場の少女カトリ | 作品紹介 | NIPPON ANIMATION 公式サイトで第一話が観れたりしますので、興味のある方はどうぞ^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…後の四角のサイズです。widthが幅、heightが高さを指定します。 あとがき border-radius:50%; で、ボックスを円形にできますが、それを transition なり animation なりの動的な変化をかけられるのかな？と試してみました^^ ハンバーガーメニューからちょっとそれたサンプルになりましたが、中の文章部分にリンクとかを置いたらハンバーガーメニューとして通用するかもですね。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…0px;}}#bg{animation:none;}#tg01:checked~#bg{animation:migi 5s linear 0s infinite;}--></style><div><label style="border: 5px outset #ffcccc; background-color: #ffaaaa; border-radius: 5px; padding: 10px;" for="tg01">右に進む</label> <input id="tg…

どうも！LSSです！！ またタブレットを購入してしまいました。 Fire7 16GB 自分的に初のアレクサ搭載端末 7インチ端末 最大の理由 安かったから あとがき Fire7 16GB Fire 7 タブレット (7インチディスプレイ) 16GB 発売日: 2019/06/06 メディア: エレクトロニクス 実際にポチったのは昨日1/2で、今日1/3に到着！早いですね^^ 自分的に初のアレクサ搭載端末 去年買ったタブレットは10インチ、こちらは7インチ 元々安めな端末が期間…

…ansform と animation の組み合わせを色々試みていました。 Amazonで「使えそうなスペックだけどめっちゃ安いノートPC」の記事を書いてました。 Amazonへのリンクをメインにした記事だと、日数がたつと商品切り替えでリンク切れたりするかな？って思っていましたが…いまだに健在ですね^^ 2020年9月 ９月最初、唐突に「箇条書き」のCSSをいじりだしてますｗ 今、改めてみると…意外と模様を工夫できるものですね^^ ブログ開設一周年を目前に…「自作小説」カテゴ…

…n:15% 50%;animation:shishiodoshi 5s linear 0s infinite normal;}.smidashi:hover:before{animation-duration:8s;}--></style><div class="smidashi"><p>こんな風に、ボックス要素につけた見出しが<ruby>鹿威し<rt>ししおどし</rt></ruby>のように揺れる事で自己主張します！</p><p>また、ボックス要素にマウスカーソルが乗って…

どうも！LSSです！！ 今日が、今年最後の出勤でした。 「今年最後の出勤」であって、「仕事納め」ではないのが、コロナに翻弄された2020年らしいところで、月曜の在宅勤務が仕事納めですｗ 昨日の記事、 に多数のコメント・ブクマありがとうございました^^ ちなみに、あれは３つの「radial-gradientで描いた水玉セットを全画面表示」に、それぞれ横方向・縦方向のアニメーション設定をつけたもので、 これらの記事でやってきた事の集大成になります。 「複数のradial-grad…

…0px 100px;animation:s1ax 0.8s linear 0s infinite,s1ay 2s linear 0s infinite; }@keyframes s2ax{0%{background-position-x:0px;}100%{background-position-x:600px;}}@keyframes s2ay{0%{background-position-y:0px;}100%{background-position-y:400px;}}…

…0px 100px;animation:snowh 11s linear 0s infinite,snoww 3s ease-in-out 0s infinite alternate;}--></style><div id="bg"> </div> コード解説 大きいものと小さいものを描いているのは、 background-image:radial-gradient(circle at 40px 40px,#ffffff80 0%,#ffffff00 30%),radial-…

…0px 150px;animation:snowd 10s linear 0s infinite;}.midori{position:absolute;right:50px;border-color:transparent transparent green transparent;border-width:0px 80px 100px 80px;border-style:solid;}.ki{position:absolute;right:100px;top:320px;w…

…absolute; animation: redblnk 2s linear 0s infinite alternate; top: 150px; right: 80px;">●</div><div style="position: absolute; animation: redblnk 2s linear 0.3s infinite alternate; top: 170px; right: 120px;">●</div><div style="position: abs…

…}} .uwave{animation:uwavea 3s linear 0s infinite;text-decoration-style:double;text-decoration-color:red;}--></style><p>このように、<span class="uwave">文章の一部</span>に時々アンダーラインがつきます。</p> 影分身！ このように、文章の一部が分裂、回転します。 コード <style><!--@keyframes moyaa{0%{…

…dding:2px;animation:buwa 6s linear 0s infinite normal;}--></style><p>文章の途中に、<span class="buwaku">例えばこんな感じ</span>で枠で囲んだ部分があり、その枠がたまに太く薄くなる、そんなサンプルです。</p> 使い方 コード中の、<style>タグ部分 <style><!--@keyframes buwa{0%{outline-width:4px;outline-color:#00…

…70px 70px;animation: kaiten 30s linear 0s infinite;left:100px;}.yen{position:absolute;font-size:100px;transform-origin:50% 70%;color:white;text-shadow:0px 0px 3px gray;}--></style><div class="waku"><div class="yen" style="transform: rotate(…

どうも！LSSです！！ ハロウィンも終わり、次の大型イベントはクリスマスですね^^ ちょっと気が早いかと思いますが、物によってはもう準備に取り掛かる必要があるのかも？ little-strange.hatenablog.com ↑去年の記事ですが、たまたまルミナリエの建設してるのを見かけたのもこのぐらいの時期。 で、とりあえずブログ的には「CSSでクリスマスツリーを描いてみよう！」と思ったわけですｗ クリスマスツリー ごく部分的な解説 よりクリスマスツリーとして完成度を上げる…

…lor:white;animation:katakata 5s linear 0s infinite normal;}.midashi:hover:before{background-image:linear-gradient(transparent 60%,pink 80%,transparent 100%);}--></style><div class="midashi"><p> こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！</p><p>…が…

…-shadow:0px 0px 1px yellow;top:500px;left:0px;width:60%;transform-origin:0px 0px;animation:kaiten 20s linear 0s infinite;}--></style><div class="mv">↑</div> なんとも…言いようがないというか、使いようがないというか…こんなネタも眠っていたりするんですｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…ent」 記事検索「animation」 CSSの基本的な部分について little-strange.hatenablog.com CSSにはざっくり分けて３種類の書き方があります。 その基本的なところについて、解説した記事になります。 記事検索「CSS」 little-strange.hatenablog.com はてなブログの「記事検索」機能で「CSS」という文言を含む記事を検索すると↑のようになります。 CSS、という言葉がちょっとでも出てくる記事が全て出てきますｗ 記…

…ne:3px solid red;}50%{outline:10px solid pink;}100%{outline:20px solid gold;}}--></style><span style="outline-offset: 5px; animation: outline-anm 2s linear 0s infinite alternate;">赤からピンク、ピンクからゴールド！</span> ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…id black; animation: bgscr 20s linear 0s infinite normal;"> </div> 解説 ちょっと色々な動きを入れてしまいましたが、「色々な動き」を指定している部分は 0%{background-position:0px 0px;}10%{background-position:-470px 0px;}20%{background-position:-470px -180px;}30%{background-position:…

…id black; animation: bgscr 6s linear 0s infinite alternate;"> </div> 無事、できました！ これをJavaScriptから指定してやれば、スクロールゲームも作れるって事に！^^ animation: bgscr 6s linear 0s infinite alternate;を日本語訳すると、 「bgscrというキーフレームで指定した変化を、6秒で動作させる、動作の加速度はlinearで、0秒後から開始。繰り返…

…,red 90%);animation:hnb 12s linear 1 normal forwards;color:#ffffff00;}--></style><div id="gamen" style="position: absolute; left: 0px; top: 0px;"> </div><script>// <![CDATA[h=0;hmax=10;gm=[];if(document.uniqueID){document.body.attachEvent("…

どうも！LSSです！！ 今日、びっくりするようなニュースが飛び込んできました！ サガシリーズ１～３がNintendo Switchで復活！？ リメイク、ではないっぽいですね ちなみに…LSSはNintendoSwitch持っていません^^; ところで、サガ３といえば… サガシリーズ１～３がNintendo Switchで復活！？ . . . . . . . . . . . . . . . . . . . . . . . . かなり驚きました！ サガシリーズの後継、ロマサガシリ…

…ht: 200px;animation: wlk 10s linear 0s infinite normal;}.waku1{display:inline-block;position:absolute;transform-origin: 0% 50% 0px;animation:asbm 0.8s linear 0s infinite alternate; }--></style><div class="waku0"><div class="waku1"><img src=…

…,red 90%);animation:hnb 12s linear infinite normal;color:#ffffff00;}--></style><div style="position: relative; left: 150px;"><div class="c1" style="transform: rotateZ(0deg);">.</div><div class="c1" style="transform: rotateZ(30deg);">.</div>…

… 前回からの改変点 animationプロパティは複合プロパティです 省略したanimation-delayは別に指定しています 前回 書かなかった、花火風のドットについて おわりに おまけ 花火のアニメーション その２ . . . . . コード <style><!--@keyframes hnb{0%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted darkyellow;top:200px;l…

…:absolute;animation:hnb 15s linear 0s infinite normal;}--></style><div style="position: absolute;"><div class="hnbdm"> </div></div> 数日前から考えてましたが 昨日今日あたりに、花火のドットを表現するのに border: 8px dotted red; のようにdottedなborderが使えるのでは？と思いましたが、おおむねうまくいきました^^ …

…% 50% 0px;animation:htmk 0.8s linear 0s infinite alternate;}--></style><div class="nbr" style="border: 1px solid black; font-size: 40px;">はためく</div> このコード、最後の一行を除く、赤文字部分をコピペして入れておけば、他の部分のタグにオレンジ文字部分の class="nbr" を付け足すだけで、なんでもはためきます！ 見出しもはため…

どうも！LSSです！！ 以前にもtransformプロパティを試してみた事はありましたが、「最低限、何が必要なのか」イマイチ掴めていないところがあったので、色々実験してみました。 rotateYのサンプル コード 最低限、必要なのは divをspanにしても、うまくいかなくなる divとspanの違いは、ブロック要素かインライン要素 では、インラインブロック要素では？ 再度、widthを削除してみます 角度指定を正の値にしてみる transform-origin:0% 50%…

どうも！LSSです！！ まもなく４連休に突入しますね！ LSSも暦通りなもんで、今日出勤したら４連休です^^ （その分、３日間がハードだったりもしますがｗ） さて、今回はちょっと久々に、２０年近く前に書いた小説を晒してみます。 「怪奇！蛙少女！！の巻」 あとがき 「怪奇！蛙少女！！の巻」 あれは小６の時、一学期の初日だった。…三学期に一度も学校に来なかった啓子が登校してきたのだ。 「お！啓子じゃねーか！！」「なんだよ、お前。トーコーキョヒかぁ？」「トーミンしてたんじゃねーの？…