幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimgはターゲットにされません。 A quick introduction to CSS @scope by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS @scopeがなぜ必要なのか CSSカスケードの仕組み CSS @scopeの基本的な使い方 @scopeのさらに優れた使い方 はじめに CSSの@scopeについてご存じですか？ @sco

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS

世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ

CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりできます。 ビューポート単位では、同一ページだとビューポートの基準値は同じなので、こういうことはできません。 C

ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加

シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。 超軽量4.8KbのCSSフレームワーク。 用意するのは、HTMLファイルのみ。 マークダウンで生成されたHTMLのレンダリング。 シンプルなブログや自己紹介ページに最適。 MITライセンスで、商用プロジェクト

表計算ソフトのExcelでお絵描きする「Excelのミケランジェロ」のように、ソフトウェアの可能性を最大限に広げるアーティストが存在します。元Kickstarterの最高技術責任者アンディ・バイオ氏が、HTML/CSSの手書きコードだけで美しい絵を作り出す職人の作品をTwitterで紹介しています。 Diana Smith | Software Engineer | cyanharlow @ GitHub http://diana-adrianne.com/ バイオ氏がCSSで作られたというイラストをTwitterで紹介しました。 This stunning illustration by @cyanharlow is pure HTML/CSS. Every element was typed by hand, drawing with only a text editor and Ch

Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ

May 29~30, 2019 に開催された "de:code 2019" の Day1 EXPOシアターセッションで、Blazor について発表した際のスライド資料です。CC BY License、又は The Unlicense のデュアルライセンスで再利用可能です。 アニメーション付 PowerPoint 原ファイルは以下の URL から入手可能です。 https://1drv.ms/p/s!Ahj5X4eD4NFdgvpnYa4h1jR5JnFlmg

メモ８ @nagao_memo8 意外や反応ある今日のブログネタ。「ネットにおける正しい日本語の書き方」。やはりこれは続きモノにしようかなあ。 http://htn.to/u7hzLJ 2010-08-04 19:05:23 MATSUMOTO Yukako🐦️ @snowystreet via @nagao_memo8 さん。はてなダイアリー初期の頃、このような話やCSSのカスタマイズができるようにとかでよく議論したのを思い出したり。あと、箇条書きは、ul〜になるよう、はてな記法使われたほうが便利だと思います。 / ネ… http://htn.to/stvB1Y 2010-08-04 19:26:42 MATSUMOTO Yukako🐦️ @snowystreet はてなダイアリー・はてなグループでは、箇条書きリストが極めて簡単に書け、マークアップも適切になる「リスト記法」というはて

ネットで横書きで日本語を表示するということが当たり前となり、小学校で教わるような日本語の基本的な使い方が破壊されつつある。勿論、自分もそれに加担しているので、それはヤメロという話ではない。 例えば、自分のブログは、パラグラフ毎の１文字落としをしない。これ自分でもかなり迷うところで。実はある時期まで、メールですらパラグラフ毎の１文字落としをしていた。が、これがウザいんだねえ。自分で読み返しても。 そこでネット書く文章の場合、段落を改める場合、必ず１行空けることにして、段落冒頭の１文字落としはしないというキメを自分で作った。作ったと言うと、自分で勝手にやったみたいだが、実は当時の各新聞サイトを参考にしたのである。今でこそ新聞系は、正しい日本語の書き方であるところの、通常の改段落で１文字落としが当たり前になっているが、自分のキメのような基準で文章を綴っていたところも多く（但しこの件、ワープロソフ

ユーザー情報ページ（about）、記事一覧ページ（archive）、クラシック編集ページ（edit）のHTMLにそれぞれ独自の id を設定しました。 それぞれ about hatena-about archive hatena-archive edit（クラシック） hatena-edit となります。 idea:228でご要望いただきありがとうございました。

これはテーマ作成者にとっては重大なニュースである。 私としてはその方向性に反対したい。以下にその理由を述べる。 見栄えの崩れ はてなのテーマを形作る「スタイルシート」は、HTMLファイルの構造を元にデザインされる。同一の構造が保持されなければ、テーマ適用時の見栄えは保証できない。 無論、現在でもヘッダーとフッターを任意に編集できるようになっているため、やろうと思えばイレギュラーなHTML構造も作り得る*1のだが、日記本文は不可蝕領域でありデザインをスタイルシートに頼らざるを得ないため、そのように強引なHTML編集の需要は極めて低かった。 しかし、HTMLテンプレートを任意に編集できるということは、イレギュラーな構造の可能性が増えるということだ。特に、スタイルシートを十全に操れない初心者ほどHTML部分の編集を行い、その結果表示崩れのトラブルが増えるのではないか-----これまで教えてはてな

http://d2.hatena.ne.jp/ユーザーID/editで新編集画面お試し公開中。 で、あの…… 編集が面上のボタンが効かないようですが（MacOS10.3.7、Safari1.2） B、I、U、Sって……物理要素は止めましょうよ。 論理要素だとスタイルの対応が不明なのかもしれないが、物理要素だってスタイル次第…… というか、これ標準になったらすべてのテーマ改訂して物理要素を無効化しますよ。 グラフィカルな表現だけでなく文字で説明も欲しいと思いました。 内容登録後の画面が何か全体にスタイル適用されずに崩れまくりなのは何だろう。 物理要素絡みで補足。 上記物理要素は意味上「強調（B、I、U）」「削除（S）」を表すもので、論理要素で表現可能である HTML規格上これら物理要素は過去の仕様との互換性のためだけに暫定的な仕様が認められているに過ぎず、論理要素に置き換えることが推奨される