たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
スマホ向けサイトをアプリっぽく見せるために半年間頑張ったことをまとめる - Qiita
この記事は リクルートライフスタイル Advent Calendar2018の20日目の投稿です。 はじめに この記事では スマホ向け web ページをアプリっぽく見せるための Tips を多く紹介します。 (CSS / JS / jQuery / React / WebGL の事例を紹介します) （注） React 環境でのサンプルコードが多めですが、実装方法はどの環境でも変わらないと思います。ライブラリも同種のものが存在しているはずです。 最近だと、僕の大好きなアプリで味わった体験を、どうすれば Web で再現できるかなーって考えていました。そうしたネイティブアプリをWebで模倣したときに、知ったTipsやテクニックをまとめていきます。 この記事に書いてあること アプリっぽい体験はどのようなものがあるか CSS / JS / jQuery / React / GLSL を利用したネイテ
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
Webブラウザの作り方 - Qiita
この記事は何？ ほとんどタイトル通りです。 順番に読み進めていけば簡単なWebページが表示できるレベルのWebブラウザを作ることができるように執筆していく予定です。 またアルゴリズムだけをなるべくわかり易く解説していきたいので、記事内で紹介するコードは誰でも読める程度の擬似コードです。 自分で実装したい方は、面倒かもしれませんがそれぞれの言語に翻訳してください。 必要な知識としては: HTML/CSSが困らない程度に読める やる気 これだけです。 (あとこれはただの宣伝ですが、個人的にWeb ブラウザを作ってるので(http://github.com/maekawatoshiki/naglfar) スターをつけてもらえると喜びます) いろいろとパースする Webページは基本的にHTMLで書かれていますね。あとCSSも。 HTMLもCSSもそのままではただの文字列であって扱いづらいので、パー
HTMLでスライドを作成してLTしてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。 今回はディレクターならよく作成するスライドについてお話しします。スライドといってもPowerPointやKeynoteでつくるのではなくHTMLでつくります！ それでは、HTMLでスライド作成し、スライドをGitHub Pagesというサービス上に公開するまでの方法をご紹介したいと思います。 今回のゴール 先に今回のように私が作成したスライドを以下から確認してみてください。 https://lig-komatsu.github.io/statistics_01/#/ お作法さえ押さえれば簡単にスライドを作成することが可能です。 用意するもの 好きなエディター ライブラリ取得 GitHubアカウント とりあえずスライドだけつくりたい！ という方はGitHubアカウントを取得する必要はありません。 Gitを使ったことがなくてもスライドは作成できる
Web Developer Roadmap 2018が出たので2017年版と比較してみる - Qiita
のようなイメージではないでしょうか？ (灰色と橙色の分け方は作者のおすすめ度（匙加減）な気もしなくないんですが） はい…まさにこの通りですのでこれを参照頂ければなと思います。隅まで目を通していないのがバレますね。 では早速本題 🚀Introduction これが2017版 2018版 左の奴らが軒並みチョーヤバいです。雑だな！ まあここは導入みたいなもんなんで深くは追及しません。最早OSSや仮想鯖、クラウド環境化での開発は必須なんだってことが言いたいんだと思います。（適当） デザインパターンってのはGoF(Gang of Four)というおじさん４人がソフトウェア開発に取り入れたオブジェクト指向プログラミングにおけるこう書くとオブジェクト指向的にええと思う！っていうパターンの集まりです。全23種、知らず知らずのうちに使っているものも多いです。 なんで今追加されたのか僕にはよくわかりません
QiitaのCSS構成2017 - Qiita
この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年では プリプロセッサーとして Sass (node-sass) を使っています。 プリプロセッサーとして PostCSS を使わなくなった最大の理由は @apply ルールが仕様から落ちた ことです。@apply は Sass でいう引数なしの mixin みたいなもので、Chrome の Canary では実装されていた時期がありましたが、消えてしまいました。 おそらく CSS Nesting Module や CSS Extend Rule も落ちると思
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA
みなさんは、CSSを書くときに管理のしやすさを意識していますか？ CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設
小〜中規模サイトのフロントエンド・コーディング規約 CSS・JavaScript編 - Qiita
2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約 CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │ ├ scss │ │ ├ lib ... 外部ライブラリなど │ │ ├ sprite ... spritesmith などで生成したファイル │ │ ├ foundation (base) ... 変数や mix
個人的フロントエンド開発環境2017 - Qiita
2017年版、オレオレフロントエンド開発環境です。 前提条件 ここでいうフロントエンド開発とは、ペライチ、もしくは数ページから数十ページのWebサイトのこと サーバサイドとやりとりなどはあまりなく、ランディングページやキャンペーンサイト、コーポレートサイトをよく実装する 構成 まず、ざっくりと構成です。 HTMLはEJSで書いてコンパイル CSSはSass(SCSS記法)で書いてコンパイル MixinライブラリはBourbon JSはES2015で書いてBabelでコンパイル Browserifyでバンドルする タスクランナーはGulp パッケージマネージャはnpm 省略記法に疲れた つい最近まで、HTMLはPug(Jade)で、CSSはStylusで書いてました。省略記法で書ける楽でのええわ〜、省略記法で書いてる俺カッコいい！と思ってましたが、なんだかだんだん疲れてきた。 JadeとSt
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
CSSのfloatを使わずに、Flexboxを使用してwebサイトを作った話 - Qiita
今回新規事業のサービス立ち上げに伴い、下記webサイトを作成しました。 子供向けプログラミングスクール スタートプログラミング このサイトにはfloatプロパティを一切使用していません。 Flexboxプロパティのみを使用し実装しました。 今回はこのFlexboxについて簡単にまとめてみました。 Flexboxとは？ Flexbox(可変ボックス)とはCSS３から登場したレイアウトモジュールになります。 横並びを実現するだけではなく、上下中央揃えやレスポンシブ化も簡単に実装できます。 *MDNのflexbox説明ページ boxを並べてみる 実際にこの2つのボックスを並べてみました。 ソースコード <div> <ul class="parent"> <li class="children">赤</li> <li class="children">青</li> </ul> </div> <st
Webデザイナーが一度は読んでおくべきおすすめの本13冊 - LITERALLY
先日、読者の方から「Webデザイン習得するにあたって参考にした本は何か」という問い合わせを頂いたので、回答記事を書こうと思う（遅くなってしまいすみません）。せっかくなので、Webデザインの専門知識に関する本だけでなく、いつもインスピレーションをもらっている本も合わせて紹介しようと思う。参考程度にどうぞ。 以下の3つのジャンルについて分けて紹介。 WEBデザインを学ぶための本 デザインセンスを磨くための本 インスピレーション刺激本 WEBデザインを学ぶための本 1 インターネット技術の絵本 振り返れば、いちばんはじめに読んでおけばよかったなと思うのが、この絵本シリーズ。Webデザイン含め、プログラミングを始めた人は「Webデザインがどうやってインターネットに公開され、どうやって人の目に触れるのか」や「今の作業の全体における立ち位置」がいまいち見えなくてモヤモヤすることが多いと思う。HTMLと
ここ数年前から2015までのモダンフロントエンドを総まとめしてみた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 (ここではフロントエンドというのを、ざっくりとHTML/CSS/JavascriptをつかったWeb技術のことをいうことにします)。 目次 Javascriptフレームワーク React.js Angular.js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
