大塚流フロントエンド開発の歩き方
フロントエンド開発は考えることが多い。とくに 0 -> 1 の場合だと、何からはじめたらいいのか？が全然わからず、途方にくれてしまうこともあるでしょう。実際、ぼくがそうでした。 そして、そういった情報はなかなか検索しても出てこない。設計方法や実装方法みたいなものはたくさんあるのに。なので、書いてみました。 これは、ぼくがいくつかのフロントエンド開発を経て「これを最初に知っていれば、もうちょっとうまくできたかも？あの失敗がなかったかも？？」をまとめたものです。 フロントエンド開発に不慣れな方の参考になれば、これ幸いです。 まずは仕事のゴールを確認する プロジェクトや各フェーズごとに仕事のゴールは異なるため「何をもって仕事が完了したと言えるか？」を確認する。たとえば、要件定義フェーズであれば「画面仕様書が完成する」とか、開発フェーズであれば「API結合試験がすべて完了し、バグチケットがすべてク
WEAR Webフロントエンドリプレイスのアーキテクチャ選定とNext.jsへの移行 - ZOZO TECH BLOG
はじめに こんにちは。WEAR部フロントエンドブロックの藤井です。WEARでは現在、Webサイトのリプレイスを進めています。本記事では、リプレイスに至った背景や課題と、課題解決のために行ったリプレイスのアーキテクチャ選定についてご紹介します。 なぜリプレイスするのか WEARはサービスローンチしてから約10年が経ちます。これまでローンチ当時の技術スタックのまま開発を続け、サービスを成長させてきました。今後もより継続的にスピード感を持ってユーザーへ価値を届けていくにあたってさまざまな課題があったため、新たな技術スタックでリプレイスを開始することにしました。 リプレイス前の環境 リプレイス前の環境はオンプレミスの環境にロードバランサー、Windowsサーバー(IIS)があり、そこでVBScriptが動いています。VBScriptでテンプレートHTMLにデータを流し込み、ブラウザに表示する仕組み
ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。 以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみたいに簡単に実装できます。 TailwindCSS Masonry Layout by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSのみを使用してMasonryレイアウトを実装する方法 終わりに はじめに Masonryレイアウトは、以前は画像ギャラリーに使用されていました。しかし最近では、このレイアウトはユーザーにとって非常に魅力
例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いですよね。 このように デスクトップPC →1024×682の画像を表示する ノートパソコンPC →640×426の画像を表示する スマホ →400×266の画像を表示する という風に、大きさの異なる画像を出し分けたいときに使うのがsrcset属性です。 srcset属性のデモページ（ソース） ※後述していますが、ChromeやSafariの場合はスーパーリロードしないと画像が切り替わりません 例えば、以下のように書くと <img srcset="small.png 400w, medium.png 640w, large.png 1024w" src="large.png" /> imgタグは、
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
モダンなWebフロントエンドの技術とAMP
モダンなWebフロントエンドの技術とAMP モダンなWebフロントエンドのフワームワークやツールとAMPについて紹介します。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー４日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リク
先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。 Is it :modal? by Jhey Tompkins コンテナクエリ（@container）と:has()疑似クラスについては、先日の記事をご覧ください。 レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 :modal疑似クラスがCh
今年3月に公開されたChrome 111とEdge 111にView Transitions APIが搭載されました。View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に
コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そんなコンテナクエリが安定版のブラウザにサポートされ、ポリフィルも大幅にアップデートされたので、基礎知識、基本的な使い方、便利な新単位、ポリフィルの使い方と注意事項を紹介します。 CSSの新機能でネックになるのが、ブラウザのサポート。しかし、CSSの新機能コンテナクエリは、違います。サポートされていないブラウザ用にポリフィルも同時に開発されており、2年くらい前のブラウザでもサポートされています。 Container queries begin to land in stable browsers while the polyfill gets a big update by
DeNAのマシンラーニングをささえるアノテーションシステム | BLOG - DeNA Engineering
この記事では、DeNAでのコンピュータービジョン関連の機械学習のためのデータ生成処理方法について説明します。 主に、内製のアノテーションシステム「Nota」の開発とそのシステムと全体のMLワークフローに統合する方法について取り上げます。現在のソリューションに到達するため、私たちが行ったいくつかの決断、および解決しなければならなかった課題について説明します。 はじめまして、アラマ・ジョナタンです。現在DeNAのシステム本部で、分析推進部ソリューションエンジニアリンググループとAIシステム部MLエンジニアリンググループを兼務しているメンバーです。小さいチームでデータ関連の課題を解決するためのアプリケーションやツールの開発と運用をしています。 正確なデータを取得する問題 近年、AIには多くの進歩があり、それらの多くはコンピュータビジョンに関連しています。コンピュータは画像や動画にある内容を理解で
インフラエンジニアの中野(etsxxx)です。今回はWebのフロントの話です。稚拙な部分はご容赦を。 はじめに 前提知識 解決案の候補 解決案1: 手でspanタグをつける 解決案2: サーバーサイドの処理 解決案3: クライアントサイドの処理 クライアントサイドで文節区切り 実装 結果と考察 さいごに はじめに 2020年12月、リブセンスにQ by Livesenseという広報ブログが誕生しました。このブログは明朝体と縦書きと長文にアイデンティティがあります。 Q by Livesenseはこういう見た目のブログです。 Q by Livesenseは縦書きということで、漢数字を使っていたり、写真やイラストを使わずに純粋な文体で記事を書いていたりと、書籍のような日本語らしさが求められるデザインとなっています。 縦書きはWebエンジニアにとっても珍しい実装ですが、読者にとっても慣れないUI
「レスポンシブにすればPCサイトと同じ工数でPCにもスマホにも両方対応できるよね?」 - エムスリーテックブログ
できません。 こんにちは、エムスリーエンジニアリンググループの福林 (@fukubaya) です。 中村の記事で宣言したDocpediaの技術的チャレンジの記事も今回で最後です*1。 今回は、PCページとスマートフォンページで共通的に使用できるVue.jsコンポーネントをどうやったら実現できるかを考えて実装した例を紹介します。 仙台サンプラザ（せんだいサンプラザ）は、仙台市都心部東側の宮城野通に面してあるホール・ホテル・会議室などの複合施設。本文には特に関係ありません。 なぜレスポンシブにしたいのか? PCとスマホで共通のコンポーネントを使って工数を減らしたい 実例 構成 エントリー router AppModePlugin PCとスマホで処理を切り替える PCとスマホでデザインを分ける We are hiring! なぜレスポンシブにしたいのか? 冒頭のタイトルは、直接こう言われたのでは
Tailwindcssとは https://tailwindcss.com/ CSSライブラリの一種。 BootstrapやBulmaのような他のCSSライブラリと異なり、 .btnや.cardといったコンポーネント系のクラスは定義されておらず、 <b>1つのスタイルのみを変更するユーティリティ系のクラスがたくさん詰まっている</b>のが特徴。 Tailwindcssで定義されているクラスの例: .font-bold { font-weight: 700; } .rounded { border-radius: .25rem; } .hidden { display: none; } この特性がWeb開発で一体どんな効果をもたらすのか？ Web開発ではおなじみのBootstrapと比較しながら学んでいこう。 Bootstrap vs Tailwindcss : ボタンの例 Bootstra
この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ウェブ制作が捗る！便利すぎる最新オンラインツール、無料素材まとめ 404 Illustrations ウェブサイトの404ページで利用できる、ユニークでかわいいイラストを集めた無料デザイン素材キット。 Adobe XD 19 このアップデートでは大幅に機能が強化され、より使い勝手の良さを追求したプロトタイプツールとなりました。 Amadine Mac専用のベクター描画アプリで、Illustratorの代替ツールとしても利用できそう。無料トライアルも用意され
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 新しいツールや機能をうまく駆使することで、時間のかかる面倒な作業もラクにこなし、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール Web制作フ
CSSのビューポートを基準にした単位「vw, vh, vmin, vmax」は、ここ数年で多く使用されるようになりました。利点はJavaScriptなしで、レスポンシブ対応のレイアウトや要素のサイズを動的に実装できるからです。vw, vh, vmin, vmaxの知っておくと便利なCSSのテクニックを紹介します。 フォントのサイズ指定、高さいっぱいのコンテンツ、フッタを最下部に配置、デバイスに応じた画像配置、記事は固定幅だけど画像は幅いっぱいなど、実用的なテクニックが満載です。 CSS Viewport Units by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートを基準にした単位 vw: ビューポートの幅 vh: ビューポートの高さ vmin: ビューポートの幅または高さの最小値 v
はじめに HTML+CSSコーディングにおいて、Sass管理ディレクトリを標準化する方法を紹介します。 CSS設計は、サイト種別やプロジェクト規模、分業の有無や人数によっても最適解が異なります。 この仕組みは、様々な設計を同じロジックで受け入れることによって、CSSコードの管理効率を画一的に最大化する狙いのものです。 コーポレート・ポータル・ブログ・EC・LP・管理画面…など、様々な種別のサイトのCSSを、同じ仕組みで設計して管理できるようになります。 前提事項など SassなどのCSSプリプロセッサの使用を前提とします。 本記事の一部は、後で見られるよう別記事として切り出しています。（📝のマークのもの） この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 セクション一覧
Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。 Thinking About The In-between Design Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブにおける中間のデザイン 中間のデザインとは 中間のデザインに備えて
WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。 /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - デスクトップ（デフォルトのグリッド） 1024-768 - タブレット横長 768-480 - タブレット縦長 480-less - スマホ --------------------------------------------*/ @media all and (min-width: 1024px) and (max-width: 1280px) { } @media all
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
使った方がいい便利なフロントエンド開発ツールを紹介します。 Photo by ThisisEngineering RAEng on Unsplash はじめに 開発者として、私たちは常に、プロジェクトに取り組んだり何かを学んだりする時に、作業を楽にしたり生産性を高めたりするリソースやツールを使う必要があります。web上には開発者向けに作成されたツールがたくさんあるので、安心してください。その多くは無料で、何も支払う必要はありません。 この記事では、webで入手できる無料の、非常に便利なフロントエンド開発ツールのリストを紹介します。さっそく始めましょう。 1. UiGradients UiGradientsは便利なwebツールで、カスタマイズして選べる素晴らしいカラーグラデーション集です。また、カラーグラデーションは、CSSコードとして取得したり、JPG形式でダウンロードしたりすることもでき
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー
【実録】WordPressサイトをAWS+Laravel+Nuxtにフルリプレイスした話 - Qiita
概要 創業2期目のスタートアップ株式会社NoSchoolにて、WordPressで開発された自社サービスを、2ヶ月掛けてAWS+Laravel+Nuxt.jsにフルリプレイスした際の技術選定について書きます。 対象読者 Laravelを使ってみたい/使えるライブラリを一通り知りたい AWS構築の全体感を知りたい Nuxt.jsやVuetifyの使用感を知りたい WordPressを脱却したい 技術選定の背景 技術選定と言っても好きな技術を選べばいいというわけではありません。自社が持っている技術力、事業の状況によるところが大きいため、まずは背景としてそのあたりを説明していきます。 先に技術が気になる方はここは読み飛ばして、あとで戻ってきてください ①自社の技術力 CTO @mejileben NoSchoolは創業2期目で2019年6月現在、フルタイムメンバーが僕と社長しかいません。 そして
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
こちらの記事は、Simon Holdorf 氏により2020年01月に公開された『 9 Projects to Inspire Front-End Developers in 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 2021年改訂版はこちら！ 「ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）」 続編もどうぞ！「フロントエンド開発者のための刺激的なプロジェクト10選」 最初からはっきりと言ってしまいましょう。プログラミングに関する本を何冊読んでも、ビデオやポッドキャストを何本観たり聞いたりしても、もしあなたがより良い開発者になりたいのであれば、継続的に練習することは欠かせません。 フロントエンドの世界には、React、Angular、Vueなど数多くのフレームワークが存在します。どれも素晴らしいものばかりで、それらがなければ
【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ
※前回の2020年12月からベゼルレスのiPad mini6（8.3インチ）が出たので更新しています。 記事の詳細の内容はiPad mini6が入っていない内容です。 MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。 前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。 そこで今回2021年に向けて内容を見直しました。 最近発売されたベゼルレスのiPad AirやiPhone12 miniなど新しいサイズも増えて、より複雑になった印象です。 iPadのSplit Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。 hashimotosan
![【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/69fd58e599edd140a8c7e26e7058d9122c7ed7a1/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20201207%2F20201207184733.png)
無料＆簡単にオンライン予約システムが作れる「SELECTTYPE」レビュー、ウェブサイトへの埋め込みもラクチンで超絶多機能にすることも可能！
自分好みの予約システムを作る手順は簡単で、2つの手順に従うだけ、専門知識は一切不要。 1：あらかじめ用意されているテンプレートから一番変更しやすそうなものを選ぶ 2：自分の好みに合わせて変更 できあがったら、実際に予約する立場で試してみて、「これは使いにくいので変えてみよう」「こういう部分も予約時に決めてもらう方がよさそう」というようにしてブラッシュアップすればとりあえず完成。あとは本番で使ってみて初めてわかる点を改善していけば、どんどん使い勝手が良くなっていき、収益を押し上げてくれるとともに、管理の手間が減ってスムーズに運用でき、本来やるべき事に集中できるようになります。 というわけで、「SELECTTYPE」なら実際にどれぐらい簡単に作ることができるのかという気になる点を実践して確かめてみました。 予約システムつきホームページ【SELECTTYPE】 無料で予約フォーム付き予約システム
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
CSSで要素やレイアウトのサイズを指定する方法には、幅や高さを固定値にサイズを定義する方法とその中のコンテンツに依存してサイズを決める方法があります。 この2つの方法それぞれのメリットと使い分け方、特にレスポンシブで効果的なコンテンツに依存してサイズを決める方法を使ったテクニックについて紹介します。 Intrinsic Sizing In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSでのサイズ指定方法とは 外因性サイジング 内因性サイジング: min-content 内因性サイジング: max-content 内因性サイジング: fit-content ブラウザのサポート状況 実際の使用例 終わりに CSSでのサイズ指定方法とは CSSには、内因性と外因性の2つのサイズ指定方法
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 この記事は、定期的にトレンドに沿って更新していこうと思います。 twitterもやってます！ 今後も情報発信しようと思うので、フォローお願いします！ https://twitter.com/joer_sbt 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ま
Web制作のたびに繰り返し手こずって、時間のかかってしまう作業ってないでしょうか。 作業の効率化や時短において、限界を感じているひとにこそ刺さる、知っておきたい最新オンラインツールをまとめてご紹介します。 面倒な作業もあっという間に終わるだけでなく、どれも無料で利用でき、これまでのWeb制作がガラリと変わるコード不要の「ノーコード」Webページビルダーや、AI技術を活用したサービスも続々増えています。 「Web制作をもっと手早く終わらせたい」と考えているひとは、まずは自分だけのお気に入りツールを見つけてみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール 面倒なWeb制作におさらば！便利すぎる新登
レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer
レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ
先月アップデートされたChrome 88でaspect-ratioプロパティがサポートされ、FirefoxとSafariでもまもなくサポートされる予定となっています。 名前の通り、アスペクト比を定義できるCSSのプロパティですが、Webページやスマホアプリで実際にどのように使用すると便利なのか、その使い方を紹介します。 New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アスペクト比とは object-fitプロパティ 古いハック: padding-topでアスペクト比を保つ aspect-ratioでアス
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. テキストエフェクト系 2. イメージスライダー系 3. ナビゲーションメニュー系ト 4. ローディングアニメーション系 5. ページレイアウト系 6. ボタンエフェクト系 7. 便利、面白系スニペット 「Run Pen」をクリックすることで読み込みが開始され
きれいな動きしてるだろ。ウソみたいだろ。ReactNativeExpoで動いているんだぜ。それで。 - Qiita
ネイティブと同じくらいヌルヌル動く 動画サンプル pic.twitter.com/PZBXGGvIuo — HorieH@ゆうしゃとさんすうリリース (@h0rieh) October 10, 2019 実物のアプリ ※興味があったらインストールして動きを体感してみてください iOS Android Expoとは？ React Native開発で「開発環境、デバッグ環境、ビルド、証明書の作成/管理、スマホアプリに必用な機能」などを簡単にしてくれるやつ。 1ソースでiOSとAndroidとWebの開発が可能。 ReactNative+Expoでスマホゲーム １年間で６本リリースして、合計１万インストール/10万円達成しました。 以下、ReactNative+Expoの知見ではなく、スマホアプリを開発してみて知っておきたかった知見になります。 Webではなくアプリにしてよかった点 Admobが
記事の概要 この記事は、Meta 社 relay.dev チームの Jordan Eldredge 氏の Tweet で紹介された GraphQL 成熟度モデル (GraphQL maturity model) を個人的な見解を加えながら和訳した記事です。 jordaneldredge.com GraphQL を実装する上で、どの程度 GraphQL を使いこなせているか判断するための参考になれば幸いです。 実際の成熟度モデルの和訳 最初の Tweet 私は、GraphQLの利点がまだ十分には理解されていないと思っています。ほとんどの組織では、GraphQL の提供する価値を捉えきれていません。 そこで、私は「GraphQL成熟度モデル」をスケッチしてみました。あなたの組織はどの程度成熟して（＝使いこなせて）いますか？ もし以下に示す13の成熟度を達成していたとしたら、よりGraphQLを
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単＆実用的】
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
【第5弾】少しのコードで実装可能な10のCSS小技集
Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装
ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法
pictureタグとsrcset属性の違い。超わかりやすく
モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
CSS コンテナクエリの準備はできてる？ 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました
日本語の折り返しをJavaScriptで制御する - LIVESENSE ENGINEER BLOG
Tailwindcssは素晴らしいという話 - GitPress.io
ウェブ制作が捗る！便利すぎる最新オンラインツール、無料素材56個まとめ
Web制作フローが変わる！便利な最新オンラインツール43個まとめ【2020年版】
ビューポート単位「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ
CSS設計・Sassディレクトリ管理の標準化（CROCSS） - Qiita
レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法
CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
生産性を高めるすごいフロントエンド開発ツール10選 - Qiita
ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA
2020年にフロントエンド開発者が作りたい9つのプロジェクト - Qiita
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
面倒なWeb制作におさらば！便利すぎる新登場オンラインツール48個まとめ
CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍
最先端Webテクはこれ！コピペできるHTML/CSSスニペット77個まとめ
GraphQL 成熟度モデル - とろろこんぶろぐ