CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
webアクセシビリティ実装チェックリストを作った - Qiita
web アクセシビリティに、どうやって対応したら良いか？を 手助けするツールを作りました。 WCAG2.0 の達成基準に合わせた実装方法を確認し、試験結果を記録することができます。 ■ WCAG 2.0 達成基準・実装チェックリスト https://a11y-i-guideline.netlify.com （chrome ブラウザでしか挙動確認してません） 対象 web コンテンツで JIS X 8341-3:2016・WCAG2.0 への対応を求められた コーダー、ディレクター、デザイナー 目次 アクセシビリティ用語解説 実装チェックリストでできること 各ポジション別確認ポイント 使い方 アクセシビリティ用語解説 web アクセシビリティ 一般的に「障害者対応」と考えられるが、メガネがない・眩しい屋外など健常者にとっての 一時的な状況でも、誰でも web コンテンツを支障なく利用できる状
CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 - NxWorld
ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン（下線）を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS
モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
CSSプロフェッショナルのためのTIPS - Qiita
CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日本語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。
最新！CSSをもっと効率よく活用できるツールを一挙紹介！【もう試しましたか？】
CSSが進歩に従って機能を活用するためのライブラリやツールが次々登場しています。こうしたものを利用することで、普段の作業時間を短縮できたり、まだ知らない機能について知ることができます。 今回は今年リリースされたばかりの、最新CSSライブラリ、フレームワーク、ツールを紹介します。 CSS Flexboxツール＆ライブラリ 1.Waffle Grid Flexboxのグリッドシステムを簡単に利用できます。 2.RAGrid クラスの代わりに認識しやすい属性を使ったFlexboxグリッドです。 3.Griddd 非常にシンプルながらカスタマイズ性が高いグリッドです。 4.Flexboxチートシート CSS Flexboxのプロパティを具体的な例とともに紹介しています。 CSS Gridツール＆ライブラリ 1.Griddy CSS Gridをオンラインで学べるツールです。 2.Graaf デザイナ
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
CSS Niteコーダー白書2016_シェア.key
2016 CSS Nite LP47Coder's High 2016 FLAT WEBCRE8 2016924 2016/10/02 7077 Prologue SecEon 2 1 逆に教えてほしい。。。 （23歳 男性 デザイナー） 2 具体的なものを作り、それを沢山の人に見てもらう （24歳 女性 マークアップエンジニア） 3 手を動かす・サイトを作る （24歳 男性 マークアップエンジニア） 4 Githubなどに自分の作品を公開する （24歳 男性 マークアップエンジニア） 5 実際に手を動かしてコードを書くこと （25歳 女性 デザイナー） 6 書籍を読む、ブログの巡回 （26歳 女性 デザイナー） 7 使ったことのない技術を定期的に取り入れるようにする。 （26歳 女性 フロントエンドエンジニア） 8 Google先生 （26歳 女性 マークアップエンジニア） 9 わからな
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利
こんにちは、お久しぶりです。ウェブデベロップメント黒帯を務めております、HTMLやCSSやJavaScriptが大好きな岡部 和昌（@kzms2）と申します。 最近はCSSやSVGのアニメーション、ElectronやCordovaなどを用いたハイブリッドアプリなどがお気に入りです。 最近の活動 東大の坂本 大介先生と弊社の坂本 竜基、鈴木 健司（@kensuzuk）と一緒にFix & Slideというタッチデバイスにおける選択のUIについての論文を投稿し、UIST 2015やmobileHCI 2016と言った世界的なトップカンファレンスにて採択され発表・登壇などを行っていました。 上記の論文に関しましては、また別の機会でご紹介できたらと考えております。 それでは本題に入ります。 pointer-eventsについて 皆様はpointer-eventsというCSSプロパティーやその使い道を
無料でレスポンシブサイトをクリックだけでデザインしてダウンロードも可能な「Launchaco」
閲覧者の環境に応じてレイアウトが変化するレスポンシブサイトを手軽に無料で作成できるサービスが「Launchaco」です。このサービスを使うと、ほんの数クリックだけでレスポンシブなレイアウトのページを作成して、必要なファイルをダウンロードすることが可能です。 Launchaco - Name a business http://launchaco.com/build/ ページを開くとすぐにレイアウトを開始できる状態になっています。 「Step 1/4」ではまず、レイアウトのテンプレートを選択。 すると次のページで、選択したテンプレートによるページデザインが表示されました。上部のテンプレートをクリックすることで、リアルタイムで変化させることが可能です。 ページ上部のテキスト欄の内容を自由に書きかえることも可能。日本語も問題なく利用できます。 もちろん、レスポンシブデザインになっているので、横幅
もう、レスポンシブでいいんじゃない？
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
Front-end CSS Frameworks
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
【SEO事例】うちのサイトが「脱毛」で1ページ目になるまでにやってきた施策全て | Biancaweblog（ウニログ）
ビアンカ・ウェブ 2015年1月に法人設立、2児の母。 おもに、美容関係のアフィリエイトサイトを運営しています。 この記事をいつかは書きたかったんだけど、やっと書くことができた＼(^o^)／ 以前から、「脱毛」単一で上位表示したいとひそかに思っていて、最近ようやくその目標を達成できたので、良い区切りとして、これまでe-脱毛エステ.comでやってきた施策の全てをまとめようと思います。 おそらく特殊な事例で、全て同じようにやって結果が出るという再現性のあるものではありませんが、どこか部分的にでも参考になるところがあれば幸いです。 これまでのサイト制作とSEO施策の経緯 このサイトのドメインを取得したのが2013年11月なんですよね。 その時は、まさかこんな何年もかけて１つのサイトを育てることになるとは思っていなかった（遠い目） まだその途中ですが、これまでの2年半あまりにやってきたことの全記録
Flexboxベースの軽量レスポンシブCSSフレームワークBasisをつくりました。
Flexbox ベースの軽量レスポンシブ CSS フレームワーク Basis を公開しました。もともと Bootstrap が好きでよく使っていたのですが、いろいろ「ん？」となることがあって、別のフレームワークを探してみたりもしたのですがなかなか条件にあうものが無く、それならいっそ作ってしまえ！ということで作りました。 導入方法・マニュアルは下記をご参照ください。 ということで、既存のフレームワークの何が不満だったのかということも交えつつ、Basis の特徴など。 Basis の特徴 Flexible box ( Flexbox ) ベースのグリッドシステム Basis はグリッドシステムが float ベースではなく、Flexible box ( Flexbox ) ベースとなっています。今でこそ Flexbox ベースのグリッドシステムが使えるフレームワークがいくつかでてきていますが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
納品用のWebサイトのスタイルガイドが簡単に作成できるHTMLのテンプレート -Style Guide Guide
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
