kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS
kiso.cssの最大の特徴は、日本語環境での使用を前提とした設計にあります。 多くのリセットCSSは欧文を前提としており、日本語のWebサイトで使用する際には追加の調整が必要になることが少なくありません。 kiso.cssでは、副作用が少ない範囲で日本語に特化したスタイル調整を加えています。もちろん、英語圏の方にも配慮しています。 kiso.cssでは、疑似要素や!importantが明示的に指定されたスタイルを除き、すべてのセレクタを:where()擬似クラスで囲むことで詳細度を0にしています。 kiso.cssはスタイルを容易に上書きできるため、カスタマイズ性の高いリセットCSSとなっています。 リセットCSSでありがちなキーボード操作時のフォーカスリングの消失を防止します。また、強制カラーモードをサポートしたアクセシブルな実装を行っています。 SafariとVoiceOverの組み
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
画像で分かる、新しいCSS
この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac
シンプルな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ライセンスで、商用プロジェクト
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 -
Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ
ブラウザにやさしいHTML/CSS
CEDEC2021 ダウンロード時間を大幅減！～大量のアセットをさばく高速な実装と運用事例の共有～
首相官邸ホームページとアクセシビリティ - ただのにっき(2012-04-06)
■ 首相官邸ホームページとアクセシビリティ 首相官邸ホームページのリニューアルに4,500万円かかったというニュースで高いの安いのと話題になっているけど、それはまぁどうでもよくて*1。これに対してあるWebデザイン会社が書いた「高くないよ!」というエントリを読んだアクセシビリティ業界人たちがそろって天を仰いだという話である。 件のエントリは「首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察」で、特にアクセシビリティのところはツッコミどころ満載なんだけど、その点にかんしてはすでに木達さんが書いているので(ようするに先をこされた)、Web業界人はろくろなんて回してないで読んでおいた方がよいです。特にアクセシビリティとデザインの両立のところ。 さて、首相官邸ホームページのリニューアルでアクセシビリティを確保するとして、件の記事では300万円の見積を出しているのだが*2、じゃあ
ネットにおける正しい日本語の書き方 - 電脳如是我聞の逆襲
ネットで横書きで日本語を表示するということが当たり前となり、小学校で教わるような日本語の基本的な使い方が破壊されつつある。勿論、自分もそれに加担しているので、それはヤメロという話ではない。 例えば、自分のブログは、パラグラフ毎の１文字落としをしない。これ自分でもかなり迷うところで。実はある時期まで、メールですらパラグラフ毎の１文字落としをしていた。が、これがウザいんだねえ。自分で読み返しても。 そこでネット書く文章の場合、段落を改める場合、必ず１行空けることにして、段落冒頭の１文字落としはしないというキメを自分で作った。作ったと言うと、自分で勝手にやったみたいだが、実は当時の各新聞サイトを参考にしたのである。今でこそ新聞系は、正しい日本語の書き方であるところの、通常の改段落で１文字落としが当たり前になっているが、自分のキメのような基準で文章を綴っていたところも多く（但しこの件、ワープロソフ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
日記編集画面の変化 - 妄想科學倶樂部
なにやら「太字」「文字の色」「文字のサイズ」が追加されている。 吐き出されるタグをみるとspanにスタイルを付けているようなのだが、どうも中途半端に感じる。 そもそも「見栄えのためにタグを挿入する」という行為自体愚かしいという話であって、そのために物理タグを使うかspan styleを使うか、というのは本質的にあまり変わりない。 それより、ひっそりとinsとstrongが消えているのが大変気にかかるのだが。特にinsはかなり多用するボタンであっただけに残念でならない。 また、「どのテーマでも変わらぬ文字色」が利点としてあげられているが、これは実のところマイナス要因である。例えば強調を意図して赤文字を設定した後で、テーマを赤背景（例えばgothic-red）に変えた場合、強調の筈の部分が隠蔽されてしまう。まさかテーマを変える度に過去の記事を修正するわけにも行くまい。 論理マークアップによりス
Enablr
10.05.10 WEB-INF/web.xml? 10.05.10 WEB-INF￥web.xml 10.05.10 WEB-INF/web.xml 10.05.10 /etc/passwd 09.09.05 kkawcjgx 09.09.05 kkawcjgx 09.09.05 kkawcjgx 09.09.05 kkawcjgx 09.09.05 kkawcjgx 09.09.05 kkawcjgx
◆1 古川さんは老眼知らずなのか(2) - ただのにっき (2005-10-27)
■ 古川さんは老眼知らずなのか?(2) 昨日の話の続き。 つーか、リンクしただけでTrackBackもしてないのに、まさかご本人が降臨するとは思いもよらないわけで。MSN Spacesってrefererチェックもできるのか? 油断できんなー。今日はちゃんとTrackBackしておこう。 だいたい古川さんと言えば、おれらDOS時代を生きてきた人間にすればヒーローの一人なわけよ。おまけにかみさんが元アスキーの人だから、古川さんの武勇伝(?)を伝え聞く機会も多かったわけで、リスペクトする気持ちは大きい。ハンドアックスを投げるにしても、刃先を少しくらい鈍らせても罰は当たるまいよ。 で、今日のエントリは予告どおり10.5ポイントにしてくれたようだ。だいぶ読みやすくなったので、晴れて購読リスト行きにできた。でも、過去の記事はそのまま……って、ホントに記事ごとに文字サイズ指定できるのか。MSN Spac
おのひろきおんらいん : CSS signature について
CSS signature ってのは「naoya のはてなダイアリー」で初めて知りした．「naoyaのはてなダイアリー - CSS signature」を読んだ範囲では，閲覧者側が Web ブラウザーのユーザスタイルシートに個々の Web サイトに対しての設定を書き込めるように，body の id を振るようにしようという話らしいですね． naoyaのはてなダイアリー - CSS signature http://d.hatena.ne.jp/naoya/20050906/1125992109 <body id="onohiroki-cycling-jp"> となっていれば，スタイルシートに body#onohiroki-cycling-jp p {font-size: 12pt;} なんて指定をすれば，本文のテキストが 12 ポイントで表示されるようとか指定できます．よく見に行く Web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年のモダンCSS改
MonodEz.com is for sale | HugeDomains
WEBデザインアイデアブック
Amazon.co.jp: Webデザインアイデアブック (インプレスムック): 本
CodeWeb: ブラウザ別CSSハック一覧表