Web技術

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
Web技術

【CSS】コメントアウトの使い方

CSSのコメントアウトの使い方。 セクション毎に分けるだけで視認性が上がり、修正の時でも探しやすく保守性が高くなる。これをするだけで他者からの評価は上がります。スニペット登録は必須。 /* (タイトル) ******************...
Web技術

【CSS】フォントサイズを9pxにする方法

通常では表現できないfont-size:10px以下を実装する方法 は以下の通りに実装するとできます。具体的には要素全体を0.9倍縮小させれば実質的に9pxを再現できます。 かなり力技ですが、テキストで対応してほしいと言われた時には使えます...
Web技術

【HTML】改行タグにクラスをつけられる

以下ように記述し、CSSでPCとSPでテキストの改行箇所の調整を行います。 実務の8〜9割は使用することが多いテクニックなのに、意外と参考書に書かれてないので覚えておくとGOOD<br class="pc_only"><br class="...
Web技術

【CSS】実務で使えるdisplay gridレイアウト

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