WEBサイト制作でコーディングを行う際、フォントサイズを一般的な単位「px」や、「em」「rem」「%」等で指定することが多いと思います。 レスポンシブWEBデザインの案件でコーディングを行うときは、基本的にメディアクエリを使用してブレークポイント毎にフォントサイズを振り分けて記述するのが基本になっていると思います。 「メディアクエリの記述で振り分けを行わずに、ビューポートの幅に応じてフォントサイズを可変に対応する方法はないのか?」という疑問をもっていましたが、意外と知らないフォントサイズの単位、「vw」「vh」という書き方でビューポートの可変に柔軟に対応できるので、簡単に説明させていただきます。 vw・vhって何?? vw・・・viewport width。ビューポートの幅に対する割合です。 vh・・・viewport height。ビューポートの高さに対する割合です。 画面の横幅全体を
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分HTMLCSSHTML5CSS3 ーーーーーーーーー 追記 2020年10/15 この歳になるとこういう記事のアプトプット怖いですね。。 とりあえず周り見てると、こうやってる人多いです html,body{ font-size:62.5%; } って書いてあげて そうすると 1.0rem が 10pxになるみたい。 そんで例えば24pxにしたい場合は2.4remって指定してあげるみたい。 以上。 ーーーーーーーーー いまだにレスポンシブ怖い、、、、。 なぜなら%とかemとかremのフォントサイズ指定があるから。。。 これらをなんとなくでしてる人。 途中で引き継いだ案件とかでpx以外が指定されててビビってしまった 僕とあなたへ捧げます。 😭 大前提 CSSのフォントサイズ指定方法は次の2つ
現代的JavaScriptおれおれアドベントカレンダー2017 – 02日目 かつて変数宣言といえば var でしたが、今なら他に let とconst も使えます。 基本的な使い方は一緒。 要約 できるだけ const を使おう const が適さない場面では let を使おう var を積極的に使うべき場面はない let と const はブロック { ~ } がスコープになる var は関数 function(){ ~ } がスコープ const の参照先は変えられないが中身(オブジェクトのプロパティ等)は変えられる それでは以下、こんなに長くなるはずじゃなかった記事です。 var vs let 変数のスコープ(有効範囲)が異なります。 var は関数単位のスコープになりますが、 let ならブロック単位のスコープになります。 例えばこんなやつ。
JavaScriptはオブジェクト指向言語の一種です。オブジェクト指向を意識してコードを書くことで、より効率的なプログラムを書くことができるようになります。 しかし一方で、オブジェクト指向というものは複雑で、簡単には会得できません。そこで、この記事では要点だけをかいつまんで、オブジェクト指向について説明したいと思います。JavaScriptを使って、オブジェクト指向を学んでみましょう。 オブジェクト指向って難しい? オブジェクト指向の深い世界 「オブジェクト指向」。名前だけはよく聞きますし、プログラミングの技術であることだけはわかっています。ですが、その謎を解くためにGoogleで検索してみたり、Wikipediaのページを見てみたりしても、なかなか小難しいことが書いてあり、哲学書を読んでいるときと同じような眠さに襲われます。 ウェブだけでなく、書籍についても同様です。例えば、今、この記事
現代的JavaScriptおれおれアドベントカレンダー2017 – 04日目 JavaScriptはオブジェクト指向プログラミング言語の一種ですが、「クラスベース」の他言語と異なり「プロトタイプベース」だと言われています。クラスの代わりにプロトタイプ prototype を使ってあれやこれやしてきました。 そんな我が道を行くJS君でしたが、やっぱり寂しかったのか、クラスの仕組みが導入されました。継承もできる。使っていきましょう。 使い方 ざっくりこんな感じ。 class Sushi { constructor(neta) { this.neta = neta; } get name() { return this.neta; } make() { console.log(`Hey ${this.name} o-match!`); } } const tuna = new Sushi('tu
Twitterで仲良くなったスダさんという方を題材に、この1年間 #今日のスダクリエイト というハッシュタグで趣味のコンテンツを作ってきました。自分が書きたいプログラムを定期的に書くことで、業務で扱う以外の技術の勘が鈍らなくなり、作ることの喜びやモチベーションが向上し続けました。 本記事では、ES2015+、TypeScript、SVG、WebGLなどを使ったインタラクションをピックアップし、その技術的な工夫点とともに紹介します。 SVG、fetch APIで泡アニメーション SVGの線や塗りなどの形状をJavaScriptでコントロールしようとするとSVGのインライン展開が必要ですが、HTMLのコード量が増えてしまいます。HTML内にSVGコードは書かず、Fetch APIを用いてリソースをダウンロードしてパースし、CSSアニメーションを加えたデモです。 XHRに代わるリソース取得API
どうも、まさとらん(@0310lan)です! 今回は、自分好みのマップをブラウザ上でカスタマイズしたり、JavaScriptから自在に制御可能な地図サービスのご紹介です! データを取り込んでマッピングしたり、プラグインによる拡張も可能で自分のWebアプリやサービスなどにも簡単に組み込めるスグレモノです! 【 Mapbox Studio 】 ■「Mapbox Studio」の使い方 それでは、まず最初に「Mapbox Studio」の基本的な使い方から見ていきましょう! 初めての人は無料のユーザー登録が必要なので、サイトのトップページにあるボタンをクリックします。 好きなユーザー名・メルアド・パスワードだけで、簡単に登録ができます! 登録後は、Webページにマップを表示させる簡単なチュートリアルが始まるので、試しにやってみましょう! 表示された画面にある「JS」の項目をクリック! 左側の「C
こんにちは、@nazomikanです。 この投稿はLifull Advent Calenderの1日目の投稿になります。 本記事はざっくり言うとmapboxすごいよって話です。 ※言うまでもなく素晴らしいgoogle maps apiと比較することでmapboxを深掘りするのが目的で、決してgoogle mapsを貶めるつもりの記事ではないことをご理解ください Mapboxとは 地図サービスです。 GoogleMapsと近い感じでJSやnative appのsdkが公開されてていい感じに開発できるやつです。 データソースはopen streatmapになります。 Google Mapsとの違い タイルのレンダリングについて google mapsは地図をサーバサイドレンダリングして256x256の地図タイル画像として配信してタイル上に配置していきます。 一方でmapboxは地理情報のvec
フロントエンドからサーバー側まで、全てを1人で開発できる「フルスタックエンジニア」を3カ月103万円で養成する講座「コードクリサリス」が注目を集めている。講座を提供するのはコードクリサリスジャパンだ。即戦力となるITエンジニアを育成することから、日本の大手ITベンダーや電気メーカー、自動車メーカーなどが2018年から、企業の研修としてコードクリサリスを受講させる検討を始めている。 コードクリサリスが、ITエンジニアを育成の目的とした他の研修と異なるのは、受講者が企業を辞めたり、休職したりして参加することを前提にカリキュラムが組まれていることだ。受講者は平日の午前9時から午後6時まで、東京・六本木にあるコードクリサリスの教室に通う必要がある。授業に加えて、1週間で15時間分程度の宿題が出る。3回の遅刻で1日分の欠席とみなされ、3日の欠席で除籍になるという厳しさだ。 こうした短期間に高い負荷を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く