[B! CSS] kskbのブックマーク

令和のHTML / CSS / JavaScriptの書き方50選

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

kskb 2024/05/14

vw はスクロールバーの幅も含むので、あれを使って画面いっぱいに広げるとズレを隠すために overflow-x:hidden; を無理矢理用いたりするから良いともいえない

リンク

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

kskb 2015/05/25

リンク

今必要なCSSアーキテクチャ

下記勉強会の発表資料です。 --------------------------------------------------------- 使いたくなる UI をつくる！フロントエンド勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------

kskb 2013/08/27

CSS

リンク

CSS Sprite画像はDataURI画像にすべきか？ - MOL

最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅあ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです︵該当の箇所は12分位から︶。というかIlya

kskb 2013/07/31

リンク

ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL

俺ももう30だし、夏なんで、CSSフレームワークはじめました。とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴これを作るにあたって

kskb 2013/07/31

リンク

CSS Tube Map - อ่านเกมเด็ด

อ่านเกมเด็ด

kskb 2013/05/25

CSS
HTML5

リンク

Animated Content Tabs with CSS3 | Codrops

In this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators. Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseud

kskb 2012/04/16

リンク

stroll.js - CSS3 Scroll Effects

kskb 2012/04/16

CSS
CSS3

リンク

[CSS]ハッシュリンク先がどのエリアなのかを分かりやすくするスタイルシート

ハッシュリンク（#hoge）をクリックすると、その先頭はページ上部に表示されるので分かりますが、どこまでがそのエリアなのか分かりやすくするスタイルシートのテクニックを紹介します。デモページ: 1に移動 [ad#ad-2] 実装 HTML HTMLはシンプルで、ナビゲーションをnav要素、コンテンツをsection要素、各ハッシュリンク先はdiv要素で実装します。 <nav> <a href="#one">1</a> <a href="#two">2</a> <a href="#three">3</a> </nav> <section> <div id="one"><h2>One</h2>Pellentesque habitant morbi ...</div> <div id="two"><h2>Two</h2>Pellentesque habitant morbi ...</div>

kskb 2012/04/11

CSS

リンク

【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。

モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！特定の要素の直下の要素だけに一括でマージンを設定特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定リンク先のパス次第でスタイルを切り分ける特定の要素・セレクタを例外とする特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。親>子で、直下要素のみを対象指定。上記例ではid="container"の直下の要素すべてにマージンが設定されます。ユニバーサルセレクタには正直不安を感じ

kskb 2012/03/07

CSS

リンク

Normalize.css: Make browsers render all elements more consistently.

Normalize.css A modern, HTML5-ready alternative to CSS resets Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

kskb 2012/02/24

CSS

リンク

確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション

Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul

kskb 2011/10/31

リンク

[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす

スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。典型的な例では大き

kskb 2011/06/21

リンク

SASSIENCE ～世界が嫉妬するCSSへ

kskb 2011/05/25

いくつかこういうサービスはあるけど、そろそろ記述順序を選択できるした方が目新しさあるよなと（mozillaに準拠するか2xupに準拠するかとか

リンク

[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ

IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ

kskb 2011/05/25

css
ie

リンク

あのサイトが@ importを使わない理由｜WEB Drawer -WEB制作に関するメモサイト-

近頃いろんなサイトのHTMLソースを見ていて気づいたのですが、CSSを読み込む際の「@ import」がないサイトが多い事に気づきました。私はよく使っているので何で使ってないのかが気になったので調べてみました。なぜ使わないか調べたところ、IEの描写速度の問題でした。基本的にブラウザは複数のファイルを同時に読み込む事が可能になっていますが、 IEではこの「@ import」を使うとCSSファイルを同時に読み込むことができず（順番に読み込む）に、結果描写速度が遅くなります。サイトの表示スピードでユーザーの離脱が減るといいますので、表示スピードを少しでも早くしたい場合に使用しているようです。管理面の問題ただHTMLファイルを修正しないでCSSファイルを追加できるので、サイトの運用方法によっては「@ import」を使用した方がいい場合もあると思います。昔々・・・少し前のブラウザは

kskb 2011/05/23

CSS

リンク

IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について

IE9文字間隔確認用サンプル文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記・注意‥下記ページはスタイルシートで少しだけ調整しています。全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが文字コードで変わったり、かなり比較し難いものになったため。後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8　　HTML 4.01+EUC-JP　　HTML 4.01+SHIFT-JIS XHTML 1.0 サンプルXHTML 1.0+UTF8　　XHTML 1.0+

kskb 2011/05/10

リンク

IE9用のCSSハック？Webページのフォントサイズ指定で今後注意する事

| 人気ページ | おすすめ記事 | 定番ツール | IE9用のCSSハック？Webページのフォントサイズ指定で今後注意する事 IE9のみフォントの間隔を微妙に広げるためのCSSハックの紹介です。というか、今後はフォントサイズの指定を以前にもまして注意する必要が出てきました。

kskb 2011/05/10

ie
css

リンク

これってIE8の不具合なんじゃね・・・？文字の大きさが勝手に変化するよ？

特別な仕掛けをしている訳じゃありません。ごく一般的なcss+xhtmlです。上記は作動確認テスト文章。本文は以下。当方、5月6日よりIE8にアップグレードし使用しています。とりあえずWEB表示形式がWeb標準モードがデフォルトになり、これは嬉しい。 Firefox、Opera、Google Chromeなどとほぼ同じWeb表示が出来るようになり︵各ブラウザ微妙に違うけど︶サイトのレイアウトを修正するのは今後楽になりそうです。 Javascriptの表示も随分高速化され、これも良いカンジ。、、、、が、何か違和感がある。絶対おかしい。。。時々、閲覧しているサイトが微妙に動く。ピクピクしてます。なにこれ('Α`) IE8を使用していると、時々文字の大きさが勝手に変化します。サイトによっては、閲覧者が混乱するくらい文字が暴れ回ります。特に、AdSense広告やMicroAdの468X60

kskb 2011/05/10