ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
Here’s a CSS variable (formally called a “CSS custom property“): :root { --mouse-x: 0px; --mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(--mouse-x); top: var(--mouse-y); } To update those values from JavaScript, you’d: let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProp
インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）の著者ヘイドン・ピカリング氏の記事が興味深かったので、紹介します。 CSS: A New Kind Of JavaScript 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptでのスタイル CSS 最後に JavaScriptでのスタイル Web制作に携わっている人は、2つの補完的なテクノロジーに詳しいと思います。1つは文章とその構造のためのHTML、もう1つはインタラクションとスタイルするためのJavaScriptです。 JavaScriptでスタイル？と思ったかもしれません。そうです、あらゆるDOMにおけるノードをサポートしているJavaScriptのstyleプロパティのことです。
Support Team 5 mins Why not buy a new awesome theme?
通常、CSSのライブラリやフレームワークには、グリッドレイアウトやフォームなどの一連のデザインがパッケージングされていますが、ボタンに関してはカスタマイズ性がそれほど高くないのが現状です。 デザイン性の高いボタンを作りたい時に便利なのが*「Butns.css」*です。 今回は、ボタン作成に特化した*プレデザインCSS「Butns.css」*をご紹介します。 「Butns.css」を使うと、フラットでシンプル、そしてカラフルなボタンを簡単に作成することができます。 Butns.cssとは？ Butns.cssとは、ボタンデザインに特化したCSSライブラリです。 一般的なライブラリやフレームワークと違い、Butns.cssはレイアウト要素などを含んでいない軽量なCSSファイルになっており、ボタンデザインに特化しているため*「プレデザインCSS」(Pre-designed CSS)*と呼ばれるこ
今回は、ASP.NET MVC 4 / ASP.NET 4.5 新機能の JavaScript / CSS ファイルの自動縮小・結合処理についてご紹介します。 ◆ 概要 クライアントサイドにおける JavaScript や CSS ファイルのロード時のペイロード削減とパフォーマンス向上のために、JavaScript や CSS ファイルのスペースや改行の削除（縮小化）と、複数ファイルの結合（単一ファイル化）を自動でおこなうことができるようになりました。 ASP.NET MVC 4 Beta の Internet Application などのテンプレートでは、JavaScript や CSS ファイルの縮小化と結合処理が組み込まれています。下記は Internet Application テンプレートの _Layout.cshtml の head 要素内の記述です。 1: <head> 2
StyleDocco generates documentation and style guide documents from your stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences (```) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resiz
Aigis is a style guide generator. Make easier and maintainable. View on GitHub What is aigis? Aigis is a Node.js package that parses comments in your CSS and auto-generate a style guide. It is similar to Hologram , like a Node.js implementation of Hologram. Why did we create aigis? We didn't want the dependence on Ruby environment only to generate a style guide. Less dependencies is better. So we
KSS はスタイルガイドジェネレータです。 Github の中の人、Kyle Neath 氏を中心に開発されていて、Github 自体にも使われています。 普段は SCSS で使っていますが、CSS, SCSS, LESS といった形式に対応しているそうです。 KSS · Knyle Style Sheets http://warpspire.com/kss/ Ruby 製のツールで Rails や Sinatra に組み込んで使用します。 そして Github のリポジトリには Sinatra で動かす場合のサンプルも含まれています。 kss/example at master · kneath/kss · GitHub https://github.com/kneath/kss/tree/master/example 上記サンプルの views ディレクトリを見てもわかるように vie
会社やクライアント側で特にコーディングガイドラインが決めれてなかったり、フリーランスだけど結構好き勝手にコーディングしている、なんて時に1つの指針にできるようなコーディングのガイドラインを作ってみました。 また、Compass+SCSS記法を使用する場合はBEM（MindBEMding）を使った方が良いとは思うけど、複数人などのチームで初めて導入する時は少し敷居が高い気がするので、命名規則に関してはOOCSS、略語はMCSSの思想に基づくこととします。 前提 上記で書いたように本来はBEMるのがベストだけどあくまでBEMらない時に使うガイドラインです。 記述に関して結構当たり前としているところはすっ飛ばします。（CSSでプロパティとバリューの間は空ける、とか） 思想だけじゃ足りないルールはプロジェクトファイルにREADEME.mdなどにルールを記載しておくと良いと思います。 言わずもがな既
はじめに animate.cssは色々なcssアニメーションを簡単に導入できるライブラリです。あらかじめ決まったclass名をhtml要素に付与することで、高品質で面白いアニメーションが再現できます。 そんなanimate.cssをSass版として移植し、より柔軟に使えるようにした**animate.scss**というライブラリを見つけました。既にSass(Scss)ベースでの開発が主となっている自分にとって、これは便利そうだと思い使い方などをメモしました。何かの参考になれば幸いです。 なおanimate.cssをきちんと使ったことが無かったため、アニメーションの動作が分かるサンプルページを作りました。 [自作サンプルページ] http://nekoneko-wanwan.github.io/demo/animate-sass/ (イメージ) 注意事項!! おそらくanimate.cssベ
写真をかわいくするのに、特別なソフトウェアは必要なくなるかもしれません。 普通の写真にスタイルシートを一行追加するだけで、インスタグラム風にかっこよく、そしてかわいく仕上げるスタイルシート「CSSgram」を紹介します。
![[CSS]これはスゴイぞ！写真の仕上がりをインスタグラム風にかっこよく、かわいくするスタイルシート -CSSgram](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a1e50721a73e678b6c769cb9bd3eef0fccdb90b/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102701.png)
英語版はこちら。 OOCSSとは異なり、CSSでちゃんとオブジェクト指向を実現するための方法について解説します。 0. まず「オブジェクト指向」とは 「オブジェクト指向」はIT業界を支えている重要なパラダイムのひとつで、JavaScriptを含む様々なプログラミング言語でサポートされています。特徴としては「型」や「クラス」といった雛形を持ち、雛形から生成された「インスタンス」とクラスとを区別します。 クラスとインスタンスとを区別することで、長期的にメンテナンスしやすいプログラムにすることができます。クラスを修正したり、インスタンスに変更を加えたり、それぞれ自由に拡張できます。 こういったオブジェクト指向プログラム言語（OOPL）に共通の特徴は、CSSでは見られることがありませんでした。2008年にOOCSSという手法が登場した後もです。 それも今日でお終いです。さっそく見ていきましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
