[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
forked: 光の粒 - jsdo.it - Share JavaScript, HTML5 and CSS
// forked from kamakura's "forked: 光の粒" http://jsdo.it/kamakura/6B1Z // forked from haii's "光の粒" http://jsdo.it/haii/wwTT var c2d; // Canvas2dのインスタンス var rgb = Canvas2d.rgb; var rgba = Canvas2d.rgba; var ps = []; // 3次元座標点の配列 var t = 0; // 経過時間 var bgStyle; // 背景スタイル // min以上max未満のランダムな数を生成 function r(min, max) { return Math.random() * (max - min) + min; } // 背景スタイル作成処理 function createBgStyle() {
JavaScriptで要素の位置座標を取得する方法
2017/06/22 要素の位置座標を取得するには、getBoundingClientRect()というメソッドを利用します。 サンプルコード要素の位置座標を取得するには、対象要素のgetBoundingClientRect()というメソッドを利用します。このメソッドで取得できるのは「ビューポート(画面内)」における位置なので、スクロール量によって値が変わります。 // 要素の位置座標を取得 var clientRect = targetElement.getBoundingClientRect() ; // 画面の左端から、要素の左端までの距離 var x = clientRect.left ; // 画面の上端から、要素の上端までの距離 var y = clientRect.top ;「ページ全体」における位置を取得するには、先ほどの値に現在のスクロール量を加えましょう。 // ページ
脱jQuery .height() .width() .offset() .scrollTop() | q-Az
大きさ関係の jQuery のネイティブ書き換えの紹介です。 詳しくは 脱jQuery その1 をご覧ください。 height、width 関連だけでもそれなりに色んな種類があるので整理しつつ行きます。height()、width() に関してはこのページでは「設定」のみ扱います。取得する場合は色々ややこしい話があるので、次回の記事で詳しく場合を分けて説明します。 .height()（高さ設定） $("#main").height(50)書き換え JavaScriptdocument.getElementById("main").style.height = "50px".css() と考え方は同じです。「高さ」を設定するので style を使います。JavaScript の方は "50px" と「px」の単位が入っていることに気をつけます。jQuery の方はあっても無くても自動でやって
細かすぎるけど伝わって欲しいlodash.jsの話 - KAYAC engineers' blog
ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsというライブラリについて、掘り下げた紹介をさせていただきます。 lodash.jsとは https://lodash.com/ A modern JavaScript utility library delivering modularity, performance & extras. つまるところ、 ユーティリティー（なんか便利）関数を集めたやつ めっちゃかるい という特徴を持つライブラリです。近頃のフロントエンドの流行りであるThree.jsだったり、Vue.jsだったりといったものに比べると 地味 です。非常に地味ですが、個人的
lodashでよく使う関数まとめ - matsukaz's blog
lodash は underscore.js とほとんど同じ機能を持つユーティリティライブラリです。 似たような関数名があったり、破壊的メソッドだったりして、正しい使い方をちょいちょい忘れてしまうので、よく使う関数を逆引き形式でまとめてみました。日本語の記事もあんまりなかったので紹介の意味でも。 他にもいろいろ機能はあるので、気になる人は lodashのdocs を見ると良いかと。 Array操作 データ取得 2つの配列間で、一致しない値だけ取得する _.difference(array, array) _.difference([1, 2, 3, 4, 5], [5, 2, 10]); // → [1, 3, 4] 複数の配列の積集合（共通する値）を取得する _.intersection(array...) _.intersection([1, 2, 3], [5, 2, 1, 4],
配列 | JavaScript プログラミング解説
要素へのアクセス インデックスをブラケット表記法で指定することで、配列の要素へアクセスできます。 a[ 0 ]; 識別子の先頭に数字を指定することは認められないため、これを a.0; のようには記述できません。 インデックスの記述方法 インデックスは内部的に文字列として処理されるため、その記述方法によっては予期せぬ結果を返すことがあります。 var a = [ 1, 2, 3 ]; alert( a[ 1 ] ); // 2 alert( a[ '1' ] ); // 2 alert( a[ 01 ] ); // 2 alert( a[ '01' ] ); // undefined このことは、これらのインデックスの記述を文字列に変換してみることで、その違いを確かめられます。 alert( ( 1 ).toString() ); // '1' alert( ( '1' ).toString
JS：配列の正しいソート方法 | ARTICLE | goma
配列のソートで困ったことはありませんか？実際たまにしか使わないので、自分の備忘録を見返しています。 ということで、少し説明を加えて備忘録をシェアします。 説明はいらないから、必要なことだけ知りたい方は目次からご希望の箇所に飛んでください。 .sort()の基本まず、.sort()の構文は以下になります。 arr.sort([compareFunction]) 引数compareFunctionには、ソート順を定義する関数を指定します。省略された場合、配列は各要素の文字列比較に基づき辞書順にソートされます。Array.prototype.sort() - JavaScript | MDN ここで言う「各要素の文字列比較に基づき辞書順にソート」ですが、文字列をUnicodeへ変換した時の数値です。 引数を持たせない場合の.sort()では単純に文字をUnicodeに変換した値でソートしてしまう
JavaScript つい忘れてしまう配列のソート方法 - Qiita
var a = [5,3,9,1,10] a.sort(function(a,b){ if( a < b ) return -1; if( a > b ) return 1; return 0; }); 結果:1,3,5,9,10 var a = [5,3,9,1,10] a.sort(function(a,b){ if( a > b ) return -1; if( a < b ) return 1; return 0; }); 結果:10,9,5,3,1 //フルーツの名前と価格。価格でソートする var fruits = [ {name:"apple",price:100}, {name:"orange",price:98}, {name:"banana",price:50}, {name:"melon",price:500}, {name:"mango",price:398} ]
PHPからJavaScriptに変数を渡すまとめ - Qiita
【訂正版】 PHPからJavaScriptに変数を渡す方法をまとめました。 2015.06.03 基本形を修正しました（コメント欄を参照のこと） 2015.04.21 json_encode()について加筆しました。 2015.04.20 jQuery.data()を使った文字列の取得周りに誤りがあったため修正しました。 2015.04.19 tadsanさんからの指摘を受けてエスケープ周りの記述を修正しました。 基本形 <?php $array = array("hoge" => "fuga"); ?> <script> var array = <?php echo json_encode($array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>; console.log(array); // Obj
AngularJSの2way bindingの仕組みを追ってみた - yo_waka's blog
AngularJSの特徴でもある、モデルとビューの2way binding。 AngularJSの簡単なコードがあるとする。（投稿時点ではv1.2.6） <body ng-app ng-init="message = 'nothing'"> <div ng-controller="SampleCtrl"> <input type="text" ng-model="message"> <br> <button ng-click="clearMessage()">Clear</button> <br> <span>{{getMessage()}}</span> </div> <script> var SampleCtrl = function($scope) { $scope.message = ''; $scope.clearMessage = function() { $scope.mes
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
JavaScriptのprototypeチェーンとはなんぞや - Qiita
はじめに JavaScriptのメソッドなんかをググってる時に、よく以下のようなものを見ますよね。 JSはよくprototypeベースな言語とか言われたりしていますが、prototypeとはなんぞやって疑問に思っていました。 特に今回はその中でも、prototypeチェーンに絞っています。 ※もし間違いがあれば、指摘していただけると助かりますm(__)m すべてのオブジェクトは __proto__ を保持している 以下のコードをブラウザのConsoleなどで実行して見てください。 生成されたオブジェクトdogの中身をconsole.logで確認すると、_proto_というプロパティが確認できますよね。 結論を先に言いますと、全てのオブジェクトは、自動的に __proto__ プロパティを保持しています。 ちなみに、 __proto__ プロパティもオブジェクトです。 __proto__ っ
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
論理演算子「&&」「||」について JavaScriptの基本である論理演算子の && || について、 根本的に勘違いをしていたことに最近気付いたので自戒の意味を込めてここに記します。 論理演算子の使い道 1. お馴染みの使い道「条件処理」 JavaScriptには皆さんご存知の通り論理演算子&& ||が存在します。 それぞれ「AND」「OR」という意味で、条件処理の中で使うことが多い演算子です。 // aとbに0または1を足し続ける // aとbのどちらかが最大値に達すると終了 var a = 0, b = 0, max = 50; // 条件式その１ AND while (a < max && b < max) { // 0または1を足す a += Math.round(Math.random()); b += Math.round(Math.random()); console.l
ECMAScript 6 compatibility table
V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other ⬤ Minor difference (1 point) ⬤ Small feature (2 points) ⬤ Medium feature (4 points) ⬤ Large feature (8 points) Compilers/polyfills Desktop browsers Servers/runtimes Mobile Feature name Current browser ES6 Trans- piler Traceur Babel 6 + core-js 2 Babel 7 + core-js 2 Babel 7 + core-js 3 Closure 2020.06 Closure 2020.09 Closure 2021.08 Closure 20
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
図で理解するJavaScriptのプロトタイプチェーン - Qiita
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
JavaScriptはオブジェクトについて参照渡しだなんて、信じない - Qiita
非同期処理ってどういうこと？JavaScriptで一から学ぶ - Qiita
