令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
フロントエンドの刺激的なコーディング課題6選 - Qiita
素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう！ 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう！クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
CSS を JS で拡張したいという思いとアイデアと現状 - マンガ〜ノ伊藤ノ〜ト
CSS を JavaScript で拡張できないかと思っていた．デザイナーは簡単に表現できることが増えるし，エンジニアは保守性が上がってよさそうだな，ということを考えていた． ところで こういう提案はすでにあって，ブラウザの API 経由で CSS を拡張できる experimental な実装があるようだ．CSS Houdini と呼ばれている．各ブラウザの実装状況は Is Houdini Ready Yet? というサイトで確認できる: ishoudinireadyyet.com ちなみに Houdini は フーディニ と発音するようで，どういう意味か調べたら An escape artist という意味らしい．引田天功みたいな人ってことかな．信憑性が疑わしい． CSS Houdini CSS Houdini がどういう使い方ができるか調べてみたら，Chrome が先行していろいろ実
フォームをより使いやすくするためのJavaScript/CSSツール10選
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
can I use... Support tables for HTML5, CSS3, etc
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とjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
無謀にもJavaScriptなしでやってみる! Riot.js入門 - Qiita
このチュートリアルでは簡単なWebページをRiot.jsで作ってみようと思います。読むのに必要な知識は、次の二つだけ。 HTML CSS 逆に不要な知識は、 JavaScript: AngularとかReactとか CSSの方法論: BEMとかSMACSSとか など。ただ、上記を把握していると、より「Riot.jsすげー」ってなるかも、なってほしいな。 Riot.jsを使うにあたって、モック作成や、静的ページだけなら、JavaScriptを書く必要はそれほどありません。このチュートリアルを通じて、次の2つのポイントを伝えられればと思います。 デザイン先行で作成ができる (開発後回し可能) HTML+CSSだけでもコンポーネントが作成できる Riot.jsとは 近年、AngularJSやReact、Backbone.jsなど、さまざまなJavaScriptフレームワークの名前を聞く機会が増え
JavaScript の addRule と insertRule をまとめる | 衣谷止の開発日誌
2011/10/13 : IE8だと動かないミスがあったので一部修正（addRule の引数部分） IE とそれ以外のブラウザで一々処理を分けるのも面倒くさいし、CSSがある場合ない場合の処理を分けるのも面倒なので以下の様にすると楽ちん……かも。 head がない場合はもう知らん。 // スタイルシート挿入用共通メソッド addCSS var style = document.createElement('style'); style.setAttribute('type', 'text/css'); document.getElementsByTagName('head')[0].appendChild(style); var sheet = document.styleSheets[0]; if (sheet.insertRule) { sheet.addCSS = function
JavaScript で動的に追加したタグにスタイルシートが適用されない
Ajax プログラミングなどで、JavaScript を利用して後から動的にタグを追加したり変更したりした場合に、そのタグに設定したクラス名に対応するスタイルシートが適用されない場合がありました。 Safari や Google Chrome では CSS が正しく適用されているのに、Internet Explorer (IE8) でだけ、スタイルシートで指定した書式が適用されていない感じです。 調べてみるとその原因は、タグに対するクラス名の指定を "targetNode.setAttribute('class', クラス名)" で行っていることが間違いだったようでした。 この方法でクラス名を設定したタグを appendChild で追加しても、Internet Explorer に限っては、クラス名が設定されてないタグが追加されたものとされてしまう様子です。 ちなみに getAttrib
IE8 で擬似要素のスタイルの動的な更新ができない
JavaScript で要素のクラス属性を操作してスタイルを変更するような場合、IE8 には :before/:after 擬似要素のスタイルが再描画されないというバグがある。 <p> <a href="#" class="selected">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> </p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $('p').each(function () { var $links = $(this).find('a'), i = $links.filter('.selected').eq(0).index(), len =
JavaScriptでstyleタグをheadに挿入
(function(window){ var document = window.document, css = document.createElement('style') rule = document.createTextNode('p{display:none}') ; css.media = 'screen'; css.type = 'text/css'; if (css.styleSheet) { css.styleSheet.cssText = rule.nodeValue; } else { css.appendChild(rule); }; document.getElementsByTagName('head')[0].appendChild(css); }(window)); 毎回忘れてしまうのは以下の点。 ・CSSの設定をcreateTextNodeで作るところ。
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
HTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイト「DevDocs」 | ライフハッカー・ジャパン
ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」
一つしかない想定で作ってあとから複数出現してめちゃくちゃになる - hitode909の日記
ソフトウェア作ってて，最初は一つしかない想定で作るけど，あとから複数出現することになって改修するのが大変，ということがある． 最悪サーバーサイド もう終了したサービスであったのが，ユーザーは自分のアイテムを飾れる部屋を1つ持てるという仕様だったのが，複数の部屋を切り替えられるようにして，部屋ごとに置けるアイテムのシリーズが変わって，シリーズごとにグリッドの細かさも変わるとか．とにかく大変で，全部のテーブルにあとからシリーズidを持たせたり，クラスメソッドで済んでたのをシリーズidを持つオブジェクトのメソッドにしたり，ORMのItemをRoomに渡すのをやめて，その層とは別に独立した画像合成用のItemとRoomを作ってやり取りするとか，最初からそうなってるときより大変なことになる． 最悪クライアントサイド クライアントサイドでも同じようなことはあって，HTML内に一つしか出現しない前提で作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今どきのスムーズスクロール(2019年版) - to-R Media
Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
CSSに死を！これはJSerの叫び！ #kbkz_tech
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ