とあるLPの制作現場 - Qiita
やりたいことはWebpackだけでも実現できますが、今後ページが増えていくことを考えるとgulpを使用したほうがスッキリ書けそうなので、gulpとWebpackを併用しました。最近gulpの名前をめっきり聞かなくなりましたが、元気にしているだろうか。 Webpackとgulpの使い分け、あるいは共存 Webpack webpack is a static module bundler for modern JavaScript applications. https://webpack.js.org/concepts/ 色々なファイルをまとめて、モリモリなJSファイルを出力してくれる。BabelやSassなどのローダーを設定するだけで、いい感じに変換してくれる。プラグインを使えばHTMLやCSSなどのファイル出力もできます。 gulp gulp is a toolkit for autom
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
Yahoo!ニュース月100億PVのジレンマ～マイナーブラウザとどう付き合うか
写真：アフロ こんにちは、「Yahoo!ニュース」のHTMLやCSSのコーディングを担当している吉澤です。 今回は、「Yahoo!ニュース」ブラウザ版のコーディングをするにあたって気をつけている点などに触れてみたいと思います。 まずは、現在、PC版「Yahoo!ニュース」にアクセスしている方々がどんなブラウザを使っているのかを紹介します。 ご覧のように、Internet Explorer 11からのアクセスが一番多く、次いでGoogle Chrome、そしてInternet Explorer 8といった順番となっています。 1年間の主要ブラウザシェアの大まかな推移はこのようになっています。 Windows XPのサポート終了の影響で大きな動きがあったものの、ここ数ヶ月は安定した推移で動いているのがわかります。Internet Explorerについては最新版へのアップデートが緩やかに進行し
Webパフォーマンスにおけるイニシャライズとランタイム
Webフロントエンド・パフォーマンス 思考整理系。 Webフロントエンドにおける3要素として、過去のセッションでは下記の3つを中心に紹介していました。 通信コスト - Networking 描画コスト - Rendering 計算コスト - Computing これらの問題は複雑に絡み合い、時として相反する関係をとります。例えば、通信コストを減らすために、視覚表現を画像からCSS3に置き換えたら、描画コストが高くなってしまいスクロールが重くなった、なんてケースは頻繁にあるでしょう。 理解の問題 この3つのコストは確かにパフォーマンスに影響を与える要因であります。しかし、その要因がWebフロントエンドのページライフサイクルにおいて、どこで影響を与えているかは表してくれません。 要因がどのような影響を及ぼしうるかという基礎的な理解と、パフォーマンスの問題に取り組むための切り口としての理解は、そ
iOS 8 に Apple の HTML5 への愛を見た « 株式会社ゼノフィ
先週アップルが発表した iOs 8 のリリースに、私たちは非常に興奮しております。iOS 8 の正式リリースを手にして数日しか経っていませんが、いち早く世界中の Web 開発者コミュニティに最新のアップルのリリースについて徹底的にお伝えしたいと思っています。もちろん数週間、数ヶ月後にはここではカバーできなかった項目が発覚するのは承知ですが、既に分かっていることを少しでも共有できたらと思っています。 この記事は、今後iOS 8 がアップルのデバイスのベースラインとなることを見越して、HTML5 の現状を技術解析したものです。去年 iOS 7 にも似たようなレビュー記事を Web 開発者のために書きましたので、気になるかたはそちらもご覧ください。 iOS 8 の新機能は HTML5 開発を進めます 今回のアップグレードで加えられた機能について見ていきましょう。 Source: caniuse.
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで固定比率レイアウト - @yoshiko_pg
まだ中央寄せで消耗してるの？ - @yoshiko_pg
Web制作 W3G
DevDocs
短期間＋大規模ゲーム開発でも破綻しないHTML・SCSS