中上級者のためのHTML＋CSSのおすすめ書籍 | Web Design Trends
HTMLとCSSの学習書で有名なものは初心者向けのものが多く、ある程度知識を身に付けて後は独学で進めてきたというWebデザイナー、エンジニアの方が多いのではないでしょうか。確かにWeb上に様々な情報が掲載されているので、独学で学べる内容も多いかもしれません。ただ、やはり書籍というのは1冊に情報がまとまっており、体系立てて知識を覚えていくためにはとても有効な手段です。 今回は、中級者・上級者向けのHTMLとCSSに関する本を中心に、一人前のWebデザイナーであれば押さえておきたい知識が紹介されている書籍をご紹介していきたいと思います。 CSS、Sass関連のおすすめ書籍 シンプルなようで奥が深い、CSSやSass関連のおすすめ書籍です。CSSはしっかりと管理しておかないと後でメンテナンス性が低下してしまったり、チームで制作を行う場合は制作における効率が低下してしまったりします。より分かりやす
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し
Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
![[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7ef0650ca2366040c7e9131e9a9453ac3ae7dcc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120601.png)
驚きのクオリティで画像にエフェクトが適用できる、CSSのブレンドモードを使った実装テクニックのまとめ
.pencil-effect { background-image: url(photo.jpg); background-size: cover; background-position: center; } @supports (filter: invert(1)) and (background-blend-mode: difference) { .pencil-effect { background-image: url(photo.jpg), url(photo.jpg); background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) g
Image Effects with CSS
Bennett Feely Twitter CodePenHow it worksUsing one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) gives us a surprising amount of possibilities to manipulate a single source image. The unedited background-image manipulated using CSS. In most of these effects the single source background-image url is repeated one or more times and blended with itself using CSS blend
Blueprint: A CSS Framework | Spend your time innovating, not replicating
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. What does Blueprint have to offer? A CSS reset that eliminates the discrepancies across browsers. A solid grid that can support the most complex of layouts.
BEMによるフロントエンドの設計 | 第1回 基本概念とルール
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
CodeGrid - フロントエンドに関わる人々のガイド
HTML/CSS 385 CSS仕様 119 CSS設計 53 HTML仕様 40 SVG 25 スタイルガイド 14 HTML/CSSの実践 135 HTML/CSSドリル 4 フォント 3 データ形式 6 性能と品質 49 セキュリティ 16 パフォーマンス 12 アクセシビリティ 21 デザイン 64 ディレクション 50 ドキュメンテーション 7 JavaScript 592 ECMAScript 45 ライブラリ 70 ブラウザAPI 38 WebGL 42 テスト 36 JavaScriptの実践 64 JavaScriptの設計 9 JavaScriptドリル 15 非同期通信 5 Vue.js 73 DOM 9 Angular 30 Electron 4 Web Components 14 jQuery 24 Backbone 17 TypeScript 24 Coffee
Home - Scalable and Modular Architecture for CSS
SMACSS was written in 2011. This site remains for archival and educational purposes. I’ve been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. What I've found is a process that works equally well for sites small and large. Learn how to structure your CSS to allow for flexibility and maintainability as your projec
グラフィックデザイナーのためのCSSレイアウトメモ : 便利な小技「ヘッダーとメニューを固定する」
CSSレイアウト[便利な小技] ヘッダーとメニューを固定する [注意] 残念ながら「position: fixed;」はWINのIE(4～6)では対応していない。 FireFoxなどで見てください。 このページをスクロールしてみると、他のページと異なり、ヘッダーとメニューがウィンドウに固定され、メインスペースのみがスクロールする。 「position: fixed;」を使うと、フレームセットのように画面の一部を固定させ、それ以外の部分のみスクロールするように作ることが出来る。 フレームに代わる画期的なCSS、と喜んだのも束の間。 なぜか、Mac IE5やNNで使えるのに、WINのIEでは使えないCSSだった。というわけでハッキリ言って使えない小技だが、一応作り方を解説する。 ボックスを固定するには 「2段組のレイアウト」で「position: absolute;」の説明をしたが（→「pos
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
Site-Speed Optimisation – CSS Wizardry
Web Performance Optimisation, Consultancy, and Engineering Audits Your website is slow. I know why. Web performance is big business for any industry: from recouping lost sales to increasing conversions; reducing running costs to user retention; better SEO to lowering your environmental impact. Let’s work together to identify and fix your blind-spots. Consultancy What is your web performance strate
Object-oriented CSS
Hosted Play with these in Firebug to learn the basics. Template Grids Module Content (very alpha) Downloads on Github Velocity download Alternate download Stuck? If you don't keep up with any of the exercises you can view (and download) the finished examples here. Starting Template Exercise 1: Template Exercise 2: Grids Exercise 3: Module Manipulation Exercise 4 Module Creation Welcome, Velocity C
Ja - Scalable and Modular Architecture for CSS
大規模なプロジェクトにおいて最適な構造を見つけ出すために自分自身(そして自分の周りの人たち)のプロセスを分析してきたが、その結果、私が見つけ出したのはプロセスは規模の大小に関わらず大規模なサイトであっても小規模なサイトであっても同じように有効なプロセスだった。 プロジェクトやチームが大きくなるのに併せてCSSをより柔軟に、よりメンテナンスしやすいCSSを書くための構造について学んでいこう。 What is it? SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ごめんなさいね。 - Lopan.jp
flexboxベースのミニマルなCSSモバイルファーストグリッド・「Plasma Grid」
Customising Cross-Browser Range Inputs With CSS And JavaScript | CSS-Tricks
GitHub - hiloki/flocss: CSS organization methodology.
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
BEM