Web技術

Web技術

Tailwind CSSでデザインの限界を超えろ!Bootstrapを超えるカスタマイズ性

Tailwind CSSは、直感的なユーティリティクラスを駆使して、あなたのウェブサイトを次のレベルへと引き上げることができます。Bootstrapと比較して、Tailwind CSSは以下のようなメリットを提供します。無限のカスタマイズ性...
Web技術

googleフォントでNoto Sans JPをwebサイトで使う方法

webサイトでgoogleフォントを使う方法は簡単以下2ステップステップ1htmlファイルのheadに以下のソースを追加する<link rel="preconnect" href="<link rel="preconnect" href="...
Web技術

【CSS】:has()擬似クラスが全てのブラウザでサポートされた

/* figcaptionがあるfigure要素を選択 */figure:has(> figcaption) {}/* svgの直接の子孫がないa要素を選択 */a:not(:has(> svg)) {}/* inputの直接の兄弟があるl...
Web技術

【css】背景画像を右から左に動かす方法(ループ)

.bg { width: 100%; height:256px; background: url("../img/bg_slides.png") repeat-x; background-position: 0 0; background-...
Web技術

【swiper.js】最新バージョンのswiper.jsでページを外に出す方法

最新バージョンのswiper.jsでページネーションを外に出す方法は簡単。以下のcssを追加するだけでOK.swiper-pagination {  position: relative !important;  margin-top: 2...
Web技術

【html】HTMLの小技

今回は実務でも使えそうな小技を紹介accept属性<input type="file" accept=".jpg,.jpeg,.png">alt属性<img src="sample.png" alt="美しいサンセット">autocompl...
Web技術

【Vue.js】vue.jsでモーダルを作る方法

モーダルは、Webアプリケーションでポップアップウィンドウを表示するための重要な要素です。Vue.jsを使用すると、モーダルを簡単に作成できます。この記事では、Vue.jsを使ってモーダルを作成するステップバイステップの方法を紹介します。初...
Web技術

【CSS】スクロールを促すアニメーション作成方法

See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
Web技術

【css】CSS変数で配列のように複数の値を扱えるようにする方法

See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
Web技術

【デザイン】デザイン業務に使えるサイト

SlamBlurr WallpapersResume TemplatesPhone Clay Mockup