Web Fundamentals — Google DevelopersGoogle では、すべてのユーザーにとって、美しく、アクセスしやすく、高速で、安全なウェブサイトを構築できるよう、クロスブラウザ対応のウェブサイトを作成したいと考えています。このサイトには、Chrome チームのメンバーや外部の専門家が作成した、移行を支援するコンテンツが揃っています。
CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。 たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。 CSS コンテナクエリの基礎知識と便利な
Web制作が捗る！おすすめのChrome拡張機能18選【2021年版】 | Web Design Trends
Web制作や情報収集など、Google Chromeをメインブラウザで使用している方はとても多いと思います。 Chromeの便利な機能の1つが拡張機能ですが、きちんと活用してますか？拡張機能を活用することで、Web制作業務が効率化されたり、日々の情報収集が行いやすくなったりします。 今回は、Web制作者やデザイナー向けのGoogle Chromeのおすすめ拡張機能をご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
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. バック
Googleフォントをサブセット化してページの読み込みをスムーズに
2023年6月8日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！ ↑私が10年以上利用している会計ソフト！ Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見本の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
最新のSEO事情！schema.orgで構造化マークアップせよ！ - Qiita
schema.orgとは schema.orgの仕様通りにHTMLにマークアップする事で、Google,Yahoo!,Microsoftなどの検索エンジンに正確な情報を収集してもらい、ユーザーに最適な検索結果を提供するというものです。 例えば本について書かれたHTMLがあったとします。その情報に対し「ここには本の題名が書いてあります」「ここには本の出版日が書いてあります」「ここには著者の名前が書いてあります」などの、HTMLでは伝えきることができない、より詳しい情報をクローラーに伝えることを目的としたものです schema.orgのメリット 1. 検索エンジンでリッチスニペットが表示される schema.orgではmicrodataという方式でマークアップすることで、クローラーがページの内容を解析しやすくなります。その結果、検索エンジンにリッチスニペットを表示することができます。 リッチス
Budou: 日本語のための自動折り返し制御ツール
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
あなたのWebページ表示を爆速にするための、HTTPリクエスト状況分析ガイド（前編） | Moz - SEOとインバウンドマーケティングの実践情報
Webページの表示を高速化するための無料ツールWebPagetestを使って、「どこに問題があり、どう解決するのか」を調べる方法を解説する。 画像・JavaScript・CSSといったページを構成する要素こそが表示パフォーマンスの要因であり、HTTPリクエストの数やTCP接続・1バイト目までの時間（TTFB）などを調べれば、遅い原因がどこかわかるのだ。 今ではだれもがよく知っていることだが、SEOとユーザー体験の観点から見て、ウェブページの表示速度は非常に重要だ。ページの表示が速いほど検索エンジンによる検索順位も上がるし、ウェブサイトの動作が速ければユーザーが離脱せずにたくさんのページを見て、コンバージョン率も高くなる可能性が上がる。 要するに、賢明なWeb担当者やSEO専門家なら、コンテンツと同様にページ表示速度の最適化についても考慮しなければならない。 ウェブサイトの表示速度（パフォー
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
モバイルフレンドリー対応_GoogleとAppleの推奨フォントは？ | ブログ | SINAP - 株式会社シナップ
こんにちは、内藤です。 モバイルフレンドリー対応の連載、第2回目です。今回は、GoogleとAppleの推奨するフォントについて調べたので、それをお伝えしたいと思います！ とはいえ、ウェブ制作をされている方ならご存知の方は多いと思いますので、今回はさらっとおさらいしていただければと思います。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォントは？」 第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」 第4回：「スマホサイトの「続きを読む」は必要か？」 第5回：「スマホで読まれる文字数は？」 第6回：「記事をページ分割するメリット・デメリット」 それでは第2回、いってみましょう。 フォントの設計にある程度の正解は存在する ウェブは誰のものでもないので、良くも悪くも「このルールに従って作りなさい」
Googleカレンダーのデザインをカスタマイズして埋め込む方法 | 東京上野のWeb制作会社LIG
こんにちは、デザイナーのサリーです。 LIGが運営するシェアオフィス「いいオフィス」では連日イベントが行われており、お客様からイベントに関するお問い合わせも多く頂くようになりました。 そこで、いいオフィスサイトにイベントカレンダーを表示しよう！ということに。 しかし、Googleカレンダーのデザインが、サイトのデザインに合わなかったんです(´･_･`) Googleカレンダーは2011年に新しいデザインになりましたが、埋め込むときは青い枠のついた旧デザインしか選べません。あまり時間もかけられないし、難しいことはせずCSSだけ上書きしたい……。 何かいい方法はないかググってみたところ、「gcalendar-wrapper.php」というスクリプトを見つけたので使ってみたら、まさに求めていた挙動を実現できました！ 今回は、gcalendar-wrapper.phpの使い方についてご紹介します。
Googleがウェブマスター向けガイドライン更新、CSSやJavaScriptのクロールをブロックしないよう求める ::SEM R (#SEMR)
Googleがウェブマスター向けガイドライン更新、CSSやJavaScriptのクロールをブロックしないよう求める グーグルのインデクシングシステムがモダンブラウザのようにウェブをレンダリングに基づいたシステムに変更されたことで、そのレンダリングを行うために必要な CSS や JavaScript ファイルへもクローラ Googlebot がアクセスできるよう確認することをガイドラインに明記。意味もなく robots.txt でクロールを禁止すると、インデックスに問題が生じて自然検索順位に悪影響も。 公開日時：2014年10月28日 06:24 米Google は2014年10月27日、ウェブマスター向けガイドラインの「技術に関するガイドライン」を更新し、ウェブクローラが正しくサイトを認識するために CSS や JavaScript などのウェブレンダリングに関連するファイルも巡回できるよ
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
片手間のJavaScriptから脱出するためにこれからのWebエンジニアが理解すべきこと - Qiita
はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプリのクラッシュと比べて、あまり多いとは思いません。むしろ、一昔前に比べてかなり改善しているという認識です。iOSのバージョンが古いとかでなければ、現状でも十分ユーザビリティの改善につながっているでしょう。 しかし、この問題の結構大部分を占めているのは個人的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://11neko.com/font-2/
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
3media.biz
IDEA * IDEA
