令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
【Three.js】DOMを3D表示できるCSS3DRendererを触ってみた! | 東京・新宿のWEB制作会社・ホームページ制作会社 | 有限会社Bit Beans
はじめましてエンジニアの新田です！ 弊社フロントエンジニアチームでは、定期的に勉強会をおこなっています。 最近はWebGLを使用した表現について主に勉強しており、その中でWebGLライブラリであるThree.jsのCSS3DRenderer機能について触ってみたのでご紹介したいと思います。 CSS3DRendererとは？ 公式ドキュメントは日本語ページもありますが、CSS3DRendererの項目は英語ページしかないため、要約すると・・・ CSS3 transform プロパティを使用して DOM 要素に階層的な 3D 変換を適用して3D表現ができる機能です。 キャンバスベースのレンダリングを使用せずに、Web サイトに 3D 効果を適用したい場合に特に適していて、DOM 要素を WebGLで作成したコンテンツと組み合わせて使えます。 公式ドキュメント https://threejs.o
【ハウツー】CSS/JavaScriptを最適化するEclipseプラグイン「jsLex」 (1) 圧縮/外部化/バリデーション/プロファイリングなどを搭載 | エンタープライズ | マイコミジャーナル
jsLexとは? jsLexはRockstarappsが提供するEclipse向けのプラグインだ。Webサイトでは「a wide variety of tools that can be used to optimize a complete web application or just individual resources」と紹介されているが、CSSやJavaScriptなどの圧縮やHTML内のJavaScript/CSSの外部化、さらにはJavaScriptのプロファイリングなど、Ajaxアプリケーションのクライアントサイドの最適化に特化した機能を提供している。 なお、jsLexの最新のプロダクションリリース(安定板)は1.1.7だが、すでに次期バージョンである1.2のベータ版もリリースされている。1.2系ではさまざまな新機能が実装されていることから、本稿では執筆時点の最新のベー
Webデザイナー・開発者向けの３２個のチートシート集まとめてみた。
デザイナー向けのチートシートまとめ カラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。 使いたい色を直感的に選んで、その色のコードを調べることができます。 オンラインシートなので、ブックマークに保存しておくとすぐに調べられます！ Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。 拡大するとそれぞれのカラーのコードがわかります。 色彩バランスを把握しやすいので、デザイン時に重宝します。 ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のタグが網羅的にまとめられたチートシートです。 日本語版がないことがデメリットですが、簡潔な英語しか使われていないので、直感的にわかる部分
たったワンクリックであらゆるサイトのJavaScriptやCSSを圧縮＆最適化してくれる『zbugs』 | 100SHIKI
これはすんごく便利・・・。 zbugsを使えば、ワンクリックであらゆるサイトのCSSおよびJavaScriptを圧縮してくれるようだ。 もちろん何パーセント圧縮されたかとか、どのファイルがどれだけ小さくなったかといったことの詳細も教えてくれる。 さらに圧縮したファイル群をまとめてダウンロードすることも可能だ。 サイトをつくったあとに、さらなるスピードアップを図るのにいいだろう。インターフェースも素敵でシンプルなので一度試してみるといいですよ。
Sexy Drop Down Menu w/ jQuery & CSS - noupe
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key -- and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. According t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
