サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
webmanab-html.com
Visual Studio Code(VS Code)はデフォルトで Markdown を使って記述されたドキュメントをサポートしていますが、拡張機能でさまざまな追加機能をサポートしてあげると、最強の Markdown の記述環境を準備できます。 Markdown All in One Markdown All in One – Visual Studio Marketplace Markdown を扱う際には必ず入れておきたい最初の拡張機能だと思います。これを有効にすると ショートカットキーで Markdown を入力 画像の挿入時にパスの入力を補完 Markdown のアウトライン表示 md ファイルを開くと自動でプレビューを表示 といった機能が使えるようになります。 markdownlint markdownlint – Visual Studio Marketplace Markd
Vue.js では、要素を追加/更新/削除したときのアニメーションを、簡単に実装できるような機能が用意されています。 本当にありがたいことに、公式のドキュメントにバッチリとまとまっていますが、それを要約しつつパパッと今日から始められるように、ライトに端折って紹介します。 Enter/Leave とトランジション一覧 — Vue.js シンプルな実装 Vue が提供しているアニメーション機能は、かなり多機能で美味しい仕様になっていますが、とりあえず一番簡単なアプローチで実装してみます。 ポイント <transition name="your-anim-name"> で、v-if や v-show が指定された要素をラップする name 属性が class 名のプレフィクスになる 挿入(enter)/削除(leave)時のアニメーションの進捗を補足して、それに応じた class を自動で切り替
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> css .container { position: relative; overflow: auto; } $('.container').perfectScrollbar(); 見た目のスタイルの変更 見た目はvariable.scssを編集することで簡単にカスタマイズできます。 variables.scss $ps-border-radius: 6px !default; // スクロールバーの丸み $ps-rail-default-opacity: 0 !default; // コンテナにマウスが入ってない時の透過度 $ps-rail-container-hover-opacity: 0.6 !defaul
JavaScriptのMath.random()関数を利用すると、0以上1未満の値を得ることができます。これを使って最大値までのランダムな値を得ることは簡単です。 const random = (max) => Math.floor(Math.random() * max); console.log(random(5)); // 5未満のランダム値 ランダム値の分布のコントロール このMath.random()関数をうまく利用して、ランダムな値の分布をコントロールすることができます。 今回は「CreateJS」を利用して、(x,y)座標にランダム値をセットして分布を表現しました。 描画モードにlighterを指定して、要素が重なっているところを明るくなるようにして、どこにたくさんの要素が集まっているか視覚的にわかるようにしました。なので明るく描画されているところがランダム値の出現頻度が高い
単純なアニメーションならCSSの@keyframesやtransitionで実装できますが、複雑なアニメーションやサクッといいものを描くときにはアニメーションライブラリを使うと、くわしい知識や経験がなくても簡単に実装できたり、複雑なアニメーションを構築することができます。また、アニメーションを実装する際の勉強や研究にもなるので、目を通しておきたいライブラリをまとめます。 アニメーションを実装するためのライブラリまとめ (CSS) Tuesday 0.3秒くらいの短時間で終了するように作られた要素の表示/非表示に使える、シンプルなCSSアニメーションライブラリ。用意されたclass属性を付与するだけで簡単にアニメーションが実装できます。ソースはLessで記述されています。 Tuesday Tuesday github <div class="animated tdDropInLeft">an
ウェブ制作のあれこれについて学習したことをメモしたりクリップしたり気ままに綴っていきます。
svgをインラインで配置するとき、サイズ指定の際に、幅の指定だけだとIEとAndroidの古いバージョンで高さが計算できなくて表示崩れを起こします。 それに対応するためのtipです。 親のボックスを作って絶対配置 縦横比を維持してレスポンシブに対応するtipsのときに述べたように、親要素の高さをpaddingでつくりそのボックスに対して、子要素としてsvgを絶対配置してやります。 <div class="svg-wrap"> <svg class="svg"> <!-- inline svg --> </svg> </div> css .svg-wrap { position: relative; width: 100%; height: 0; padding-top: calc(50 / 200 * 100%); //アスペクト比の計算 calc(svgの高さ / svgの幅 x 要素の
このページを最初にブックマークしてみませんか?
『webmanab.html』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く