フォントや画像をvwで指定するmixin - レスポンシブしやすい設計方法
今回はフォントや画像をvwで指定するmixinについて紹介します。ブラウザサイズに応じてサイズが可変できるので柔軟なレスポンシブが可能です。 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.52.1 フォントや画像をvwで指定するmixin vwで指定するためには、px数値をvwに変換する必要があります。そのためにSassのfuctionとmixinを使います。 mixinに書くこと vwの指定をするために、以下のmixinを書きます。 //pxをvwに変換するfunction @function _get_vw($size, $viewport: 375) { $rate: calc(100 / $viewport); @return $rate * $size * 1vw; } //フォント用のmixin @mixin font
QRコード作成｜QRの解析｜クーポン発行 無料｜商用利用可｜クルクル マネージャー
QRコードの無料作成、お店を利用するお客様へクーポンや情報配信などの販促ができるサイトです。
【Nuxt.js】imgファイルの指定方法について - Qiita
Nuxt.jsとVuetifyで画像の指定方法について色々と詰まったので今回はそのことについてまとめてみました。 画像の格納場所 Nuxt.jsには画像ファイルを「assets」と「static」のどちらかに格納することができます。 それぞれの格納場所によって指定方法が異なります。 「assets」からの指定方法 assets配下のファイルを使用する場合は「~/assets」を指定します。 「~」（チルダ）をつけることが普通のHTMLとは異なり、これがないと表示されません。 「~」の代わりに「@」（アットマーク）でも表示されました。 公式ドキュメント内で書かれているようにCSSでエイリアスを参照する場合は注意が必要です。 アセット Warning: Nuxt 2.0からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし
【Nuxt.js】サイト構築前にやること - Qiita
静的サイトを作成する際、create-nuxt-app（プロジェクト作成）後に行う環境設定を備忘録としてまとめています。 都度、更新・変更するかもです。 目次 ESLintを追加する SASS（SCSS）の使用 共通JSの読み込み html/head/bodyタグの編集（サイト共通） ローカルサーバーのホスト・ポート番号を変更 build設定 画像の保存先について ESLintを追加する 全てのJavaScriptとVueファイルをlintします。除外したいファイルは.gitignoreに定義します。 Nuxt.jsではESLintの設定は.eslintrc.jsonではなく、.eslintrc.jsで設定します。 各種パッケージをインストール。 module.exports = { root: true, env: { browser: true, es6: true, node: tr
[jQuery] トップへ戻るボタンの実装サンプル
画面右下によくある「 Page Top 」とか「ページトップへ戻る」ボタンの jQuery を使ったコードサンプル。 スクロールしたらボタンが表示されるバージョン。 ボタンに FontAwsome を使ったりデザインによって CSS が変わるが、 jQuery で作成する動きの部分は共通して使える。 基本的なコード 「 TOP 」とだけ書かれたボタンのサンプルコード。 四角形に文字列を表示しているだけなので、CSS もシンプル。 デモ See the Pen Top Page Button Demo by AgoPeanuts (@AgoPeanuts) on CodePen. HTML jQuery ライブラリを読み込む。 head タグ内に下記コードを書く。このコードは CDN からロードさせている。 <script src="https://ajax.googleapis.com/a
![[jQuery] トップへ戻るボタンの実装サンプル](https://cdn-ak-scissors.b.st-hatena.com/image/square/ce3ffe521c95897fec1cbecf9ad0ed5540e5fc4b/height=288;version=1;width=512/https%3A%2F%2Fagohack.com%2Fwp%2Fwp-content%2Fuploads%2F2019%2F08%2Fjquery-logo-200.png){kind=logo}
[jQuery] トップへ戻るボタンの実装サンプル
画面右下によくある「 Page Top 」とか「ページトップへ戻る」ボタンの jQuery を使ったコードサンプル。 スクロールしたらボタンが表示されるバージョン。 ボタンに FontAwsome を使ったりデザインによって CSS が変わるが、 jQuery で作成する動きの部分は共通して使える。 基本的なコード 「 TOP 」とだけ書かれたボタンのサンプルコード。 四角形に文字列を表示しているだけなので、CSS もシンプル。 デモ See the Pen Top Page Button Demo by AgoPeanuts (@AgoPeanuts) on CodePen. HTML jQuery ライブラリを読み込む。 head タグ内に下記コードを書く。このコードは CDN からロードさせている。 <script src="https://ajax.googleapis.com/a
ポップアップ表示のYouTubeでも関連動画を操作したい【Magnific Popup】 | 東京のホームページ制作 / WEB制作会社 BRISK
YouTubeの動画をサイト内に埋め込むとき、関連動画を非表示にしたり、同じチャンネルの動画のみを表示させたりしたいといった要望が出てくることも多いですよね。 プラグインを使用してポップアップで表示している場合、そういった関連動画の操作が意外に難しいことがあります。 本記事では、Magnific PopupというjQueryプラグインを使ってYouTubeをポップアップ表示させたときの関連動画の設定についてご紹介します。 Magnific PopupMagnific Popupのソースは上記のサイトから入手できます。 詳しい実装方法についてはこちらの記事をご参照ください。 Magnific Popup を使ってみる 関連動画を非表示にできる？そもそも関連動画を非表示にできるのか、という点についてですが、以前はURLの末尾に?rel=0というパラメータを付けることで関連動画を非表示にできまし
Magnific Popup レスポンシブデザインにも対応しているモーダルウィンドウ用jQueryプラグイン
TOPjQuery Magnific PopupでjQueryのモーダルウィンドウを実装する方法 Magnific PopupでjQueryのモーダルウィンドウを実装する方法
時間帯によって処理を条件分岐させたい時のjQueryのサンプルコード | 福岡のホームページ制作会社 | シンス株式会社
キャンペーンサイトなどで時間帯や日程によって、Webページの背景を変えたりアニメーションの動きを変えることが求められるケースがあります。 今回はそんな時に役立ちそうな、JavaScriptのDateオブジェクトを利用した条件分岐の書き方をご紹介します。サンプルではjQueryを利用していることが前提になっています。 時間帯によって処理を分岐させてみるこちらはシンプルな条件分岐で処理を変更するコードです。 $(function(){ var now_hour = new Date().getHours(); if ( 0 <= now_hour && now_hour <= 6 ){ $('body').css('background','red'); } else if ( 7 <= now_hour && now_hour <= 12 ) { $('body').css('backgro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
