GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
ここでは、フロントエンド開発の概要について説明していきます。 ＊元記事はこちらです。(英語) この記事でカバーしているものについてSingle-page Apps (SPAs)New-age JavaScriptUser InterfaceState ManagementCoding with StyleTestingLinting JavaScriptLinting CSSTypesBuild SystemPackage ManagementContinuous IntegrationHostingDeploymentSingle-page Apps (SPAs)かつてはサーバーサイドレンダリングという、別のURLを開くごとにページをリフレッシュしてサーバーから新たなHTMLページを送る手法が主流でしたが、最近のSPAsではクライアントサイドレンダリングというものが主流になっています。
レスポンシブデザインのために CSS メディアクエリを使うことが多いと思います。 CSS 側だけで完結したらいいのですが、JavaScript 側でも画面サイズの変更を検知したかったり、画面サイズ以外のメディアクエリ相当のことをしたくなったりすることはありますよね。 画面サイズの変更自体は window に発生する resize イベント (window.onresize イベントハンドラ) で検知できますが、CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。) 参考 : resize | MDN CSS メディアクエリと完全に対応するものではない
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
あるいは親要素があれば。 方法 子要素でdisplay切り替え 親要素でtransition デメリット? HTMLの改変がいるかもしれない デモ https://codepen.io/anon/pen/erxoov 個人的にはCSSのみでどうこうするよりJSかませた方が良いと思う。
expand TOP DS_Store dropbox css3 Media Queries animation baloon1 html OGP default iframe smartphone js Simple Slideshow delay_fadeIn floating menu xml memo Chrome mac_hide_file mi regular expression sublime text 2 user_agent sublime:sass:compass default wordpress calender get_posts rss tmp xml plugins PostgreSQL+WP basic contact7 permalink スマホサイト制作メモ 数字が勝手にリンクされるのをふせぐ <meta name="format-detection"
どうもこんばんは！ 今日は【input type=”file” を画像ボタンに変更する方法】を書きたいと思います。fileアップロードを画像ボタンに差し替え、ユーザビリティを向上させるのが目的です。たまに使いたくなるのでここにメモしておきますね。 通常のファイルアップロードタグ <input type="file"> 通常の状態です。CSSで背景やボーダーを削除するデザイン変更には限界があります。 ですのでjQueryで補完します。 ボタンの準備 ファイルアップロードを画像ボタンに変更 ・HTML <input type="file" id="file_01" class="file"> <label class="file_mask"> <span><!– 画像用spanタグ –></span> <input type="text" id="mask_file_01"> </label>
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
Primer’s design tokens for color, spacing, and typography.
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明
See related links to what you are looking for.
Webアニメーションを高速化するために知っておくべき10のこと（後編） 斉藤 祐也（株式会社リッチメディア） 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
こんにちは、@yoheiMuneです。 今日は、CSS3のTransitionで背景色やpositionなどを変化させた後に、JavaScriptの処理を行う方法をブログに書きたいと思います。 CSS3のTransitionについて CSS3 Transitionは、CSS3 Animationと並んで、Webに動きをつけることのできるCSSのひとつです。 スゴく簡単な設定で、楽しく動きます。詳細は、以下をご覧頂けると幸いです。 - [HTML5] CSS3のTransitionsでJavaScriptなしにHTMLに動きを@YoheiM.NET Transition終了をJavaScriptで検知する Transition終了時を表す「webkitTransitionEnd」イベントを補足する事で、 Transition終了時にJavaScriptを実行することが出来ます。 例えば、id
![[CSS] CSS3のTransition終了時にJavaScriptで処理を行う方法 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/6255f0cd8fcfa7c5149515972c173a23a5d2b2e1/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcold-voice-b72a.comc.workers.dev%3A443%2Fhttps%2Fwww.yoheim.net%2Fimage%2F130.png)
dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
CSSファイルとJava Scriptファイルでのパスの書き方につまずきました･･･。(相対パスの場合です） このようなディレクトリ構造の場合、img01.jpgの書き方はこのようになります。 index.html <div id="div1"><img src="imgs/imgs01.jpg" /></div> このindex.htmlでCSSを外部化してstyle.cssに書いたとします。 style.css #div1 { background-image:url(../imgs/img01.jpg); } 実際に読み込まれるindex.htmlから見たパスではなく、style.cssから見た画像ファイルのパスになります。 このindex.htmlで読み込まれるJava Scriptを外部化してbase.jsに書いたとします。 base.js // JavaScript Docum
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
本記事は2013年に書いた記事で内容がだいぶ古くなっております。 フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 － まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1」 2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。 フロントエンド・エンジニアとは フロントエンドとはWebブラウザ側（クライアント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
