こちらの記事内容は3年以上前のものなので、記事内にあるアプリケーションなどの動作やUIは実際と異なる可能性があるのでご注意ください。 (2023/01/04追記) iPadでプログラミングwwwアホちゃうかwww ワイ「え？お前全部iPadでプログラミングしてんの？そんなん効率悪いに決まっとるやんw」 ワイ「せいぜいでっかい画面でGithubのコード眺めるくらいしかできないやろwてかハイライトすらないんじゃn」 ?!(Monokaiで表示されとるやんけ...) ワイ「おっ、おう。シンタックスハイライトくらいはできるんやな。」 ワイ「まあ、考えてみればそのくらいは余裕だわなwでもな〜wコードだけ書けてもプレビューは？流石にそれが出来ないことには使えるとはいえn」 ?!?!(localhostで立ててくれるんか...これならCDN使えば簡単なサイトくらいやったらiPadだけで楽に作れるやんけ.

2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多

HTMLとCSSの実務レベルの知識とスキルが身につく解説書を紹介します。 FlexboxやCSS Gridを使用したさまざまな基本レイアウト、実務でよく使用されるレイアウトやコンポーネント、表組み・フォームの実装、メンテナンス性に優れたCSS設計、アクセシビリティに配慮したマークアップ、WordPress化に適した設計方法など、即戦力となる実装テクニックが学べます。 そして、朗報です！！！🎉 去年の暮れに発売されたばかりですが、本日からKindle版が半額セールの対象になっています。期間は3/29まで、絶対お見逃しないように！ タイトルの「引き出しを増やす」とある通り、レイアウトやコンポーネントの汎用性に優れたコードが豊富に掲載されており、かなり便利な一冊です。 HTMLとCSSの中級者向けで、業務としてコーディング・マークアップに取り組んでいる人向けの解説書です。デザインカンプから情報

最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法

バラバラになってしまったHTMLのインデントを一発で整理したい。閉じタグが漏れていないかチェックしたい。 そんなときに便利なWebツールが「Prettier」です。 これはもともと、コードエディターである「Visual Studio Code（通称：VS Code）」のプラグインとして有名なツール。しかし実はWeb版もありまして、これがとても手軽で便利なのです。 面倒なインストール作業や会員登録なども不要。VS Codeをインストールする必要すらありませんので、手軽なHTMLチェッカーとして活用してみてください。 コード整形ツール「Prettier」のWeb版が手軽で便利 今回の主役「Prettier」は以下のリンクから使いはじめられます。リンクにアクセスしたらTRY IT ONLINEをクリックしてください。

「Pug(パグ)」って何？ HTMLと見比べながら7つのメリットを紹介！ 公開日 : 2021.11.01 最終更新日 : 2023.08.28 コーディング そもそも「Pug」とは？Pugとは「パグ」と読み、HTMLを効率的に書くための記述方法です。 「テンプレートエンジン」と言われるもののひとつです。 ※犬の種類ではないです。 HTMLの場合は拡張子が.htmlですが、Pugの場合は .pugとなります。 Pugを扱う注意点としては、PugファイルはWebブラウザが認識してくれないので、通常のHTMLに「変換」する必要があります。通常は、「コンパイル」といって、タスクランナー（gulpなど）やコンパイラーアプリ（Preprosなど）を用いて自動変換しますが、今回はPugのメリット紹介のため変換方法については割愛します。 Pugのメリット7つ今回は、PugとHTMLを見比べながら、Pug

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。 最新のファビコン（favicon）のサイズ一覧と作り方について解説します。 本当に必要なファビコンだけをピックアップしました！ ファビコンサイズや作り方についてWebデザイン初心者の方にも分かりやすく解説いたします。

こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン

レスポンシブHTMLメールとは、PCやスマートフォンなどのデバイスの画面サイズに応じて、自動的にレイアウトや画像サイズを最適化して表示するHTMLメールのことです。1つのソースで様々なデバイス表示に対応することができます。 しかしながら、HTMLメールのレスポンシブ化の方法や手順は、Webサイトのレスポンシブ化とは少し異なる点があります。既にレスポンシブデザインを理解しているWebサイト制作者の方でも、HTMLメール用のレスポンシブ化について学んでおく必要があるでしょう。 本記事では、多くのメールクライアントで正しく表示される、シンプルなレスポンシブHTMLメールの作成方法を具体的なコーディング方法も交えながら、初心者の方にもわかりやすく解説します。

この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ CSSコピペで完成！押したくなるWebボタンデザインまとめ Webデザインの引き出しを増やす、コピペできる最新HTMl／CSSスニペットまとめ 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 画

ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載7回目となる本記事では「ウェブ業界で、2010年代から変化したもの」をテーマとしてアンケート結果を紹介します。 floatプロパティーは現役？ floatプロパティーは、CSSレイアウトのために2000年代中頃からテーブルレイアウトに代わって使われてきました。FlexboxやCSS Gridなど、他にレイアウト手法が存在する現在において、floatプロパティーはどれほど使われているのでしょうか。 1829票の回答があり「とてもよく使う」が5.7%、「たまに使う」が19.8%、「ほとんど使わない」が69%、「floatを知らない」が5.5%でした。 現在はfloatプロパティーを使う

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック

2021年12月27日 Webサイト制作, Webデザイン HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう！ ↑私が10年以上利用している会計ソフト！ Codestep Codestepは作って学ぶコーディング学習サイト。HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるための学習サイトです。HTML/CSSだけではなく、WordPress用の教材もあります。 コ

before, after といった疑似要素は単一の HTML タグに装飾を加える場合非常に便利。 ところが全てのタグに対して疑似要素が使えるわけではないので、例えば img タグに疑似要素を使おうとすると途端に思った描画がされず、驚いた人も少なくないかと。 本記事ではこれについてまとめておきます。 疑似要素が効かない HTML タグ まず HMTL5 のタグで疑似要素が効かないものは以下の通り brwbrcanvasembedobjectaudioiframeimgvideoinputtextareaselectlegendbuttondetailsfieldset 2021年8月17日加筆：button タグのコードに閉じタグが無かったため CodePen で正しい表記が出来ていませんでした。legend, button, details, fieldset には疑似要素が有効です。

画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版

この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう

コーディングを勉強している方や、普段当たり前のようにコーディングしているけれど、上手く使えているのか不安な方向けにGoogle HTML/CSS Guideの翻訳記事を書きました。（2024年02月29日更新） 色んな方のコーディングを見ていると実に様々。情報や知識が古いままで、今では推奨されない書き方も散見されます。 特に仕事で使っていると、誰かに指摘されない限り自分のコーディングを見直す事は無いかもしれません。 ですがW3Cの定めたHTML5の廃止など、変化の速い業界では定期的な見直しは勿論、何か指標となる物があると安心です。 そこで今回はGoogleが用意しているgoogle html/css style guideのドキュメントを元に、Googleコーディング規約と要点を解説。このコーディングガイドラインが絶対的な正解では無いかも知れませんが、参考になれば嬉しいです。 Google

この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2020年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2020 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されているとは思えない、シンプルながら効果的なテクニックが多数ランクインしていた2020年。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Animated clip-path slider Concept 画面を縦半分に二分割した画像スライダーで、画像にマウスホバ

未経験からコーダーとして仕事をし始めて2年が経過しました。 最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。 自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。 デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。 この記事の前提 コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい

HTMLとCSSを真剣に学びたい人にお勧めの本を紹介します。 HTML5とCSS3の仕様書に基づいて、知識をしっかり身につけ、実践的なテクニックを本格的に学べます。Web制作者が持っておいて間違いのない一冊です。 実装の現場で必要とされる、リソースの先読みや画像の遅延読み込みなどの高速化テクニック、float時代のクリアフィックスを簡単に実現できるフロールートなど、必要な知識をまとめて吸収できます。 本書はコーダーの定番書である前書の第2版。 現在の最新仕様、HTMLは標準仕様はW3CからWHATWGに一本化され、CSSは各種機能の追加や主要ブラウザでの対応が進んでいます。ブラウザもChromiumベースのEdgeがリリースされ、使える便利な機能が増えています。 第2版はそれらに対応した解説書で、先日当ブログで紹介した:is()疑似クラス関数、min(), max(), clamp()比較

今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに details要素 contenteditable属性 map要素 mark要素 data属性 output要素 datalist要素 値range meter要素 input要素 次に学ぶべきこと はじめに HTML5は、新しいものではありません。すでにわたし達は最初のリリース（2008年1月）からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つ

ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は

HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス

こんにちは。koyaです。 突然ですが、龍が如く7はプレイしましたか？ 今まで龍が如くシリーズをプレイしたことはありませんでしたが、物語の舞台が関内、伊勢佐木町だったため思わず買ってしまいました。 見覚えのある景色を走り回るのはプレイしてて楽しかったです。横浜にゆかりのある方には是非触って欲しいです。 さて、今回はタイトルの通りよく間違いを見かけるHTML5の要素についてまとめたいと思います。 僕もマークアップを始めた頃は<section>と<article>の違いなどがさっぱりだったので、初心者の方など参考にしていただければと思います。 section要素 article要素 div要素 ul、ol要素 section要素 section要素は文脈のセクション分けをするためのタグです。本で言うと目次のようなものですね。 文脈を分けるためのものなので、見出し要素(h1〜h6)が要素内に必ず

HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。 HTML5基本テンプレート 新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無名のドキュメント</title> <meta name="description" content="メタディスクリプションを記述します。"> <link rel="stylesheet" type="text/css" href="theme.css

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu

ブラウザの枠外からポップアップやスライドして表示される通知パネルを実装するために、HTMLの新しい要素<toast>ができるかもしれません。 ブラウザへの実装日はまだ決まっていませんが、Chromiumの開発者が提案しているので、けっこう早くに実装されるかもしれませんね。 Toast UI element -Chrome Platform Status UI要素としてのトーストとは toast要素の提案内容 UI要素としてのトーストとは UI要素としてのトーストは、最近のWebサイトやスマホアプリでもかなり多く見かけます。トーストを実装するためのライブラリも数多く存在します。 名前の由来は、通知パネルの表示アニメーションがトースターからトーストがでてくる感じだからでしょう。 Notyf React-Toastify Toast -Blueprint toast要素の提案内容 toast要素

リンクを新しいタブで開くには、a要素に「target="_blank"」を加えます。 実はこの「target="_blank"」はbase要素にも使用でき、ページ内のすべてのリンクに「target="_blank"」を適用することができます。

Googleさんが4月21日までにモバイルフレンドリーなサイトにしないと、スマホ検索結果の順位を落とす（もしくはフレンドリーサイトを上げる）事を正式に発表した。 ということで、 レスポンシブウェブデザイン化を行なう際に必要なメディアクエリー等を使用するため、所有サイトをXHTML（XHTML1.0 Transitional）からHTML5に変換した。 といっても、HTML5で使えなくなったタグや要素は結構な量あるので、あくまでヘッダー部分とかのパッと見て目につく部分のみを変換しただけの簡易的なものなので注意。 まあ、検索エンジンはhtml5として読み取ってくれるからOKなんだけど、きっちりhtml5にするなら、がっつり勉強が必要と思われ。 とりあえず、以下置換した手順っていうか、置換したコード一覧。 置換したコード 以下の置換前・置換後のコードを置換ツールを使って変換した。 宣言文1 XH

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c

Extract bgはフルサイズでも縮小せずにダウンロードできる画像背景消去ツールです。よくある、画像をアップロードすると自動で背景を削除して透過画像にしてくれるやつです。 以前にいくつかご紹介しましたが、過去の背景削除ツールと異なるのは削除後の画像がフルサイズのままダウンロード可能という点です。 勿論、ユーザー登録やクレカの登録なども不要となっています。大きなメリットではありますが、今のところ、開発者の顔が見えないので利用の際はご注意ください。一応ビジネスモデルとして有償APIを提供しているようです。 Extract bg

1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im

Chrome デベロッパーツールのスポイトツールは、ブラウザ内のカラーしか取得できませんでしたが、Chrome 103の新機能として、ブラウザ外のカラーも取得できるようになりました。 ブラウザ外がOKになったので、別アプリで開いている画像からカラーを取得することもできます。

すべてのAIは ここに集まる 最新のAI研究や、様々な実行プラットフォーム、300種類以上のAIモデル、あらゆるデバイスをつなぎ、ひとつのフレームワークで動かす、ailia SDK。叶えたいAIの実現が加速する、世界最高水準のAI開発環境です。 AIの実装を もっとシンプルに もっと最適に。 axはひとつの信念のもと、自分たちの手で様々なソリューションを開発しています。だからこそ、複雑で時間がかかるAIの実装も、容易に、かつ最適な形で実現できます。

日経ビジネスにて、ナイルの新卒採用の取り組み 「選べる面接官」制度が紹介されました メディア掲載実績2024.06.18

ラーメンの可能性は無限大です。決まった調理方法や正解がなく、欧州の世界を代表する様々な食文化との融合が可能。私たちは札幌ラーメンの礎を築いた実績とノウハウを結集させ、日本の麺と欧州の食文化の融合によって世界に発信できるラーメンを育てていきます。

右と左の矢印を使ってスライドショーをナビゲートするか、モバイルデバイスを使用している場合は左右にスワイプします

フロントエンドエンジニアの茶木です… IE11が終了して、思い切って使えるようになったCSSがあります。 そのひとつ CSS line-clamp についてです。 「3行超えたら省略の3点リーダー出したい！」とデザイナーの皆さんに言われたときに、 なるほど、そうですね、複数行の3点リーダー出したいですよね！わかります！ただちょっと不可能ではないんですけど、クロスブラウザでは、完全対応ができなくてですね、1行の省略だったら簡単なんですが、いえ、決して面倒臭がってるわけじゃなくてですね？デザイン上の必要性も理解してますよ？もちろん！ただ、IEで未対応のため、JSを書く必要がありまして、ブロックのサイズが可変だったりすると、リサイズが発生すると収まる文字数も代わりますでしょ？そうすると省略文字数を計算し直すのですが、それが大変というか、もちろん既存のポリフィルが無いわけじゃないんですが、ポリフィ

2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 ↑私が10年以上利用している会計ソフト！ モバイル幅Webサイトの特徴 デスクトップで見ても狭いコンテンツの幅 よくあるWebサイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示