2021年、Web制作・デザインに役立つ記事の総まとめ
2021年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figmaなどの使いこなし術 フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 Web制作者にとって今年一番の出来事は、IE11のサポートがいよいよ終わろうとしていることです。正式には2022年6月16日がその日ですが、
Web制作者にかなりオススメの解説書！ HTMLとCSSの今のテクニックを基本からしっかり学べるカピバラ本
これは本当に、かなりお勧めの解説書です。 カピバラのかわいいイラストに癒やされながら、しっかりした知識が身につくHTMLとCSS、そしてWebデザインの解説書を紹介します。内容はかなり本格派。 HTML Living Standardに準拠したマークアップから、CSS GridやFlexboxなど、実務に役立つWebの知識がていねいに分かりやすく解説されています。 初心者向けの解説書ですが、Web制作を仕事にしたい人向けなので、中級者でもかなり学びのポイントがあると思います。一から学び直したい、現状のワークフローを強化したい、最近の知識を身につけたい人にもお勧めします。 版元様より画像をいただきました。 この「さまざまな工夫」というのがポイントです。私もいろいろな解説書を読んできましたが、非常によくできていると思います。詳しくは後述します。 普通の入門書だと短期間で卒業してしまうかもしれま
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio
Web制作者・デベロッパー向け、ポートフォリオ用のテンプレートを紹介します。 オープンソースで、HTML, CSS, JavaScript, Sassで実装されており、フレームワーク・ライブラリは必要ありません。自己紹介、スキル、プロジェクト、連絡先など、ポートフォリオに必要なコンテンツが用意されており、簡単にポートフォリオを用意できます。 Dopefolio -GitHub Dopefolioは、デベロッパー向けポートフォリオ用のテンプレートです。 セットアップが簡単 💯 商用でも無料 🥳 GNU General Public License v3.0で、オープンソースです。 フレームワークは必要なし 🤘 ライブラリも必要なし 🙌 マルチページ 💎 レスポンシブ対応 🚀 超高速で、SEO最適化 ⚡ Auditsのスコアも高得点 🎖️
商用でも完全無料、ランディングページ用のHTMLテンプレートがダウンロードできる -Inovatik
ランディングページや小規模Webサイト用のHTMLテンプレートが無料で利用できるInovatikを紹介します。すべてのHTMLテンプレートはオープンソースで、商用プロジェクトでも無料で利用できます。 時間や予算が少ない時、モックアップが必要な時などに便利です。BootstrapやTailwind CSSが使用されているので、勉強用にもいいですね。 Free HTML templates for websites and landing pages -Inovatik Inovatikの特徴 HTMLテンプレートのダウンロード Inovatikの無料HTMLテンプレート Inovatikの特徴 Inovatikはフロントエンドデベロッパーが実装した、ランディングページや小規模Webサイト用のHTMLテンプレートを無料でダウンロードできます。 すべてのHTMLテンプレートはMITライセンスで、
これからのWeb制作に間違いなく役立つ！ IEをサポート外にしたレスポンシブWebデザインで重要なCSS、実装方法を学べる解説書
HTML Live Standard対応、FlexboxやCSS GridやCSS関数などを活用して、レスポンシブWebデザインを実装するテクニックを学べる解説書を紹介します。 Webページでよく使用されるさまざまなレイアウトやUIコンポーネントの実装、バリエーションやカスタマイズなども詳しく解説されており、これからのWeb制作に間違いなく役立ちます。 IEのサポート終了のお知らせ（Windows Blog）で、ようやくIEから解放されることに喜んでいる人も多いと思います。これによりIEへの対応をしなくてすむだけでなく、新しいHTMLとCSSも自由に使用できるようになります。 著者は、分かりやすい解説で評判のエビスコム様。中級者向けの実践的なテクニックが満載ですが、初心者でもコードとそれがどのような仕組みで実装されているのかていねいに解説されているので、大丈夫だと思います。
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
SVGでレイティングに使用するスター（星形）を実装するテクニックを解説
Webページやスマホアプリで見かけるレイティングに使用するスター（星形）を実装するSVGのテクニックを紹介します。 一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実装テクニックが解説されています。 Star Rating: An SVG Solution by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の要件 スターを実装する基本のHTML アクセシビリティ SVGを再利用する方法 スターのスタイル 部分的なスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装 アウトラインスタイルのスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装 スタ
Googleデベロッパーが解説、Webページに画像の遅延読み込みを使いすぎるとパフォーマンスに悪影響を与える
loading="lazy"によるネイティブ画像の遅延読み込みのリスクとリターン、注意点とパフォーマンスを向上させる実装方法を紹介します。 Webの新機能は便利で魅力的なものが多いですが、効果的な使い方を知らないと、パフォーマンスに悪影響を与えてしまうかもしまうかもしれません。Web制作者は知っておきたい遅延読み込みの実装方法をチェックしておきましょう。 The performance effects of too much lazy-loading by Rick Viscomi, Felix Arntz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みを採用しているサイトは増加している 相関性の高いパフォーマンス 因果関係を調べる 修正して再テスト ロールアウト おわりに はじめに 遅延読み込み（laz
HTMLとCSSの実務レベルの作業フローや思考プロセスがていねいに解説された、Web制作に真剣に取り組みたい人にお勧めの本 -教科書では教えてくれないHTML＆CSS
HTMLもCSSも一通り勉強した、でも実際にWebページを実装しようとするとどこから手をつければよいか悩んでしまう。そんな人にお勧めしたい、実装の作業フローと思考プロセスをくわしく解説した良書を紹介します。 本書は通常の解説書とは一線を画すもので、現場レベルの作業や考え方を基礎からていねいに解説したものです。実装のテクニックもたくさん解説されており、さまざまなプロジェクトで役立ちます。 本書は「HTML5&CSS3デザインレシピ集（紹介記事）」「WordPressデザインレシピ集（紹介記事）」などでお馴染み、狩野 祐東氏の新刊です。 「教科書では教えてくれない」とあるように、入門書や講座では学べない現場レベルの実装を基礎からていねいに解説しています。自分のブログをちょっとつくってみたいという人向きではなく、仕事としてWeb制作に携わりたい人向けの解説書です。
コーディングに役立つ！Visual Studio Codeのちょっとかゆいところに手が届くような便利な機能とテクニック
あまり知られていないけれど、コーディングの作業が捗るVS Codeの機能とテクニックを紹介します。 今開いているファイルを残しながら新しいファイルを開けるようにしたり、コード内のコメントのカラーだけを自分好みに変更する方法など、ちょっとかゆいところに手が届くような便利なテクニックです。 5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension") by Mohmed Ishak 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ファイルを常に新しいタブで開くようにする 2. コメントのカラーを変更する 3. コードを大きく表示する 4. カ
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
HTMLを書いたり、修正する時に役立つVS Codeの機能拡張のまとめ
VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。 VS Code Extensions for HTML by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張を紹介します。すべてを気に入るとは思いませんが、自分が抱えていない問題を解決したり、必要以上の機能を備えているかもしれません。それでも構いません。ここで紹介するのは、私が実際に使用し、気に入っている機能拡張です。 VS Codeの機能拡張を紹介する前に、Emmetから始めたいと思います。これは機能拡張ではありませんが、VS
これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーディング用のフォントから、自分に適した一番のフォントを見つけることができるオンラインツール -Coding Font
これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text
地味に便利！さまざまなプロジェクトに適したHTMLのテンプレートを簡単に生成できる -HTML Boilerplates
