OpenAI o3, Claude 3.7 Sonnet , Gemini 2.5 Proの評価と解釈[2025年4月版] - Algomatic Tech Blog
こんにちは。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）が登場しました。あまりのスピードに、最新動向を追い切れず困っている方も多いのではないでしょうか。 モデルを選ぶ際は、実際に触ってみた使用感や解きたい課題・利用環境を重視するのが理想です。しかし、すべてのモデルをあらゆるシナリオで試すのは現実的に難しいです。 そこで役立つのが公開ベンチマークのスコアです。自分で全モデルを試せなくても、共通データセットで測った成績をベースラインとして押さえておけば、おおまかな実力を比較できます。
![OpenAI o3, Claude 3.7 Sonnet , Gemini 2.5 Proの評価と解釈[2025年4月版] - Algomatic Tech Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/2de9ca775ff29265af829f7fca45df2094bf2062/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Ff3d1957b65adfdb8950498fefa66374dd5ee5d1d%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fs%252Fsergicalsix%252F20250428%252F20250428165520.png)
よくあるデザインで起こる想定外のコンテンツに備える、CSSの実装方法のまとめ
タイトルやラベルの文字数が多くなったり、ボタンの数が増えたり、コンテンツが長い場合と短い場合があったり、想定外のコンテンツが使用された場合に対応できるよう、念のために備えたCSSの実装方法を紹介します。 現状はボタンが2個だけど、1個の場合や3個以上に増える場合も考慮して実装しておくと、メンテナンスが楽になります。 The Just in Case Mindset in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「念のため」の考え方 よくあるデザインで起こる想定外に備える 終わりに はじめに Webサイトを構築する際に、コンポーネントがさまざまな条件下で機能するか確認したい場合がよくあります。「念のため（Just in Case）の考え方」とは、そのコンポーネントに起こり
CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方
Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F
互い違いレイアウトの組み方〜レスポンシブ編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ はっちゃんです。 今回はコーディングであるあるの「互い違いレイアウト」の組み方をご紹介します。 レスポンシブ対応で、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
2019年10月の、これだけは押さえておきたいWeb関連の動き
「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以下が動かなく
CSSのクラス名を決めるときに使うリストをつくりました
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のメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
SEO初心者でもわかりやすい！構造化データマークアップの書き方とできること | 株式会社フルスピード - Growth Seed
リッチリザルトの種類は、Google公式サイトの「検索ギャラリー」にまとめられています。 年々サポートの範囲は広がっています。気になる方は一度ご確認ください。 構造化データの記述方法構造化データの記述する際にまず決めなければいけないのは、「ボキャブラリー」と「シンタックス」です。「ボキャブラリー」はマークアップするものの定義、「シンタックス」は構造化データの記述方式を指します。 以下のGoogle公式のドキュメントをもとに説明していきます。 参照）構造化データの仕組みについて【Google Developers】 ボキャブラリー今回は、代表的なボキャブラリー、schema.orgでの実装について説明します。 まず、schema.orgでマークアップする際にはタイプとプロパティを指定します 構造化データをするための準備として、「タイプ」「プロパティ」を決めます。 「タイプ（@type）」とは
構造化データとは？非エンジニアでもよく分かる！初心者向け徹底解説！
構造化データとは、検索エンジンがページ内容を理解しやすくなるデータ形式のことです。正しく記述することで検索エンジンがページの内容をより理解できるようになります。構造化データの種類によっては検索結果のリッチ化(リッチリザルト)につながるものもあります。 ここでは、初心者でも分かりやすいように構造化データの概要やHTMLでの記述方法、テストツールなどの基本情報を紹介します。 ※この記事は2014年に書かれたものを2021年最新版にコンサルタント青木が変更・追記いたしました。 この記事のポイント 構造化データとは、検索エンジンがページの内容を理解しやすくなるデータ形式のこと 構造化データの種類によっては、使用することで検索結果に画像やレビュー評価などのリッチリザルトが表示される場合がある なんでもかんでも構造化データを付与できるわけではないので、サイトのタイプに合わせて適切に使用することが大切
2019年5月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン、UI 素材サイト「写真AC」、AIが生成した架空の人物の顔写真を無料素材として提供開始 – デザインってオモシロイ -MdN Design Interactive- 許可を得て集めた顔写真を元に、架空の人物の顔写真を生成し、ダウンロードして使うことができる。 とのことで、ところどころ不自然なものもありますが面白い試みですね。 意匠法改正が変えるWebサイトリリース・リニューアルのプロセス | Web担当者Forum 出願の前に公開されているものには意匠登録が認められません。 意匠権の審査は、現状、順調に進んでも半年から1年ほど掛かります とのことで、多くのWebサイトは制作してすぐに公開され
【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends
CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの設計手法を取り入れることで様々なメリットがあります。 今回は、CSSの設計手法に関する基本と、3つの人気のCSSの設計手法をご紹介したいと思います。 メンテナンス性が向上する CSSの設計手法を正しく取り入れることによって、全体的に管理の行き届いたコードを記述することができ、メンテナンス性が向上します。 逆に、煩雑になってしまったコードではスタイルの優先順位が複雑になってしまっていたり、!importantが随所で登場してしまっているようなコードのことで、一度コードが崩壊してしまう
2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】
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を取得して表示 ・内部ドメインのブログのRSSを取得して表示 ・ドメイン内部のWordPressの新着情報を取得して表示 このページでは、それぞれのケースで、ブログのRSSを読み込むための、最適な方法をめとめました。 Google Feed APIは使用不可 これまでは、Google Feed APIを使用するのが一般的でした。簡単に実装できたので、私も複数のサイトで使ってました。 参考：Google Feed APIを使って外部ブログのRSSを表示する方法 しかし、突然に表示されなくなる問題が発生し、2016年頃には正式に廃止が発表されました。2017年の1月には実際に表示されなくなっていますので、代替手段で修正しま
コードに頻出する語形変化が難しい英単語: register, success, fail, data, statusなど - Qiita
コードによく使われる英単語だが、母語話者でないと語形変化がやや難しいかもしれず、注意して単語を選ばないと変な英語になるかもしれない単語について紹介する。 登録 登録する register 【動詞】 「商品を登録する」 registerItem() 登録した registered 【形容詞】 【動詞過去分詞】 登録された商品 registeredItems 「商品が登録された」 new ItemRegstered() 「登録済みか？」 if (item.isRegistered()) ... 登録 registering 【名詞】 「商品登録状況は承認済みか」 item.registeringState.isApproved 登録 registration 【名詞】 商品登録サービス class ItemRegisterationService 登録係(記録する側) registrar 【名
コーディングのスピードを上げるための７+２の方法！ | HPcode
Webコーダーとしての指標の1つに「コーディングの速さ」があるかと思います。わたしは1年前にコーダーをメインの職にしようと決意してから、速さという指標を伸ばすために色々と取り入れて試してきました。 この記事では、Webサイトを作成する上のでコーディング速度を上げるために行っている（取り入れている）7つの方法をご紹介いたします。ぜひ、できそうなところから試していただけると嬉しいです！ ※ エディタはVSCodeを使っています。もしかすると他のエディタでは使い方が違う説明になっているかもしれませんが、あらかじめご理解いただけますと幸いです。
【グーグル公式】AMPのインデックスについてぜひ知っておきたい10個のFAQ【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum
ほかにも、次のようなSEO関連情報を、今週もまとめてお届けする。 Q&AコンテンツのSEOがさらに強く？ グーグル検索結果に新リッチリザルト登場どのくらいスクロールしたかをグーグルはランキング要因にしているのか？SEOで忘れがちな「画像検索」のベストプラクティスをグーグルが更新旧Search Consoleの機能をグーグルが廃止にマイクロソフト、Edgeブラウザの独自エンジンを断念してChromeと同じエンジンベースに移行を決意グーグルマイビジネスで悪質な営業をする代理店を通報するフォームがあった！WordPress管理画面からSCやGAを直接チェックできるプラグイン、グーグルが開発中2018年、AMPはここまで進化してきたこれがLighthouseを使ったサイトの高速化だ！ 9点⇒94点にするためにやったこと 今週のピックアップAMPのインデックスについてぜひ知っておきたい10の「よくあ
［速報］Visual Studio 2019発表。AIによるコーディング支援、GitHub統合、Live Unit Testingなど強化。Microsoft Connect(); 2018
マイクロソフトは開発者向けイベント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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたが教わってるそのCSSテクニックはもう古い – TAKLOG
How to Wireframe a Website using Gutenberg - Stackable
プログラミング必須英単語600+ | プログラミング英語検定
