連載目次 Anthropicは2025年9月30日、同社の主力AIモデル「Claude」シリーズの最新版「Claude Sonnet 4.5」を公開した。“世界最高のコーディングモデル”（the best coding model in the world）と豪語するほどの自信を見せており、実際に前世代を上回る精度を達成している。 ソフトウェアエンジニアリング分野のベンチマーク（SWE-bench Verified）におけるコーディング性能比較（公式発表ページより引用） 横軸は主要AIモデル（例：Claude Sonnet 4.5、GPT-5-Codex、Gemini 2.5 Proなど）を示し、縦軸は「課題を正しく解決できた割合（％）」を表している。上に行くほどコード生成や修正タスクの精度が高いことを意味する。色付きのバーはClaudeシリーズ（Sonnet／Opus）を示しており、So

こんにちは。Algomatic AI Transformation(AX) のsergicalsix（@sergicalsix）です。 最近OpenAI の o3, o4-mini、Anthropic の Claude 3.7 Sonnet、Google の Gemini 2.5 Pro や Gemini 2.5 Flash など、次々と新しい大規模言語モデル（LLM）が登場しました。あまりのスピードに、最新動向を追い切れず困っている方も多いのではないでしょうか。 モデルを選ぶ際は、実際に触ってみた使用感や解きたい課題・利用環境を重視するのが理想です。しかし、すべてのモデルをあらゆるシナリオで試すのは現実的に難しいです。 そこで役立つのが公開ベンチマークのスコアです。自分で全モデルを試せなくても、共通データセットで測った成績をベースラインとして押さえておけば、おおまかな実力を比較できます。

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

タイトルやラベルの文字数が多くなったり、ボタンの数が増えたり、コンテンツが長い場合と短い場合があったり、想定外のコンテンツが使用された場合に対応できるよう、念のために備えたCSSの実装方法を紹介します。 現状はボタンが2個だけど、1個の場合や3個以上に増える場合も考慮して実装しておくと、メンテナンスが楽になります。 The Just in Case Mindset in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「念のため」の考え方 よくあるデザインで起こる想定外に備える 終わりに はじめに Webサイトを構築する際に、コンポーネントがさまざまな条件下で機能するか確認したい場合がよくあります。「念のため（Just in Case）の考え方」とは、そのコンポーネントに起こり

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F

こんにちは！　はっちゃんです。 今回はコーディングであるあるの「互い違いレイアウト」の組み方をご紹介します。 レスポンシブ対応で、SP表示時には縦並びになるようにします。 要件 PC表示 ブラウザ幅が769px以上だったらPCレイアウト表示 互い違い SP表示 ブラウザ幅が769px未満だったらSPレイアウト表示 均一に縦並び flex-directionで並びを入れ替える それでは早速組んでいきましょう。 互い違いには、Flexboxのflex-directionを使用します。 See the Pen Alternate Layout1 by k_hatsushi (@hatsushi_kazuya) on CodePen. メディアクエリでSP時にはFlexboxを解除 Flexboxを解除するだけで、DOMを書いた順に縦に積み上がっていきます。 See the Pen Alterna

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・macOS Catalina Sketch × inVision × Zeplin × GitHub(Abstract)からFigma に移行してみて｜Spacemarket Design｜note 先月に引き続き、Figma関連の記事が多いですね。 Figma だけになり、管理が楽になった とのこと。 macOS Catalina（10.15）がリリースされましたが、インストールはくれぐれも慎重に | DTP Transit macOS Catalinaでは32bitアプリが動作しないということは何年も前から告知されていたはずですが、知らずにインストールしてAdobe CS6以下が動かなく

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitH

CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。

リッチリザルトの種類は、Google公式サイトの「検索ギャラリー」にまとめられています。 年々サポートの範囲は広がっています。気になる方は一度ご確認ください。 構造化データの記述方法構造化データの記述する際にまず決めなければいけないのは、「ボキャブラリー」と「シンタックス」です。「ボキャブラリー」はマークアップするものの定義、「シンタックス」は構造化データの記述方式を指します。 以下のGoogle公式のドキュメントをもとに説明していきます。 参照）構造化データの仕組みについて【Google Developers】 ボキャブラリー今回は、代表的なボキャブラリー、schema.orgでの実装について説明します。 まず、schema.orgでマークアップする際にはタイプとプロパティを指定します 構造化データをするための準備として、「タイプ」「プロパティ」を決めます。 「タイプ（@type）」とは

概要 プログラミングをする際には、APIリファレンスやソースコードのコメントなどを英語で読むことが求められます。場合によっては英語で関数名を付けたり、ちょっとしたマニュアルを書いたりする機会もあります。ただしプログラミング時に求められる英単語は、一般的な英語で求められる英単語とは異なります。 本必須英単語リストでは、プログラミング時に求められ、特に目にすることが多い英単語を以下のカテゴリーに分けて選定しています（注1）。プログラミング英語の学習や知識確認にご活用ください。

SEOやWebマーケティングの悩みがありましたら、お気軽にナイルの無料相談をご利用ください！資料では、ナイルのSEO支援実績（事例）、コンサルティングの方針や進め方、費用の目安といった情報をご紹介しています。あわせてご覧ください。 サービス資料をダウンロードする 無料でナイルに相談する 構造化データとはどういうもの？ 構造化データとは、検索エンジンにページの内容を正確に伝えるためのデータ形式のことです。 例えば、人間が見れば「これは商品情報だ」「これはイベント情報だ」と理解できるページ内容も、検索エンジンからすると“ただの文字列”であって、（ある程度はわかるものの）完全に内容を理解できるわけではありません。 そこで、ページ内の情報を「これは商品名」「これは価格」「これは開催日」といった形でわかりやすくマークを付けてあげる――それが構造化データの役割です。 なお、構造化データはGoogleも

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン、UI 素材サイト「写真AC」、AIが生成した架空の人物の顔写真を無料素材として提供開始 – デザインってオモシロイ -MdN Design Interactive- 許可を得て集めた顔写真を元に、架空の人物の顔写真を生成し、ダウンロードして使うことができる。 とのことで、ところどころ不自然なものもありますが面白い試みですね。 意匠法改正が変えるWebサイトリリース・リニューアルのプロセス | Web担当者Forum 出願の前に公開されているものには意匠登録が認められません。 意匠権の審査は、現状、順調に進んでも半年から1年ほど掛かります とのことで、多くのWebサイトは制作してすぐに公開され

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの設計手法を取り入れることで様々なメリットがあります。 今回は、CSSの設計手法に関する基本と、3つの人気のCSSの設計手法をご紹介したいと思います。 メンテナンス性が向上する CSSの設計手法を正しく取り入れることによって、全体的に管理の行き届いたコードを記述することができ、メンテナンス性が向上します。 逆に、煩雑になってしまったコードではスタイルの優先順位が複雑になってしまっていたり、!importantが随所で登場してしまっているようなコードのことで、一度コードが崩壊してしまう

CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。 今回は、Codepenで2018年に人気の高かったHTMLスニペットベスト100選「The Most Hearted of 2018」が公開されていたので、その中でも特に印象に残った作品をまとめてご紹介します。あっと驚くようなエフェクトやテクニックを、今後のウェブデザイン制作にいかしてみましょう。 2018年人気だったすごいHTMLスニペットベスト【Codepen編】 #99 Animated CSS Seasons CSSのみでスタイリングされたイラストアニメーションで、四季をぞれぞれ表現しています。 See the Pen Animated CSS Seasons by agathaco (@agathaco) on CodePen. #97 A

ブログの新着情報をニュースやお知らせのように、サイトに読み込みたいときがあります。 その方法は、以下のような条件によって実装方法が異なります。 ・外部ドメインのブログのRSSを取得して表示 ・内部ドメインのブログのRSSを取得して表示 ・ドメイン内部のWordPressの新着情報を取得して表示 このページでは、それぞれのケースで、ブログのRSSを読み込むための、最適な方法をめとめました。 Google Feed APIは使用不可 これまでは、Google Feed APIを使用するのが一般的でした。簡単に実装できたので、私も複数のサイトで使ってました。 参考：Google Feed APIを使って外部ブログのRSSを表示する方法 しかし、突然に表示されなくなる問題が発生し、2016年頃には正式に廃止が発表されました。2017年の1月には実際に表示されなくなっていますので、代替手段で修正しま

コードによく使われる英単語だが、母語話者でないと語形変化がやや難しいかもしれず、注意して単語を選ばないと変な英語になるかもしれない単語について紹介する。 登録 登録する register 【動詞】 「商品を登録する」 registerItem() 登録した registered 【形容詞】 【動詞過去分詞】 登録された商品 registeredItems 「商品が登録された」 new ItemRegstered() 「登録済みか？」 if (item.isRegistered()) ... 登録 registering 【名詞】 「商品登録状況は承認済みか」 item.registeringState.isApproved 登録 registration 【名詞】 商品登録サービス class ItemRegisterationService 登録係(記録する側) registrar 【名

Webコーダーとしての指標の1つに「コーディングの速さ」があるかと思います。わたしは1年前にコーダーをメインの職にしようと決意してから、速さという指標を伸ばすために色々と取り入れて試してきました。 この記事では、Webサイトを作成する上のでコーディング速度を上げるために行っている（取り入れている）7つの方法をご紹介いたします。ぜひ、できそうなところから試していただけると嬉しいです！ ※ エディタはVSCodeを使っています。もしかすると他のエディタでは使い方が違う説明になっているかもしれませんが、あらかじめご理解いただけますと幸いです。

マイクロソフトは開発者向けイベントMicrosoft Connect(); 2018を開催。基調講演で、次のVisual Studioのメジャーバージョンアップとなる「Visual Studio 2019」を発表しました。 Visual Studio 2019では、GitHubで公開されたコードをもとに機械学習を行ったAIがコーディングを支援してくれる「IntelliCode」などによるコーディング機能の強化、GitHubとの統合強化や、Visual Studioをネットワークで接続してリモートでのペアプログラミングを支援するLive Shareなどによるコラボレーションの強化などを特徴としています。 参考：コーディングをAIが支援してくれる「Visual Studio IntelliCode」、Javaに対応。GitHubにあるコードを機械学習 参考：［速報］「Visual Studio