ソフトウェアの開発プロジェクトにはさまざまな経歴や役職を持つ人が関与するので、我が強い人や性格に難がある人が問題になることもしばしば発生します。ソフトウェア業界のよもやま話を語るブロガーのニール・グリーン氏が、ソフトウェア開発プロジェクトの中で問題になりがちな人をタイプごとにまとめつつ、それぞれのタイプの特徴と管理職向けの解決策を解説しました。 How to Deal with Difficult People on Software Projects https://www.howtodeal.dev/ 上記のサイトにアクセスしたのが以下。上から「プロダクトマネージャー」「デザイナー」「プロジェクトマネージャー」「開発マネージャー」「開発者」「品質保証(QA)」の6カテゴリに分かれていて、それぞれの役職の中によくいる「問題のある人」のタイプが動物のアイコンで示されています。例えば、「プロ
攻撃に立ち向かうイヌさんThe English version is available here. タイトル訂正: 「自作サービス『に』→『が』DDoS攻撃された話」「それはDDoSではない」という指摘に関して末尾に追記 (6/18)SaaSを開発していると本当にいろんな事が起こります。それらは時に開発者に喜びや悲しみ、怒り、感謝、落胆や興奮をくれます。思い返してみれば結局はみんないい思い出になるものです。先週末に、拙作の小さなウェブサービスがDDoS攻撃を受けました。言わずもがな、悪い出来事です。本稿ではこの事故がどんなものだったのか、どうやって対処したのかについてお話します。 どうもTAKUYAです。僕はInkdropというクロスプラットフォームなMarkdownノートアプリを独りで3年以上開発・運用しています。ユーザ数2万人以下のとてもニッチなSaaSで、僕はこのサービスで生計を立
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
あおり運転をするのはなぜ？ あおられたときの対処法は？ 加害者1,000人にヒアリングした教授に話を聞いた #くるまも - くるまも｜三井住友海上
こんにちは。ライターの石川大樹です。 「あおり運転」、最近よく聞きますよね。ニュースでもしばしば取り上げられるほか、ドライブレコーダーで撮影された映像がSNSで拡散されているのをよく見かけます。 そんなあおり運転は、2020年6月の道路交通法改正で「妨害運転罪」が創設され、厳罰化されたのですが、まだまだ被害は起きているようです。 もし自分が運転中や同乗中にあおられたら怖いし、どうすればいいんだろう……と心配になってしまいます。同じように不安に思っているドライバーもいるのではないでしょうか？ そこで今回は長年にわたり、あおり運転を研究し、加害者1,000人超にヒアリングしてきた明星大学の藤井靖先生に、「あおる側の心理」や「あおられやすい運転」「あおられたときの対処法」などを聞いてみました。 あおり運転の10類型。圧倒的に多い「車間距離不保持」 加害者の8割は「自覚がない」。6割は「自分もあお
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
どういうハッキングをされるのか？ さて、本題です。ここ10年ちょっとWordPress専門で仕事をしていますが、自分が遭遇したり知り合いが遭遇したケースは「サーバー内のファイルが書き換えられて、アクセスすると他のサイトにリダイレクトされる」というケースです。 サーバーのファイルを見てみると概ね以下の症状になります WordPressをインストールした各ディレクトリのindex.phpなど、phpファイルの文頭に怪しげなコードを書き込まれているwp-content/uploads/ の中には通常画像ファイルなどばかりのはずが、見に覚えのないファイルを大量に置かれる通常の投稿内にいろいろ投稿される（このケースは近年は自分や周りでは遭遇していない） これらのファイルは全部キレイに駆除しない限り、該当部分を削除したり、該当ファイルを削除しても残っているファイルから再度改竄してくるので面倒です。 復
祖父が「ちょっと辛い時は美味しいものを食べなさい。まあまあ辛い時は…」など段階に応じた対応の仕方を教えてくれてどれも大事にしている - Togetter
わかめ @senseiwakame 祖父がくれた「ちょっと辛いときは美味しいものを食べなさい。まぁまぁ辛いときは旅行の予定を立てなさい。なかなかに辛いときは新しい靴を買いなさい。かなり辛いときは医療の力を借りなさい。本当に辛くなると自分の段階が麻痺することも覚えておきなさい」という教えはかなり大事にして生きている。
初めて「論文」を書こうとしている人向けの、主にメンタル面（気持ち）の対処をメインにした書き方の指南書。 （ただし、メンタル面だけでなく書き方全般についても説明しています。） 筆者が査読付き論文を書くときに経験した最も大変だった（辛かった）ことは、研究の中身や書き方自体ではなく、諦めずに論文を書き…
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
東京都立大学教授の宮台真司氏（６３）が自身の襲撃事件を振り返った。 宮台氏は８日、ツイッターで「襲撃以降連鎖する刃傷事件で人が亡くなっている。僕が死ななかったのは武術の御蔭」と１１月２９日の襲撃事件以降、刃物による殺傷事件が続いている点を指摘した上で、自身が命を落とさなかったのは柔道や空手など武術を習得したおかげだったとしている。 さらに「だがミスをした。相手が倒れた際に武器を奪おうとし、膝上を深く刺された。中２で始めた時、顧問先生が言った。武術には戦う訓練しかない。だが武器を持つ相手との実践の基本は、相手を怯ませて逃げること」と反省点を上げた。 宮台氏によると、家族からは「なぜ悲鳴をあげなかったか？」と聞かれたという。これに同氏は「どの武術にも悲鳴をあげる訓練はなかった」とした上で「だがそれよりも、社会的性別による刷り込みで、緊急時に思わず悲鳴をあげる回路が大脳皮質に形成されていないのが
プログラミングを行う上でバージョン管理システムとしてよく利用される「Git」において、ほとんどの操作をやり直せるコマンド「git undo」をTwitterで働くエンジニアのarxanasさんが開発・公開しています。 git undo: We can do better https://blog.waleedkhan.name/git-undo/ Gitはユーザーのさまざまなうっかりミスに対してデータが失われにくい構造に設計されているものの、実際に操作ミスをしてしまった際にもとの状態に戻すにはそれぞれの状況に応じて別のコマンドを使わなくてはならず、「初心者がさらに間違いを重ねて複雑怪奇な状態にしてしまう」というケースがありがち。 こうした状況を解決するためにarxanasさんが開発したのが「git undo」です。git undoはその名の通り、間違って行ってしまった操作をやり直せるコマン
品質やテストといった活動が「本質的にアジャイルになって変わらなければならない」といった問題を定義し、その解決手段を提案する「今、全エンジニアに求められる『アジャイル開発での品質視点の変化』」。ここで株式会社デジタルハーツホールディングスの高橋氏が登壇。最後に、あらためて参加者からの質問に回答します。前回はこちらから。 どうすればうまくリファクタリングができるか 高橋寿一氏（以下、高橋）：じゃあここでもう1回Q&Aタイムを取ります。 高木陽平氏（以下、高木）：ありがとうございます。今Q&Aにまだ質問が上がっていないみたいなので、ちょっと私から質問します。リファクタリングをしなければいけないところって、逆に手をつけられないようなけっこう複雑怪奇な部分だと思うんです。そこらへんはどうすればうまくリファクタリングができるんでしょうっていう（笑）。 高橋：まず、日本人がすごくリファクタリングが嫌いな
CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
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
ウェブサイトの死活監視サービスは数多く存在しますが、自分でサーバーを用意する必要があったり、監視対象が一定数を超えると有料になったりと、導入に障壁を感じる場合もあります。無料の死活監視ソフトウェア「Upptime」は、GitHub ActionsやGitHub PagesといったGitHubのサービスを使って、簡単にウェブサイトの死活監視を行うことができます。 Upptime https://upptime.js.org/ GitHub - upptime/upptime: ⬆️ Uptime monitor and status page powered by GitHub https://github.com/upptime/upptime UpptimeはGitHub Actionsで5分ごとにウェブサイトの死活監視を行い、ウェブサイトがダウンした場合はGitHubのIssuesに報
📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.
フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。 数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=num
![📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.](https://cdn-ak-scissors.b.st-hatena.com/image/square/fabaee500541121aedd5673e2ef24a6ad3fc46aa/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F20987625%2Frectangle_large_type_2_6362b402374299fdb8316dd17855d5fb.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
WEBサービス開発歴7ヶ月目に突入しましたにこと申します。 先日、GithubにAWSアクセスキーをあげてしまいました。 その時は事の重大さをわかっておらず、言われるがままにコマンドをうち対処が出来たのですが、調べれば調べるほど「とんでもないことをしていた・・・！」ということがわかりました。 AWSで不正利用され80000ドルの請求が来た話 初心者がAWSでミスって不正利用されて$6,000請求、泣きそうになったお話。 もう今後アクセスキーをあげることはないですが、愚かな人間なのでまた何らかを間違えてやってしまうかもしれません・・・。 二度とないことを誓いつつ、もし万が一やらかしてしまった場合、また同じようにアクセスキーをあげてしまったような方に向け、手順をしっかり残したいと思います。 まずはAWSのアクセスキーを無効化 ※2021/1/30追記 Githubの手順よりも先にAWSのアクセ
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。仕様上許可されないものは赤色で点滅、ダメではないが、やらない方がベターなものは黄色で点滅するようになっています。 当記事では下記のデモを見ながらだと理解を深めやすいので、合わせて読むことをオススメします。 サンプルを別ウィンドウで開く コー
CSS Gridで2カラムのレイアウト（メインとサイドバー）を実装し、サイドバーにposition: sticky;を定義したけど、機能しなかったことはありませんか？ CSS Gridでスティッキーが効かないときの原因とその対応方法を紹介します。 Using Position Sticky With CSS Grid by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに gridコンテナの子でposition: sticky;が機能しない align-itemsのデフォルトの動作 別の例 終わりに はじめに position: sticky;がgridコンテナの子で期待通りに機能しなかったことはありませんか？ 数日前、私は友人がまさにその問題を解決するのを手伝っていたので、それについて解説し
ウェブアプリに対する典型的な攻撃手法とその対策まとめ
ブラウザの機能が強化されるとともに、多様なアプリケーションがウェブ上で実現できるようになっています。同時に、ウェブサイトやウェブアプリが重要な情報を取り扱うケースも増えて、ハッカーの攻撃対象になることも多くなってきました。そうした場面でハッカーがよく利用する典型的な攻撃手法とその対策について、エンジニアのヴァルン・ナイクさんがブログにまとめています。 CSRF, CORS, and HTTP Security headers Demystified https://blog.vnaik.com/posts/web-attacks.html ◆1：CSRF CSRFはクロスサイトリクエストフォージェリの略称で、ユーザーがログイン済みのウェブサイトに対して第三者がアクションを実行させる攻撃のことです。攻撃は下記の手順で行われます。 1. ユーザーが悪意あるウェブサイトにアクセスする 2. 悪意
WordPressは世界で1番使用されているCMSかつオープンソースであるが故に、悪意のある第三者やプログラムから世界で1番攻撃されやすいCMSと言われています。 私自身も何度か攻撃を受けていて、実害に及ばなかったものから及んだものまで様々でした。クライアントの稼働しているWEBサイトに実害があった場合は、原因究明や報告、一次対応から恒久的対策までを行い、安全性を確保した上で再度稼働させる必要があり、その作業は簡単なものではありません。 被害があるのはクライアントだけではなく、そのサイトにアクセスしたユーザーに及びます。たとえ納品後の保守契約を結んでいなかったとしても、実装者の責任としてクライアント、ユーザーに安心して利用できるWEBサイトを目指さなければいけません。 私はセキュリティの専門家ではないもののWordPressを10年以上触っている中で様々な問題に当たり、対応してきました。そ
視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【コピペ可】background-attachment: fixed;がスマホ（iOSのSafari）で効かない問題を完全に解決する【CSSのみ】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./destyle.css" /> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="Firstview">FirstView</div> <section class="Section"> <div class
ウェブ制作をする上でCSSでのスタイルの記述は必須ですが、意外とデバッグが難しくデザイン通りに実装するには手間がかかります。 そんなときに活躍するのがGoogle Chromeの「デベロッパーツール」です。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。 この記事ではデベロッパーツールでCSSをデバッグする方法や便利な機能などを紹介します。記事で使用しているデモは以下のリンクから確認できるので、実際にデベロッパーツールで操作しながら読み進めてみてください。 サンプルを別ウインドウで開く ソースコードを確認する 1. DOMのスタイルを確認 / 変更する デベロッパーツールでは、画面上でスタイルの確認、変更ができます。 (1)デベロッパーツールを開く まずはGoogle Chromeを開きます。 確認したい箇所を右クリックし、［
無料でJavaScriptによるトラッキングを防げるマルウェア対策拡張機能「JShelter」をフリーソフトウェア財団が発表
フリーソフトウェア財団が2021年9月30日に、トラッキングやデータ収集などJavaScriptを悪用したマルウェアによるリスクを軽減するブラウザ拡張機能「JShelter」を発表しました。 JShelter: Home https://jshelter.org/ FSF announces JShelter browser add-on to combat threats from nonfree JavaScript — Free Software Foundation — Working together for free software https://www.fsf.org/news/fsf-announces-jshelter-browser-add-on-to-combat-threats-from-nonfree-javascript JavaScriptを使えば、ブラウ
Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります
間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chrome 122までは何もしませんでしたが、Chrome 123以降は適用されて異なるレイアウトになってしまう可能性があります。 これは同様に間もなくリリースされるSafari 17.4にも適用されます。 Support for align-content in block and table layouts by Rachel Andrew 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdrop inheritance by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 これまでの::backdrop疑似要素 アップデートされた::backdrop疑似要素 これまでの::backdrop疑似要素 フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑
水平スクロールバーが表示されないように実装したのに、なぜか表示されてしまう、デベロッパーのあるあるです。横に広がってしまったのはCSSの機能が原因なのか、ブラウザの実装が原因なのか、どのような手順でそれを解決したかを紹介します。 The Minimum Content Size In CSS Grid by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実現しようとしているレイアウト 予期しない水平スクロールバーが表示される なぜこの現象が起こったのか 問題の解決方法 終わりに はじめに コンポーネントを実装しているときに、予期しない水平スクロールバーが表示されていることに気がつくことがあります。問題を修正するために何度も試行錯誤するうちに、原因が全く別なところだったことはありませんか？
こんにちは、Technology部のジョシュです。 今日は、最近バズっている生成AIモデル「Claude 3」と「GPT-4」を比べてみましょう！ 生成AIが絶え間なく進化し続けるなかで、2024年3月に登場したAnthropic社の大規模言語モデルClaude 3。OpenAI社のGPT-4と比較され、多くの議論を呼び起こしています。 この記事ではこれら2つのモデルを深掘りし、それぞれの特徴、能力、そして生成したコードの結果を比較しながらご紹介します。生成AIのトレンドを知りたい方やAI開発に関心を持つ方々のご参考になれば幸いです。 GPT-4とClaude 3の概要 OpenAI社が開発した言語モデルGPT-4は生成AIを広めたモデルとして非常に有名で、様々なタスクをこなす能力があります。そんな中で3月に登場したAnthropic社のClaude 3は、いくつかの分野ではGPT-4を上
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「ITの開発現場によくいるやっかいな人」の対処法をタイプごとに解説したサイトが登場
自作サービスがDDoS攻撃された話 - 週休７日で働きたい
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
覚えれば一生もの！ ウェブエンジニアのための正規表現活用入門 - ICS MEDIA
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
WordPressが改竄された時の復旧方法と絶対に改竄されない対策
論文の書き方 - 主にメンタル面の対処を中心として
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
宮台真司氏 襲撃男と格闘していた「僕が死ななかったのは武術の御蔭」 | 東スポWEB
Gitの操作を間違ってしまった時に簡単に元に戻せる「git undo」を使う方法
「まともに単体テストを書ける人は実はすごく少ない」 市場バグを発生させない“単体テストで対処する”という考え方
CSS）z-indexのベストプラクティスを考える
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
GitHubのサービスを駆使してウェブサイトの死活監視が無料で行える「Upptime」
AWSアクセスキーをGithubにあげてしまった時の対処方法 - Qiita
CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法
駆け出しデザイナー・エンジニアにこそ見ていただきたいWordPressの脆弱性とセキュリティ - Qiita
HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ - ICS MEDIA
あなたがまだ知らないReactのテクニック10選 - Qiita
SCSSからCSSネスティングに切り替えたい人に贈る3つの罠 - Qiita
使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法 - ICS MEDIA
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
CSS Gridのカラム幅を1frにしたときのワナ！意図せぬ水平スクロールバーが表示されてしまった時の解決方法
Claude 3とGPT-4のコーディング性能を比較！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
hinano2.lo.gob.jp
necomimii.hatenablog.com
www.yamakei-online.com
digital.asahi.com
ameblo.jp/joe-saito-balance-chosei
news.yahoo.co.jp