以下の記事やサービスでfont-sizeを入力するとそれに応じて出力はされますが、scssで使用する場合にはmixinで使用したいため、font-size調整用のmixinを作成した内容です。 coliss.com www.fluid-type-scale.com min-max-calculator.9elements.com 結果 @use…

X（旧Twitter）で以下のものが流れてきて実装方法など気になったので、それを実装してみた内容になります。 A realistic 3D Card hover effect using only CSS Demo: https://t.co/YFuQiTGH6r via @CodePen ✅ Minimal HTML✅ Responsive✅ Featuring the best …

タブのUIについて実装する機会はちょこちょこあるものの、ちゃんと理解しようと思い調べた内容になります。 参考にしたもの qiita.com kt-media.blog ics.media 今回実装したものについて See the Pen tab ui by miwa_shuntaro (@miwashutaro0611) on CodePe…

cssの:whereと:isの違いについて理解できていなかったため、違いなどについてまとめていこうと思います。 MDNの情報から :whereについて developer.mozilla.org :where() は CSS の擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクタ…

スケルトンスクリーンを実装する時にいろいろと調べたので、その時のメモになります。 スケルトンスクリーンとは 引用元1 ws-design.net 簡単に言うと骨組みローディング画面です。 ローディング画面を必要とするまでもないくらい短い読み込みが発生する場合…

borderのグラデーションの時に一部詰まったため、その時のメモになります。 行おうとしたこと カードのUI ボーダーはグラデーションにしたい カードの縁は角丸にする 結果 最終的に今回制作したものの最終版になります。どのようなことをしたかなどについて…

以下の記事の続きのものになります。 qiita.com 遊びでcssを使ったアンパンマンを制作したのですが、意外とcssの学びが多かったので、学べたことをメインで共有します。 完成物 See the Pen css-only-Anpanman's face by miwa_shuntaro (@miwashutaro0611) o…

既存のcssプロパティの値をJavaScirptで取得することがあったので、その時の対応したことになります。 結果 html <div class="block"></div> .block { width: 300px; height: 60px; } /** * cssで適応されているスタイルを返却 * @param {HTMLElement} element 取得を行うHTML要素 * @…

フロントエンドの開発時にESLintやPrettierなどのnpmパッケージを使うほど大きなプロジェクトではない（もしくは使うことができない）環境でも簡単に使用できるwebサービス一覧です。 コード変換 Prettier prettier.io jsのコードの整形を行なってくれるサー…

テキストを1文字ずつアニメーションさせるときに手動でspanを囲わないで行いたいときに 成果物 See the Pen テキストアニメーション by miwa_shuntaro (@miwashutaro0611) on CodePen. 行ったこと 1. HTMLの作成 .txt: テキスト全体 .line: 改行させるための…

backdrop-filterとは 要素の背後に対してぼかしなどの処理を入れることができるプロパティ。 APPLEのTOPページのheader部分で使われているものになります。 サポート状況 2019年12月10日の状況 参考: https://caniuse.com/#search=backdrop-filter 実装 基本…

iosでモーダルの高さを100vhにしたときに下のコンテンツが上手く表示されなかったので、そのときの対応したことのメモ jsでの高さ取得については今回は省略します。 実際にどんな状態か テストサイト See the Pen modal-viewport-ng by miwa_shuntaro (@miwa…

色の取得をしてくれるもの webサービス XDプラグイン 基本的な書き方 css 通常 :root { --blue: #00f; } .className { color: var(--blue); /* 青色 */ } scss 通常 $blue: #00f; .className { color: $blue; // 青色 } パレットを使ってそこで管理 $palette…

cssを作っていく上で便利そうなジェネレーターメモ。 図形 CSS三角形作成ツール url : http://apps.eky.hk/css-triangle-generator/ja 使い方 左側の「方向」や「サイズ」を変更 右側の「CSS」の部分に書き出されるので、それをコピーして使う 吹き出し作成…

Variable Fontとは 一つのフォントから複数の太さや幅などいろいろなものを変更できるフォント。 Variable Fontについていろいろと試すことができるサイト https://play.typedetail.com/ https://v-fonts.com/ ブラウザのサポート状況 https://caniuse.com/#…

codepenで自分がいいと思ったものを貼り付ける 主に参考にしているサイト photoshopvip.net photoshopvip.net cssのみですりガラス See the Pen CSS - Frosted Glass by Kyle Wetton (@kylewetton) on CodePen. ページトップボタンでどのくらいスクロールし…

IsometricSassを使うとcssのみで3D表現できるので、それをいろいろとさわってみる。 参考url一覧 github github.com やっていることの参考url IsometricSass 行ったこと 事前準備 HTML : html CSS : sass（isometricがsassを使っているので、) sassビルド : …

html系 html整形ツール htmlをpugに変換 pugからhtmlに変換 HTMLからCSSのclass名を生成 css系 css整形ツール cssをscssに変換 CSS三角形作成ツール イージングチェック1 イージングチェック2 box-shadowジェネレーター text-shadowジェネレーター shadowやt…

基本的に @media screen and (max-width: 767px) { /*なにかの効果*/ } で呼ぶことができる。 ↑の呼び出しを毎回使うのも面倒なので、scssなら @mixin sp-only { @media screen and (max-width: 767px) { @content; } } みたいな感じでmixinにしておけば @in…