ウィンドウサイズに応じて倍率を自動調整する.js - Qiita
はじめに こんな方に読んで欲しいです。 スタイルを作成する時に 色んなデバイスを考慮するのがめんどくさい レスポンシブなフレームワークを使っても、デバイスサイズによって改行位置とかが微妙にずれてきになる PCとSPでカラム数を変える必要がない 1カラムを想定している 解像度が高いPCだとコンテンツに対する余白の割合が多すぎて気になる この記事で紹介する方法を用いると 固定幅のデザインを1つ作成するだけでOK どんなデバイスでも同じ見栄えになる それでは… 仕組み 仕組みはっても単純です。 例えば幅1000pxのページをデザインしたとします。そしたらjsがウィンドウサイズに応じて適切な倍率を計算して設定してくれます。 ウィンドウサイズが1000pxの時は何もしない ウィンドウサイズが2000pxの時は200%にする ウィンドウサイズが500pxの時は50%にする 値は極端ですが、イメージでき
jsやcssファイルのバージョン化
laravel-mixの続きです。まだ続きそうなので、連載ものにしました。右にリストされているCATEGORIESのフロントエンドの開発です。 今回は、laravel-mixで作成されたjsやcssのファイルがどのようにbladeで参照されているかにフォーカスします。 asset() 再びレイアウトのbladeファイルの中身を以下に掲載します。 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" conte
CakePHP2.0.3でJSファイルやCSSファイルを読み込む
CakePHP2で外部JSファイルとCSSファイルをHEADタグ内で読み込む方法です。 CakePHP1.2やCakePHP1.3と多少変わっています。 最初にwebrootフォルダのフォルダにCSSファイルとJSファイルを入れておきます。 /app/webroot/css → CSSファイル /app/webroot/js → JSファイル 次に、レイアウトファイルのHEADタグ内で$scripts_for_layout変数を出力します。 /app/View/Layouts/default.ctp 次にViewファイルの上辺りで以下の内容を記述します。 以下の例ではscript1.jsとscript2.js、import.css、sub.cssが読み込まれます。 読み込みたいファイル名は合わせて修正してください。 (/app/View/ControllerName/action_name
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
JavaScriptでCSSのプロパティを削除する（IEのfilterでClearTypeが無効になるバグ対策）｜TechRacho by BPS株式会社
baba 高校時代から趣味でプログラミングを始め，そのままずっとコードを書いています。2010年SFC卒業，在学中にBPS入社。ゲームなどの趣味プログラミング，Webシステム，スマホアプリ，超縦書エンジン(C++/Chromium)，Webフロントエンド(TypeScript/React)などを主にやってきました。最近は自社製品(超シリーズ，くんシリーズ)の開発に関わるお仕事が中心です。管理業務もしますが，ゆとりプログラマーなので気楽にPCに向かっているのが好きです。 情報処理技術者試験(16区分 + 情報処理安全確保支援士試験)，技術士(情報工学部門)，中小企業診断士、Ruby Programmer Gold，AWS Certified Solutions Architect - Professional，日商簿記2級，漢検準1級。情報処理技術者試験 試験委員(2021-)。 babaの
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
[CSS]IEで、min-widthやmax-widthを実現する方法
CSS-Tricksで、IE用に「expression」を使用して、min-width、max-widthを実現する方法がエントリーされていました。 The Perfect Fluid Width Layout デモページでは、最小幅780pxを維持しつつ、最大幅1280px以上になると残りの箇所は背景画像が表示されるようになっています(参照：キャプチャ画像)。 min-width、max-widthの箇所は、下記のように記述されています。 #page-wrap{ background: white; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 12
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
