CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
知っておきたいCSSの呪縛と希望 - Qiita
CSSを扱いし者たちに課せられた永遠の呪縛。 「CSS簡単でしょ」と思ってる人のコードが混じる恐ろしさ。。。 2016年、全てのCSSの戦友たちに言っておきたいことがある。 今回、それらを３つのポイントに分けてお届けします。 この記事は CSS Advent Calendar 2016 の10日目の記事です。 １．本当に怖いぞ - グローバルCSS 時は200X かつてCSSは様々なファイルに分かれておりました。 Common.css、Layout.css、Top.css、Info.css、Shop.css・・・ ページやモジュールごとにcssを分割し、必要に応じて読み込んでいた時代です。 この時代はCSSがいくらユルユルな仕様とはいえ、まだ平和でした。 つまり、読み込んだCSSファイル同士の関係さえ知っていればよいのでした。 201X 前期 (2010〜2013年ぐらい) CSSを1ファ
Code Guide
Golden rule Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what’s incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub. Every line of code should appear to be written by a single person, no matter the number of contributors. HTML Syntax Don’t capitalize tags, including the doctype. Use soft tabs with two spaces—they
Kraken
A lightweight, mobile-first boilerplate for front-end developers. Kraken isn't a framework. It's a starting point for your web projects. A starting point for front-end projects Designed to be lightweight and style agnostic, Kraken includes just the essentials. A minimal, modern CSS reset A responsive, mobile-first grid built on flexbox A well-designed, fluid typographic scale CSS buttons Simple ta
img:after { content: attr(alt); } としても何も表示されないのは、仕様的に正しい挙動です
img:after { content: attr(alt); } としても何も表示されないのは、仕様的に正しい挙動です 公開日: 2011年5月11日 タグ: css お分かりの方には何てことないというか今さらな話ですが、割と出来なくて悩んでる方が多いように見受けられたので。Twitter のツイートを検索してみてもたまに話題に上がってるっぽいし。 「画像にキャプションを表示する」などの名目でこの img:after { content: attr(alt) } のような[1] CSS 例を挙げているところがいくつかあるのですが、実際にこのような CSS を書いても alt 属性値が画像の後ろに表示される事はありません。Opera では表示されるようですが（あと私の記憶にはないのですが、どうやら古い Mozilla もこのような実装になっていたみたい[2]です）他のモダンブラウザでは基本
【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 - 納豆には卵を入れる派です。
どうも。 CSS Preprocessor Advent Calendar 2012 2012年12月20日（木）を担当させていただきます@ken_c_loです。 そうそうたる面々の中、みなさんハイレベルな内容で大変恐縮しているのですが、そんな中モジモジしながらしかし空気を読まずに、ずっと書きたかったウザい感じのエントリを投下しようと思います。 ズボンを履かない「SASS記法」とは？ 発端はこのツイートからでした。 …と、そんな流れで、「ズボンを履かない」SASS記法とはなんぞや。その魅力、カッコよさについて力説しようと思います。あわよくばSASS記法仲間を増やしたい！そして、お菓子などを食べながらSASS記法の魅力について語り合い、仲間の少なさについて嘆き合う.sassの会を月一くらいで開催できればと思います。 ヾ(*’ω’*)ﾉﾞ ｽﾞﾎﾞｰﾝ‼ SassにはSCSS記法とSASS記法
Simple yet amazing CSS3 border transition effects
Description Some crazy effects with Border Transitions. Originally made by ksk1015. Pretty basic CSS3 code, but amazing output.
CSS Filtersで写真加工するWebApp - CSS PhotoEditor - くらげだらけ（くだくらげのBLOG）
iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。 世間ではAppleのマップでいろいろと騒いでいたりしますが、OSがアップデートされるたびに私がチェックすることといえばブラウザの仕様や機能の変更です。 去年はWebAppやスマホサイトを作るには嬉しい変更がありました。position:fixedやiframeの慣性スクロール、他にもSVGや縦書き、明朝フォントのサポートもありました。 その辺りはiOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】と【後編】というエントリーでまとめて書いています。このときもデモ用にフルスクリーンで使えるWebAppを作成しました。 今回はCSS Fi
mozillafactory.org - このウェブサイトは販売用です！ - 授業 会津 ワークショップ 先生 若松 づくり 今週 国立 リソースおよび情報
このウェブサイトは販売用です！ mozillafactory.org は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、mozillafactory.orgが全てとなります。あなたがお探しの内容が見つかることを願っています！
ソーシャルボタンをキレイに並べる | ntks
なんか いつも うざい から めも。 だいたいボタンの高さは20px。 各ボタンのコードを取ってくる画面からコピペしてつなげただけど、いいねボタンがズレてる。 いいねボタンの iframe の vertical-align が text-bottom になってるのが原因。 その他は付いてなかったか inherit だったか。覚えてない。 ということで vertical-align を text-bottom に揃えてやる。 で、縦のズレは治った。 で、各ボタンの間隔。 なんでウチのデザイナーは毎回ボタンを右寄せにするんだろう。 iframe だから CSS で幅を無理矢理 60px, 100px, 100px にしたら↑の画像くらいの間隔になった。 もうこれでいい。どうせうまくいかないんだから。 もっとエレガントな配置を考えて欲しいです。 あ、↓は違うよ。
Crunch App
There are a ton of code editor program available, so how do you choose the best? The main criteria is obviously the languages you are using, as you will need an editor that supports these languages. Regardless of whether or not you are going to be building a brand-new website from scratch or utilizing a popular CMS and learning how to create a blog website with WordPress to customize as you go alo
Quick Fun: CSS3 Filter Effects
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
メディアクエリー - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub's CSS Performance
CSS4セレクタ (Selectors Level 4) の新機能
Media Queries
SASSIENCE ～ 世界が嫉妬するCSSへ
Blog - CatsWhoCode