令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
jQuery不要の最新スライダー［Splide］の使い方と全オプション
今日は最新のJavaScriptスライダー［Splide］を紹介します。 まずは［Splide.js］の特徴をいくつかピックアップします。 jQueryなどのライブラリに依存せず単体で動く軽量（圧縮版で11kB）IE10以降対応ブレイクポイントの指定でレスポンシブ対応マウスのドラッグとタッチスワイプに対応SEOフレンドリースライダー、またはスライドショー、カルーセルに必要とされる要素はすべて揃っており、近年評価が高い［swiper.js］や［slick.js］などと肩を並べられるスペックです。 Splide → https://splidejs.com ［Splide］本体ファイルをインストールSplide.jsをウェブサイトにインストールする方法は3つあります。 NPMでダウンロードCDNを利用Githubからダウンロード1.NPMの場合$ npm install @splidejs/s
Next.js(React)に最軽量＆高機能スライダープラグインSplideを導入してみる
スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS（flex等）が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
フロントエンド開発者が実践したい、アクセシビリティに配慮したJSを書くコツ
JavaScriptを使うことが当たり前になったいま、HTMLだけでなくJavaScriptを書くときにもアクセシビリティに配慮する必要があります。 JavaScriptコンポーネントのアクセシビリティを高め、ユーザーがWebサイトやWebアプリをより快適に使用できるようにするためのコツを紹介します。 以前の記事『Writing HTML with accessibility in mind（アクセシビリティに配慮したHTMLを書く）』で、どうしてWebアクセシビリティについて考えるようになったのか、また、どのように学んだのか説明しました。そして、マークアップを改善して、Webサイトのアクセシビリティを高めるためのコツを紹介しました。中には基礎的な内容も含まれていますが、どれも価値のあるものです。こうしたコツをすべてまとめると、フロントエンド開発において特に重要な2つの不文律ができあがりま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.
