皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
4月7日 岩手県大船渡市の林野火災に関する被害状況等について（第30報） 4月3日 3月23日からの林野火災に関する被害状況等について（第15報） 4月1日 3月23日からの林野火災に関する被害状況等について（第14報） 4月1日 テレビ共同受信施設（辺地共聴施設）に関する支援窓口の開設について 3月31日 3月23日からの林野火災に関する被害状況等について（第13報） 3月31日 3月23日からの林野火災に関する被害状況等について（第12報） 3月31日 3月23日からの林野火災に関する被害状況等について（第11報） 3月31日 3月23日からの林野火災に関する被害状況等について（第10報） 3月31日 「公益事業者の電柱・管路等使用に関するガイドライン」の改定 3月28日 3月23日からの林野火災に関する被害状況等について（第9報） 3月28日 3月23日からの林野火災に関する被害状況
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
JavaScriptのfilter関数は、配列操作において非常に便利なメソッドの一つです。特に、特定の条件に基づいて配列から要素を抽出する際に使用されます。 この記事では、filter関数の基本的な使い方から、実際の使用例までを分かりやすく解説します。 filter関数とは filter関数は、配列の各要素に対して指定した条件をチェックし、条件に合致する要素のみを抽出して新しい配列を作成するメソッドです。この関数は、元の配列を変更せず、新しい配列を返します。 基本的な構文は以下の通りです。 const newArray = originalArray.filter(callback(element[, index[, array]])); callbackは、各要素に対して実行される関数であり、以下の引数を取ります。 element: 現在の配列要素 index (オプション): 現在の要
はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ
ビジネス Backlogは未来を楽にする 最初は手間だけど、1年後は使った自分を褒めたくなる 2024年12月14日、BacklogのユーザーグループであるJBUG（Japan Backlog User Group）は「Backlog World 2024 in YOKOHAMA」を開催した。Web... 0 0 クラウド ガバクラの足がかり QTmediaとさくらがLGWAN対応のWebサイトホスティング開始 さくらインターネットとQTmediaは、行政専用ネットワークLGWAN「LGWAN対応自治体向けWebサイトホスティングサービス」の提供を2024年7月25日... 0 0 WebPro 「KUSANAGI」の新バージョンでは複数のNginxのバージョンのインストールが可能に プライム・ストラテジーは超高速CMS実行環境「KUSANAGI」のバージョンアップを発表。新バージョンでは
-## Just-in-Time 改め arbitrary values +## Just-in-Time 改め arbitrary values (任意の値) -上記例にある `text-3xl` などのスタイルは予め Tailwind CSS が用意しているものですが、`tailwind.config.js` を編集することで簡単に変更・追加できます。ただし、1 回しか使わないスタイルでもいちいち `tailwind.config.js` に登録しないといけないので、その不便さを解消する機能として v2.1 から Just-in-Time (JIT) モードが導入されました。 +上記例にある `text-3xl` などのスタイルは予め Tailwind CSS が用意しているものですが、v3.4 までは `tailwind.config.js`、v4.0 からは CSS ファイルで `
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
Google は、すべてのユーザーがあらゆるブラウザで利用できる、美しく、アクセスしやすく、高速で安全なウェブサイトを構築できるようサポートしています。このサイトには、Chrome チームのメンバーや、ウェブ開発のトピック（ユーザー補助、パフォーマンス、デザインなど）を専門とする外部のエキスパートが執筆した、その取り組みをサポートするコンテンツが掲載されています。 Web Platform Baseline では、ウェブ プラットフォームの機能に対するブラウザのサポートに関する情報を明確にし、現在プロジェクトで使用できるウェブ プラットフォームの機能について明確な情報を提供します。web.dev の記事で、使用されている機能がすべてベースラインの一部である場合、ブラウザの互換性レベルは信頼できます。
1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。 詳しい開発のログは以下のスクラップにまとめています 👌 リリースしたアプリ ダウンロードはこちら。 ■ iOS ■ Android LPサイト アプリを開発したきっかけ 以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。 ただ、上記の運用をしている間に以下のような問題があることに気づきました。 振り返りの際に、今週の出来事を思い出せない まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい 良かった出来事のみピックアップしたい 振り返りを開催する時間が毎回ズレる 日付を忘れてスキップしてしまう そこで、上記を改善するためアプリを家族で開発しようという話になりました。 どんなアプリ？ memoirは1週間を振り替えるアプリとし
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. Brought to you by DigitalOcean DigitalOcean has the cloud computing services you need to su
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
ホームページやブログの作成、既存のWebサイトを再構築するときに役に立つのがCMS（コンテンツ・マネジメント・システム）です。デジタルマーケティングが主流になりつつある現代において、さまざまなCMSが誕生しています。 最近ではMA（マーケティングオートメーション）に機能の1つとして組み込まれていることも珍しくなく、こうした背景からユーザーからのニーズ（導入決断時の優先度）の高さを改めて実感させられます。一方で、数多くのサービスが乱立し、正直、どれを選べばよいのかわからない、という方も多いのではないでしょうか。 そこで今回は、CMSを選定する際に押さえるべきポイントと、おすすめのCMSを紹介します。 ■ ferretおすすめのCMS・サイト制作ツール一覧を見る 目次 CMSとは？ CMSを企業が導入するメリット Webサイトのデザインを簡単に管理できる SEO対策につながる アカウントの権限
![スマホ対応サイトもアプリも簡単に作れる！オススメCMS比較7選｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2d39b9d629ce87a4db967805e74156464618b7e/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fferret.akamaized.net%2Fuploads%2Farticle%2F7311%2Fog_image%2Fdefault-279901f5efdbbc129b91bdc34096fefb.jpg)
SREチームの金澤です。 PHP5.6→7.3バージョンアップが完了しました。 PHP5.3→5.6バージョンアップが完了してから約2カ月での移行となりました。 今回、その対応内容と結果を報告したいと思います。 バージョンアップ準備 PHP7化については、有用な記事が数多くありましたので、まずはそれらを参考にさせていただきました。 CakePHP2.10化 PHP5.6化後のライブラリアップデートのタイミングでCakePHP 2.8から2.10にバージョンアップしました。 CakePHP2.9のタイミングでObjectクラスが非推奨になったため、CakeObjectに名前変更しました。 ※PHP7ではObjectが予約語になります。 廃止、非推奨となる関数の対応 対応が必要だったのは主に以下の関数です。 __autoload ereg_* eregi each mysql_* split
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料の写真素材 · Pexels
