この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
(編注：2016/7/29、頂いたフィードバックを元に記事を修正いたしました。) CSS Variables、もっと正確に言うとCSSカスタムプロパティが、Chrome 49でサポートされました。CSS Variables は、CSSで値の繰り返しを減らすのに有効です。また、テーマの切り替えなどの実行中の強力なエフェクトや、将来のCSS機能をもしかすると拡張/ポリフィルすることにも役立ちます。 CSSの散乱 アプリケーションを設計するとき、アプリケーションの一貫した外観を維持するために再利用される独自のカラーセットを設定するのが一般的です。残念ながら、このようなカラー値をCSSに何度も何度も繰り返し設定することは面倒なだけでなく、エラーが発生しやすくなります。カラーを何カ所か変更する必要がある場合、思い切って、全部「検索して置換」することもできますが、大きなプロジェクトでは、危険な事態を招
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
「React: CSS in JS」からインスピレーションを得て、CSSをJavaScriptで記述し、スタイルの定義、変数・関数の利用、レスポンシブやスクロールなどのイベントに動的に値を生成できるスクリプトを紹介します。 Descartes Descartes -GitHub 上記ページではクリックする度に、背景色の値が動的に適用されています。 Descartesの特徴 Descartesの使い方 Descartesの特徴 DescartesはSassやLessのようなCSSプリプロセッサの良い点を取り入れ、CSSをJSONとして記述するとどうだろうと始めたオープンソースのプロジェクトです。スタイルのセットだけでなく、DOMへのアクセスや基本的なイベントリスナーに対応しています。 Descartesの書式は、SassやLessに似ています。 Descartesの基本スタイル パフォーマン
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
Newニンテンドー3DS インターネットブラウザーの主な仕様を見ると HTML4.01/HTML5/XHTML1.1/Fullscreen/Gamepad/SVG/WebSocket/Video Subtitle/ WOFF/Web Messaging/Server-Sent/Web Storageの一部/XMLHttpRequest/ canvas/Video/DOM1-3/ECMAScript/CSS1/CSS2.1/CSS3 の一部 のウェブ標準に対応していると書いてある。旧3DSの仕様と比べるとだいぶリッチに見える。特にFullscreenとGamepadに対応しているならゲーム開発向けに使えるんじゃないのかね、と思って少し調べた。 Fullscreen これ本当に対応しているの？ document.documentElement.webkitRequestFullScreen()
CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 11月6日公開池田 泰延♥ 189
2023年1月1日 2022年の振り返り 今年は良くも悪くも某国際球技イベントに振り回された年だった。 2022年11月23日 eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。 2022年8月24日 Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する 当ブログのシステム構成について紹介します。構成を真似することでほぼ無料（後述）でブログ
本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情 この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Font Collections / 4 Mar 2025 50+ Best Fonts for T-Shirts (With Unique Design & Style) Do you have a great quote or a one-liner that would look great on a t-shirt? Then download a unique font from our handpicked collection and make your own t-shirt design. Custom-made t-shirts are quite popular these days. In fact, many designers are now making a living by selling their own unique t-shirts online
レンタルサーバなら「さくらのレンタルサーバ」！ 月額換算でわずか131円、缶ジュース1本分のお値段で使える格安プランから、ビジネスにも使える多機能＆大容量プランまで、 用途と予算に合わせてプランを選べます。 さらにマルチドメイン対応でメールアドレスも無制限。無料ウイルススキャンや無料電話サポートもあるので安心して ご利用いただける共用レンタルサーバサービスです。
デザインの入門書、書きました！これまでHTMLやCSS、WordPress、JavaScriptの入門書を書いてきた私ですが、 このたび新たにデザインの入門書を執筆しました！2024年12月20日発売で、予約受付中です！ 詳細を見る
Seamless Vector Subtle Grunge Patterns Mar 23rd, 2020 · by Liam McKay
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く