[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ
CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。 しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？ とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？ 大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。 大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
LIGデザイナーオススメの便利なWEBサービス・ツール＆サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーチームマネージャーのひろです。 最近、息子のアンパンマンのハマり具合に困惑しています。 アンパンマンが、画面に現れるやいなや大興奮。 軽い近所迷惑状態です(@_@;) クリスマスプレゼントは、間違いなくアンパンマングッズでしょうね（笑） さて、今回は、LIGのデザイナーが、普段からWeb制作を行うにあたり、便利に活用しているWebサービスやWebサイトを紹介したいと思います。完全保存版です！Bookmark間違いなしです！！ デザインするときに役立つWEBサービス５選 960 Grid System 横幅960px用にグリッドが引かれたpsdを何パターンかDLできるWebサービス。 http://960.gs/ Gridulator グリッドデザインには必須のグリッドラインを手軽に作れちゃうWebサービス。 PNGを書き出せるのでとても便利です！ http://gridulato
HTTPリクエスト数削減テクニック2： CSS Sprite編
はじめに こんにちは、クラスメソッド株式会社の野中です。 HTTPリクエスト削減テクニックの紹介に入り、前回の『リクエスト数削減テクニック1：インラインイメージ編』では、インラインイメージについて紹介しました。本記事では「CSS Sprite」の基本的な知識と使い方、使いどころについて解説します。すでに定番のテクニックとなっていますが、何となく使っていることが多いと思います。初学者の方にも理解していただけるよう詳しく解説します。 対象者 対象者は主にコーダー、フロントエンドエンジニアです。 デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 CSS Spriteとは Webサイトではアイコンやナビゲーションなどに多くの画像が使われ、サイトによっては20個30個とたくさんのアイコンが使わ
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
Basic Process to Apply CSS to Your Website
2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その7 目標：CSSでレイアウトが組める・基本的な装飾ができる 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：CSSの基礎知識がある・基本的なCSSが手打ちで書ける 目次
[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の特定のバージョンでロードさせるべ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/nyarla/items/10f0f3e3c2116417df59