KITASENJU DESIGN BLOG

humans are imperfect

html/css

playing AR Quick Look automatically

I checked inside of mode-viewer.js. The AR Quick Look code was inside it. <model-viewer> <html> <head> <meta charset="utf-8"> <title>test</title> <script> window.onload=()=>{ const modelUrl = new URL("g5.usdz", self.location.toString()); /* if (this.arScale === 'fixed') { if (modelUr…</meta></head></html></model-viewer>

cssのスペースの意味

スペースある/なしで意味が違う csshtml.work ul.A - ulタグのクラスAを指定 ul .A - ulの子要素でのクラスA ul:first-child - 1つ目のul要素 ul :first-child - 全ての子要素

HTMLのタグにデータを仕込む

同じjsを使いつつ、処理を出し分けたい時に使った。 注意!タグに書くのは小文字、大文字を書いても小文字になる。ただマイナスを入れるとjs側はマイナスのところは大文字になる(キャメルケースがケバブケースになる) I used it when I wanted to use the …

pugでループ

- for ( i=0; i <= 43 ; i++ ) div( id="t" + i ) h2 for:特定の回数ループ ul - for (var x = 0; x < 3; x++) li item #{x} h2 each:配列をループ ul - var list = ['1','2','3'] each item in list li item #{item} h2 ついでに連想配列each ul - var li…

cache control with random value in pug

pugでdeployごとにキャッシュをしなくする - var cache = Math.random() link(rel="stylesheet" href=`./css/indexKira2.processed.css?${cache}` id="css4") link(rel="stylesheet" href=`./css/indexKira.processed.css?${cache}` id="css3") link(rel="st…

sassでmediaQuery

$breakpoints: ('sm': 'screen and (max-width: 400px)','md': 'screen and (max-width: 700px)','lg': 'screen and (max-width: 1200px)' ) !default @mixin mq($breakpoint: md) @media #{map-get($breakpoints, $breakpoint)} @content .myBr display: in…

広告部分を回転させるCSS

.adsbygoogle,#touch-top-entry-header-ad,.google-afc-user-container{ position: absolute; filter: opacity(100); animation: rotate-anime 3s linear infinite; transform: scale(0.1); } @keyframes rotate-anime { 0% {transform: rotate3d(0.2,0.7,0.…

CSSで色々な形

いろんな形 https://css-tricks.com/the-shapes-of-css/

あたらしいblink

blur blink https://codepen.io/kitasenjudesign/pen/BadpmMJ underline blink https://codepen.io/kitasenjudesign/pen/LYjxedj bg blink https://codepen.io/kitasenjudesign/pen/MWvJQeJ bg blink https://codepen.io/kitasenjudesign/pen/mdMRXBY

blink loading with css

#loading{ animation: blink 0.5s infinite alternate; } @keyframes blink{ 0% { color: #000000 } 50% { color: #aaaaaa } 100% { color: #000000 } }

マニアックなHTML機能

カーソルカスタマイズ グラデリピート 縦書き Spinning Ring Text in Pure CSS – CodeMyUI ボタンを立体にする CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説! | JAJAAAN custom scrollbar web2.0 https://codepen.io/xposedbones/pen/Jnzpq

縦書き css

-ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: center; display: inline-block;

アニメgifのリスタート

how to restart animated gifs 複数gifのスライドショーそれぞれ最初から再生させる。 <html> <head> <style> body{ margin: 0px; padding: 0px; color: #000; background-color: #008800; } .container { width: 100%; height: 100%; image-rendering: pixelated; } .bg0{ back</head></html>…

jQueryで複製

複製する $(function() { $(document).on('click', '#button', function() { $('#sample li').clone().appendTo($('#sample')); }); });

Prepros使うメモ

はじめに タスクランナーをインストールしたりするの使うのがだるくなってしまったので、自分サイト用にGUI付きのタスクランナーアプリPreprosを使う。 https://prepros.io/ エディタではなく、シンプルなタスクランナーという感じで、pug/sass/typescriptな…

〠FOOTER〠