1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
CSS Architecture on Vue.js
Open standards for building event-driven applications in the cloud
カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法
テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS
[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ
レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。 ひと昔前まではJavaScriptを使用しないと実装できなかったレイアウトも、flexboxなどを使うことでスタイルシートのみで実装できるようになりました。 Split Screen Split Screenは、デスクトップでは左右に分割されたレイアウト、スマホでは上下に積み重なったレイアウトです。去年くらいから国内でもこのレイアウトは増えてきました。 Pure CSS Masonry Layout Masonryは、カードやパネルをレンガ状に敷き詰めて
![[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/34869b288b480daff8b08b01332b82fbf33502fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017070301.png)
超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集:phpspot開発日誌
10 Best Free HTML And CSS Website Templats Of June 2011 超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集がまとまっていました。 種類は色々でコーポレートサイトやキャンペーンサイト等色々使うことができそうです。 ちょこっと変えることで開発者さんでも比較的容易かつ高速にプロモサイトが作れますね 関連エントリ 34のフリーで綺麗なXHTML/CSSテンプレート ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０ 綺麗にデザインされたフリーのHTML/CSSテンプレート１０ フリーの(X)HTML/CSSテンプレート５０ クールなデザイン満載のXHTML/CSSテンプレート４０種
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
[CSS]複数のスタイルシートのフレームワークのいいとこ取りをした -BlueTrip
ベースにBlueprint, Tripoli、グリッドに960.gs、印刷用にhartija、エレメントにelementsと複数のスタイルシートのフレームワークのいいとこ取りをし結合させたフレームワーク「BlueTrip」を紹介します。 BlueTrip CSS Framework demo BlueTripの主な特長は下記の通りです。 24カラムのグリッドに対応 実用的なタイポグラフィのスタイル クリーンなフォームのスタイル 印刷用のスタイルシート 空のスターターキット セクシーなデザインのボタン ステータスメッセージのスタイル デモでは、各要素のサンプルとグリッドを確認することができます。 <textarea name="code" class="html" cols="60" rows="5"> <link rel="stylesheet" href="../css/screen.c
IE6デザイン新手法 Universal Internet Explorer 6 CSS | エンタープライズ | マイコミジャーナル
For A Beautiful Web - Creative web design and development training and workshops for web designers and developers IE6のシェアが下落しているとはいえ、Net Applicationsの報告によれば2009年4月におけるIE6のシェアはIE7、Firefox3に次いで3位、17%強のシェアを確保している。WebサイトのIE6対応は依然として続ける必要がありそうだ。そうした状況に対し、Andy Clarke氏がUniversal Internet Explorer 6 CSSという興味深い取り組みを開始した。成果物はGoogle Codeでも公開されている。 Andy Clarke氏はIE6に関する6つの疑問に対して次のように自説を紹介。 (デザインは優れたブラウザに合わせてIE
CSSでボタンを綺麗にスタイルするサンプル集:phpspot開発日誌
22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazine CSSでボタンを綺麗にスタイルするサンプル集が Speckyboy Design Magazine にて紹介されています。 なんとも美しいボタンのサンプルが色々と紹介されていて、もうボタンデザインに迷うことはないかもしれません。 Submit button should look same everywhere 綺麗なアイコン付きSubmitボタン How to make sexy buttons with CSS 角丸グラデーション付きボタン Scalable CSS Buttons Using PNG and Background Colors 文字を長くしても伸縮するボタン CSS Overlapping Arrow Buttons 階
Drawter.com - DrawAble Markup Language
Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website's code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn. Currently Drawter is available in Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS設計全盛期に学ぶフロントエンド設計
ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」:phpspot開発日誌
モダンCSS設計の解説サイトまとめ - Qiita
GALLERY GALLERY ： Result -> 98 Gallery site