CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
幅いっぱいの要素から左右のマージンを引きたいときに、こういう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のサポートブラウザ
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方
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集 | BUILD Journal
いざという時に使える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
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
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の新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方
CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方 CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりでき
Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、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フレームワーク -new.css
シンプルな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ライセンスで、商用プロジェクト
HTML/CSSで絵を描く猛者が作品を公開中
表計算ソフトの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
初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 -
Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ
ブラウザにやさしいHTML/CSS
CEDEC2021 ダウンロード時間を大幅減！～大量のアセットをさばく高速な実装と運用事例の共有～
はてなダイアリーにおける文書の視覚整形について
メモ８ @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 はてなダイアリー・はてなグループでは、箇条書きリストが極めて簡単に書け、マークアップも適切になる「リスト記法」というはて
ネットにおける正しい日本語の書き方 - 電脳如是我聞の逆襲
ネットで横書きで日本語を表示するということが当たり前となり、小学校で教わるような日本語の基本的な使い方が破壊されつつある。勿論、自分もそれに加担しているので、それはヤメロという話ではない。 例えば、自分のブログは、パラグラフ毎の１文字落としをしない。これ自分でもかなり迷うところで。実はある時期まで、メールですらパラグラフ毎の１文字落としをしていた。が、これがウザいんだねえ。自分で読み返しても。 そこでネット書く文章の場合、段落を改める場合、必ず１行空けることにして、段落冒頭の１文字落としはしないというキメを自分で作った。作ったと言うと、自分で勝手にやったみたいだが、実は当時の各新聞サイトを参考にしたのである。今でこそ新聞系は、正しい日本語の書き方であるところの、通常の改段落で１文字落としが当たり前になっているが、自分のキメのような基準で文章を綴っていたところも多く（但しこの件、ワープロソフ
株式会社はてな、はてなダイアリーの総テンプレート化に意欲 - まんぷく::日記 - 妄想科學倶樂部
これはテーマ作成者にとっては重大なニュースである。 私としてはその方向性に反対したい。以下にその理由を述べる。 見栄えの崩れ はてなのテーマを形作る「スタイルシート」は、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規格上これら物理要素は過去の仕様との互換性のためだけに暫定的な仕様が認められているに過ぎず、論理要素に置き換えることが推奨される
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
各ページHTMLの特徴付けについて（開発者様向け情報） - はてなダイアリー日記
http://d.hatena.ne.jp/Yuichirou/20051029
入力支援ボタンによる物理マークアップ挿入は出来るだけやめる方向にすすんでほしい（はてなダイアリーへの要望） - 香雪ジャーナル
スタイルシートによる崩れない 2カラム 3カラム・レイアウト