CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai
過激なタイトルですみません。 Cloudflare Turnstile (Cloudflare の CAPTHCA のようなもの)、または Cloudflare の Under Attack Mode を 学校向けアプリに使わない方がいい理由を紹介します。 使ってしまうと、もしかしたら大量のユーザーを失うかもしれません。 学校のフィルタリングとの相性 あなたが Cloudflare を用いてサイトを公開するとき、ユーザー A,B,C は以下のようにアクセスします。いたってシンプルですね。 学校のフィルタリングは、ほとんどの場合、プロキシを用いて一箇所にリクエストをあつめて、そこでブラックリストと照らし合わせてブロックします。 要するに、生徒のリクエストを仲介するのです。図に表すと以下のようになります: ユーザー A,B,C のリクエストを全て同じプロキシを通じて Cloudflare にリ
これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ
CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな
Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI
Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preline UI -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Preline UIの特徴 Preline UIのUIコンポーネントとページレイアウト Preline UIの使い方 Preline UIの特徴 Preline UIは、ユーティリティファーストのTai
CSSを書いている時に、ふとFlexboxのプロパティがどんな挙動だったか確認したくなることはありませんか？ CSSをVisual Studio Codeで書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 Flexboxの各プロパティや値がどのような挙動か、一目で分かります。 CSS Flexbox Cheatsheet -VS Code 1年ほど前にも紹介しましたが、先日v3にバージョンアップしました！ ほとんどのプロパティにインタラクティブなデモが追加され、各値がどのように機能するかより分かりやすくなっています。 Flexboxの挙動がアニメーションに CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知
レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
BuriKaigi 2024 https://burikaigi.dev/ X https://twitter.com/__sakito__
Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。｜Takumi HASEGAWA (unshift Inc.)
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト 嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
取扱注意!?Search Console の検索パフォーマンス レポートを正しく活用するために知っておくべきこと - ブログ - 株式会社JADE
SEOを考えたWebサイトの運営を行う上で、Search Console 内の1つの機能である検索パフォーマンス レポートで確認できるデータを活用しないという選択肢はありません。 検索パフォーマンス レポートでは、Search Console で設定した自身の関わるWebサイトのプロパティ範囲内という制約こそありますが、Google 検索を利用した検索ユーザーのGoogle 検索結果ページ上での行動データを確認することができるためです。 上記での行動データというのは、Google 検索で検索したユーザーが「どのような検索キーワード」で検索して、検索結果に表示された自身の関わるWebサイトの「どのページ」をクリックし、サイト内へ流入しコンテンツを閲覧することになったのかをデータを指します。 Webサイトをより良くするためのSEOを考えた改善施策に必要不可欠となる行動データを確認できるSear
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo
最適化はCDNがやればいい
題名に「CDN」と書きましたが、いわゆる「エッジ」のことです。オリジンありきなのであえてCDNと呼びました。とはいえ、オリジン自身がエッジにある可能性もあります。 メタフレームワークを作る Sonikというメタフレームワークを作っています。まだDevステージなんでどんなことができるか可能性を探っている最中です。 このフレームワークの特徴はとにかくエッジファーストです。 SSRしたバンドルの大きさを極力小さくする。 Islandsアーキテクチャを採用する。 DenoのFreshを参考にする。 CloudflareのBindingsを扱いやすくする。 Honoの上に乗せる。 とりあえずStreamingはサポートしない。 で、こういうのを作っていると、フレームワークは最小限にして、Core Web Vitalsのスコアを上げるために身を削る最後の部分はCDNに任せてしまった方がいいってことです
最近流行りのAstroフレームワークで、WordPressの静的Headless化がかなりお手軽にできたのでまとめてみました。 開発環境 Astro 2.0 WordPress 6.1.1 Local node 18.12.1 Mac OS 13.2(Ventura) Visual Studio Code(Astroプラグイン入り） Astroとは？ Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。 (公式ドキュメントより) LocalでWordPressを構築 まずLocalを使って、ローカル環境にWordPressを構築します。 サイト名 Astro Blog（お好みで） サイトドメイン astro-blog.local WordPressの設定 WP AdminでWordPressのダッシュボードを立ち上げ、いくつかの
CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。 下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。 Simple CQ Demo with :has() 先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定（Canaryはすでに使用できます）で、すべての
CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に
知っておくと便利で役に立つ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制作の要です。しかし、多くのプロ
今年になってもCSSの進化が止まりません、むしろ加速しています！ IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ そしてCSSの新機能として、単位を変数として使用できる「Variable Units（変数単位）」が登場しようとしています。 たとえば、--baseを8pxにし、4倍にしたい時はcalc(4 * (var(--base)))と記述していましたが、4--baseで32pxになります。 The Future of CSS: Variable Units by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Var
UXライティングとは | UXライティングガイド
UXライティングとは何か UXライティングとは、ユーザーがデジタルサービスを操作する際に必要となるテキストを書く技術です。例えば、登録時のスタートガイド、利用の流れコンテンツ、タイトル、ボタン、画面上の説明文、エラーメッセージ、通知などの言葉がUXライティングの手法に則って書かれます。サービスの中にある言葉に対して「意味が通じればいい」という思想で書くのではなく、「ユーザーがサービスを通じて体験する一連の経験を設計する」という思想で書くのがUXライティングです。 UXライティングに求められる技術とは UXライティングには、分かりやすく書く技術と、人間らしく書く技術が必要です。この二つの技術が同居することによって、ユーザーの体験を支援することができます。 分かりやすく書く技術 UXライティングの手法に則ってテキストを書く際に求められるのは、「ユーザーの気持ちに沿った文章を書く」という抽象的な
9割を自宅で完結？Jamstack を学んで開発環境をイチから作ってみた話 | IIJ Engineers Blog
イラストレーターの妻が「ポートフォリオサイト欲しい」と言い始めたので、面白そうだと思い開発を開始しました。 静的サイトなら Jamstack ってのがイイらしいと最近よく聞くものの、何かはわからないので勉強してみて、巷の Jamstack 構築環境をできる限り自分の家の中に作ってみます。 結論から言うと適材適所なのですが、皆さんもコーポレートサイトやブログなど「これって Jamstack がハマるんじゃないかな」と思える箇所があると思います。 是非、検討する材料としてこの記事をご覧ください。 Netlify 社が定義した JavaScript + API + Markup (JAM) の構成を Jamstack と呼ぶようです。 まずは Jamstack の何が嬉しいか、見ていきましょう。 従来の Web サイト 従来の構成でサーバサイドがレンダリングした Web サイトを表示するまでの
使わないのはもったいない！ GA4の便利機能「オーディエンス」を活用しよう（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytlcs 4 (以下、「GA4」）には「オーディエンス」という機能があります。 筆者がGA4で一番好きな機能なのですが、セミナーなどでお話しているとあまり使われていない機能だなと感じております。 そこで今回はオーディエンス機能とはどういう機能なのかを紹介し、その活用方法についても触れていきます。 オーディエンス機能とは？ オーディエンスの設定方法 1. オーディエンス名を設定する 2. 条件を設定する 3. オーディエンスの有効期間を設定する 4. オーディエンスのイベント名を設定する 5. 保存する オーディエンスを活用した分析方法 セグメント機能との違いについて オーディエンスを配信ターゲットとして活用する 最後に オーディエンス機能とは？オーディエンスとは「観客」や「顧客」を意味しま
のようなイメージです。 ※192.0.2.0/24、198.51.100.0/24、203.0.113.0/24 は例示に利用できる IP アドレスブロックです。 実在する IP アドレスではありません。 以上のように、CDN では オリジンサーバーのドメインと CDN 用ドメインの紐づけ CDN 用ドメインに対応する IP アドレスの動的な名前解決 を用いて、オリジンサーバーへのリクエストを地理的に近いエッジロケーションへのリクエストに振り替るのが一般的です。 CDN サービスの例ここでは、CDN サービスの例を各クラウドベンダーごとに簡単に紹介します。 AWS - Amazon CloudFrontAWS の提供する CDN サービスは Amazon CloudFront です。 Amazon CloudFront では、CDN のオリジンサーバーとして EC2 や S3、ELB など
ベイジの五ノ井です。役職はディレクターですが、編集者の経験があることから、コンテンツや文章のクオリティを管理する立場で働いています。6月からは、ベイジの日報の編集長も務めています。 そんな私の第一回目の記事は、文章について。 デジタル化が進む今、文章力は社会人の最重要スキルといって過言ではありません。 今は会話や電話のような音声コミュニケーションの機会がどんどん減り、多くがメールやチャットのようなテキストコミュニケーションに置き換えられています。文章力がある人には、企画書、社内資料、記事、SNSなど、様々な媒体を通じて自分のメッセージを届け、影響力を高めるチャンスが転がってきます。 これほど重要な文章力について、ほとんどの人は高校以降は専門的な教育を受けることもなく、働き始めます。文章に苦手意識を持っている社会人も非常に多いですが、作家やライターではない社会人が覚えるべき文章のセオリーは僅
より良いコミットメッセージを残すことは Git を使った開発をする上で重要なことです。優れたコミットメッセージは、それを読んだ人がコードを理解するのに大いに役立ちます。 では、どのようなメッセージが良いもので、どのようなメッセージが悪いものなのでしょうか？ それについて掘り下げていきたいと思います。 基本的な Git Commit Message の書き方 詳しいところは、以下の3サイトを参照してください。特に「How to Write a Git Commit Message」には基本がすべて書かれています。 How to Write a Git Commit Message https://cbea.ms/git-commit/ Gitのコミットメッセージをうまく作成する7つのルール （「How to Write a Git Commit Message」の和訳記事） https://
2023年6月にFigma Config 2023という、Figmaのカンファレンスが開かれました。そこでFigma上で開発をサポートするような機能が多数発表されました。 デザイナーとエンジニアの効率を上げるDev Modeなどの発表があり、エンジニアにとっても知っておきたい内容があります。 今回は発表にあった中でも特に開発に直結するFigma for VS Codeを紹介します。 Figma for VS Codeとは？ VS Code上でFigmaを使用したさまざまなことができる拡張になります。 ただVS Code上でFigma上のデザインを確認するだけではなく、Figmaと連携した開発速度を上げる機能やコミュニケーションをサポートする機能があります。 Figmaにコメントを送り、コメントの通知を受け取れる VS Code上からFigmaのコメント機能を使用して、UIの質問をすることが
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ
100秒で理解するPromise
そもそも非同期処理とは？ Promiseについて知るためには、まず非同期処理について知っておく必要があります。 以下の動画で、非同期処理について100秒で解説しているので、そもそも非同期処理をよく知らないなぁという人はぜひ確認してみてください！ Promiseとは では、本題です。 Promiseとは、ES2015で導入された、非同期処理の状態や結果を表現するオブジェクトのことです。 PromiseはES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。 非同期処理はPromiseのインスタンスを返し、そのPromiseインスタンスには状態変化をした際に呼び出されるコールバック関数を登録できます。 jsprimer - 非同期処理:Promise/Async Function 例えば、出前アプリでピザを注文することをイメージしてみましょう。 ピザを注文すると、
Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画像が右・左からアニメーションでふわりと表示されたり、フェードインやスケールアップ・ダウンなどが簡単に実装できます。 Animon Animon -GitHub Animonの特徴 Animonのデモ Animonの使い方 Animonの特徴 Animonは、Webページ上のDOM要素がビューポートに表示された時に、指定したDOM要素をアニメーション化させるJavaScriptの超軽量（0.9kB）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。 実装は
GitHub Advent Calendar 2024の14日目の記事です。昨日はwa-chan222さんの未経験から始めたGitHub活用の基本と学びでした。 はじめにフューチャー社内の有志メンバーでGitブランチフローの規約を作成しました。 ひとまずは形になったので紹介します。 Gitブランチフロー規約 | Future Enterprise Coding Standards ※GitHub/GitLabを利用し、トランクベース開発を採用しないアプリケーション開発を想定しています。 内容へのフィードバックは、Issueかツイッター宛にメンションを入れてコメントを貰えると幸いです。 なぜ今更Git？Gitは2005年に公開され、2007年のGitHub登場以降、バージョン管理ツールとして爆発的に普及しました。現在では、業界のデファクトスタンダードと呼べるほどの地位を確立しています。 公開
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
Builder.ioは、強力なビジュアルエディタにより、開発者ではない人が超高速なサイトを開発・編集できるようにしています。 私たちのビジュアルエディタが優れている点の1つは、AngularからWeb Components、 そしてその間にあるすべてのフレームワークに至るまで、 さまざまなツールで同じサイトを生成できることです。 出力されるコードは速度が最適化されています。 私たちのツールで作成されたサイトは、手作業で作成されたサイトの大部分よりも高速です。 私たちはこれを心から誇りに思っています。 私たちの製品は、スピードがとても重要であるeコマースに焦点を当てています。 優れたTime to Interactiveの実現は困難 どんなにコードが最適化されていても、静的HTMLのみを提供していない限り、 eコマースサイトがPageSpeed Insightsで100点中100点のスコアを
SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UI Components With SVG and CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. SVGで切り抜きを実装 2. SVGでセクションの見出しを実装 3. SVGでリンクの下線を実装 4. SVGでテープを実装 終わりに はじめに SVGはアイコンやイラストだけでなく、わたし達デベロッパーが忘れがちなパワーをたくさん持っています。CSSと比較して、SVGを使用することが理にかなっているユースケー
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ
筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？ 未満のときはどうするの？ and で繋げなきゃいけないの？ 長くない？ と疑問に思いながら、今日まで長い年月を過ごしてきました。 本日（2023/03/28）、Safari 16.4 がリリースされ、 media query のrange（範囲）記法に対応しました。 ▼ 従来の media query の範囲指定
フロントエンドの移り変わりは早すぎるのか
インターネットでは毎日のように言われることですが、私はそこまでではないと考えています。 ネットでよくそう言われる理由として考えられるものと、それを踏まえてどう向き合っていくとよさそうか、個人的な考えをまとめてみます。 なぜ言われるのか 言語が実質的にJavaScript一択 バックエンド、というかサーバサイドでは技術選定に「言語の選択」が入りますが、フロントエンドでは実質的にはJavaScriptにほぼ固定されます（TypeScriptも別言語ではないので、ここではJavaScriptに含めます） サーバサイドと比較して「技術の移り変わりが早すぎる」と評される場合、多くはその人の使用しているとある言語と比較されているように思われます。 実質的に言語が固定なので、比較するならすべてのサーバサイドの変化の総量と比較するのが妥当でしょう。 PHP + Python + Ruby + go + J
はじめに ご覧いただきありがとうございます。Gonです！ 巷では、GitやGitHubに関する話が話題ですね。 エンジニアでGitを触ったことない人は本当に「やばい」のか？ そんなことは知りません。 Gitでのバージョン管理やGitHubの運用方法については、既に多くの記事で解説されているので、ここでは触れずにいこうと思います。 今回の記事では、普段の学習に『GitHub』を取り入れたことで、日々の学習がより楽しく継続できるようになり、結果としてスキルアップできた実体験についてシェアしていきます。 皆さんのエンジニアライフに、少しでも良いキッカケになれば嬉しいです。 GitHubを活用した方が良い理由 まずは、こちらの動画をご覧ください。 正直、意味は分かりません。 アニメーションが凄すぎて話が入ってきませんでした。 要約すると、こんな感じです。 GitHubは世界最大のソフトウェア開発プ
Bleeping Computerは10月30日(米国時間)、「Google Chrome now auto-upgrades to secure connections for all users」において、GoogleがすべてのChromeユーザーに対し、HTTPリクエストを自動的にHTTPSリクエストに変更する「HTTPSアップグレード」を開始したと報じた。Googleはこれまでにも同機能を限定的に展開していたが、2023年10月16日に安定版のすべてのユーザーが対象になったという。 Google Chrome now auto-upgrades to secure connections for all users 歴史的に、ブラウザはHTTPSをサポートするサイトにおいて安全ではないHTTPリクエストを行うことがある。Google Chromeでは、次のような条件でHTTPリソー
The new wave of Javascript web frameworksMake sense of the proliferation of new Javascript web frameworks. A deep dive into the problems at scale and the recent evolution of innovation. IntroductionStaying current in the Javascript ecosystem is not for the faint of heart. It’s challenging for those entering the industry to follow what’s happening amongst the new libraries, frameworks, concepts, an
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ
学校向けサイトに Cloudflare Turnstile を使わないで！
CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA
CSS）z-indexのベストプラクティスを考える
JSONデータをキレイに可視化してくれるオンラインツール「JSON Crack」は手軽でお勧め／画像化してクリップボード・ローカルファイルへエクスポートすることも【やじうまの杜】
FlexboxのチートシートをCSSを書いている時に利用できるVS Codeの機能拡張
2023年のフロントエンド振り返りと2024年
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由
AstroでWordPressを爆速Headless化してみる - Qiita
CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA
CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」
CDN 入門とエッジでのアプリケーション実行 | フューチャー技術ブログ
ビジネスに役立つ上手な文章の書き方11のコツ | knowledge / baigie
より良い Git コミットメッセージを書こう - Qiita
Figma for VS Codeで変わるデザインと開発のコミュニケーションと効率
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon
Gitブランチフロー規約の紹介 | フューチャー技術ブログ
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
Qwikの紹介 – HTMLファーストのフレームワーク | POSTD
Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
【GitHub】個人学習をGitHubでレベルアップさせる話
Google Chrome、全ユーザーに対しHTTPからHTTPSへ自動変更
The new wave of Javascript web frameworks
togetter.com
pete-pedersen.com
www.nikkei.com
www.nikkei.com
www.nikkei.com
www.nikkei.com