「CSS」に関連する技術ブログ
企業やコミュニティが発信する「CSS」に関連する技術ブログの一覧です。
全424件中 121 - 135件目
フロントエンド開発のコーディングガイドライン
2023/06/01
ブックマーク
はじめに はじめまして。フロントエンド開発グループに所属している岩釣です。 スタンバイ の月間ユーザー数が1000万人を突破しました！(2023年4月末) 本記事ではそんなスタンバイのフロントエンド開発のコーディングガイドラインを紹介します。 なぜコーディングガイドラインを作るのか コーディングガイドラインを作成して運用するメリットは以下です。 コードの
クリックジャッキングとその対策について調べた件
2023/05/30
ブックマーク
こんばんは！ いきなりですが、「クリックジャッキングとその対策」について調べた件の纏めになります。 セキュリティについて興味を持ち始めた今日この頃 本日も最後まで是非お付き合いください！ クリックジャッキング とは何か クリックジャッキングとは、ユーザーを騙して、ユーザーが思っているものとは別のリンクやボタンなどをクリックさせることです 引
S3から配信する静的WebコンテンツにCache-Controlを設定してキャッシュ対策
2023/05/29
ブックマーク
Insight EdgeのLead Engineerの日下です。 弊社ではちょっとしたWebアプリを作るときに、AWSを用いたサーバーレスアーキテクチャで フロントエンド CloudFront + S3 + SPA（React等） バックエンド API Gateway + Lambda という構成をしばしば使います。 今回は、この構成においてありがちなキャッシュによるバージョン不整合の対策について紹介します。 SPAにおけるキャッシュ問題 上記の構
新卒1年目の Web フロントエンドエンジニアが経験した課題解決とそこから得た成長
2023/05/24
ブックマーク
本記事は、22卒1年目の成長シリーズ 7日目の記事です。 はじめに こんにちは、2022年度にWeb ...
ブラウザの開発者ツールを使いこなそう
2023/05/19
ブックマーク
はじめに ブラウザの開発者ツールはウェブ開発において必要不可欠なツールです。 開発者ツールを上手に使うことで、ウェブサイトのデバッグやパフォーマンスの最適化、アクセシビリティの向上など多くのことが行えます。 本記事では、ブラウザの開発者ツールの基本的な使い方や様々なテクニックについて解説します。 開発者ツールとは何か 開発者ツールとは、ウ
2023年新卒インターン フロントエンド編
2023/05/16
ブックマーク
はじめに 初めまして、株式会社ココナラの新卒第1号として4月からジョインしましたひびきです。 本記事では、ココナラ初の新卒として本格的にジョインする前に行なった内定者インターンについて書いていきたいと思います。 目次 自己紹介・スキルセット 入社した経緯 インターンについて インターンの目標について 実務 人間関係 インターンの内容について 出勤頻
ヘッドレスUIコンポーネントでいこう -- Radix UI + Stitches がいい感じ
2023/05/12
ブックマーク
こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井 です。 ココナラ法律相談 と ココナラエージェント という2つのプロダクトのWebフロントエンド・バックエンド開発を担当しています。 この記事は、フロントエンド開発に使うUIコンポーネントライブラリの技術選定をするシーンでのお話です。 私たちが何を課題に感じていたのか、どう
Ruby 2.7に飽きたから秋田からRuby 3移行した話
2023/05/11
ブックマーク
Ruby のロゴについて 自己紹介 Ruby 3への移行 脱Refile 過去の先駆者 開戦 問題その１ 画像のURLがS3のエンドポイントになっている問題 問題その2 移行対象のレコードが大量問題 問題その3 画像が荒くなる問題 幾多の障害を乗り越え その他gemの更新 ついにRuby3へアップデート １番の影響 Ruby 3へのバージョンアップを終えて 最後に 自己紹介 2023年1月1
Intersection Observer APIを使ってスクロール後に下部メニューを表示させる
2023/05/09
ブックマーク
はじめに ページ上部に配置されたメニューバーをスクロースによって画面追従する際、通常は追従させる要素にstickyなどを付与して画面追従させるのが普通かと思います。 画面上部でついてくるこれです。 ですが、イレギュラーではありますが追従させる要素がスクロールによって画面から隠れた後、下部にその要素を配置するなどの要望があった際、window.scroll等を使
【Playwright 入門】Playwrightで始めるE2Eテスト
2023/05/09
ブックマーク
はじめに こんにちは！フロントエンド開発課の koki _matsuraです。 この記事では、E2Eテスト フレームワーク として用いられるPlaywrightのインストールといくつか基本的なテストコード、最後に 拡張機能 についてもご紹介させていただきます。これからPlaywrightでテストを書きたい人、E2Eテストに少しでも興味を持っていただける方に読んでいただけると幸いです。 目次は次
あなたが今！やるべきことがわかる「LIFULLアクセシビリティガイドライン」を公開しました
2023/04/28
ブックマーク
こんにちは、フロントエンドエンジニアの嶌田です。 アクセシビリティは今まで以上に大きな関心を寄せられるトピックになってきたように思います。個人で関心がある人、企業のなかで周りを巻き込み推進しようとしている人、すでに組織全体での取組みに変わりつつある企業など、状況は様々だと思います。弊社はというと、内側からの推進活動は広がりを見せつつ
超進化したAI「ChatGPT」が生み出す無限のクイズをライブ配信してみた
2023/04/27
ブックマーク
こんにちは、テリーです。2023年1月に急速に認知度が高まったAI、ChatGPTは世界で瞬く間に広がっています。急激に変わっていく社会には期待と不安の両方を感じる人もいるでしょう。携帯電話が出た時も、スマートフォンが出 […]
Laravel Viteを使ってTailwind CSSを導入する
2023/04/27
ブックマーク
こんにちは。配配メール開発課のmoryosukeです。 最新のLaravelではデフォルトのフロントエンドビルドツールがLaravel MixからLaravel Viteへと移行しました。 そこでTailwind CSS をビルドする手順を追いながらLaravel Viteに慣れていこうと思います。 Laravel Viteとは 事前準備 プロジェクト作成 Tailwind CSSを導入する 補足 最後に Laravel Viteとは Laravel ViteはLaravel用の高速なフロントエンド
Vueでpropsとslotを使って再利用コンポーネントを開発する話
2023/04/25
ブックマーク
こんにちは、KINTO Technologiesグローバル開発部でフロントエンド開発をしているクリスです。 普段フロントエンド開発でコンポーネントを開発する際はpropsを利用して必要な情報を渡す、という話はよく耳にすると思います。Angular, React, Vue, Svelteといった今よく使われているフレームワークではそれぞれの書き方でこの機能を実現しています。すべてのフレームワークを言
ReactでuseIdを使い一意な文字列を生成し汎用コンポーネントのid重複を防ぐ
2023/04/10
ブックマーク
はじめに こんにちは WESEEK で yaml から css まで何でも書く haruhikonyan です。 フォームなどをコンポーネント化したときに同じページにそのコンポーネントを使うと id の重複に困ったりしませんか？ そんな時に React が公式で提供している useId という hook を使うと解決するかもしれません。 しかし利用においては注意点があるので具体例とともに紹介したいと思います。 use