Gelatin over button effect with Sass....
Gelatin over button effect with Sass....
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい動きをアニメーションで与えるスタイルシートを紹介します。 ベルはリンリン♪、いいねは上下に、スピナーはぐるぐる動きます。 Font Awesome Animation 左はアニメーションのトリガーをページのロード時、右はホバー時にしたものです。 Font Awesome Animationの使い方 Step 1: 外部ファイル Font Awesomeと当スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-animation.min.css"> Step 2: HTML まずは、Font
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張 ローカル環境での使用（スタイルシートファイル） Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
Web Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化など海外WEBテク20本を一挙公開 斉藤 祐也（株式会社リッチメディア） 斉藤祐也の海外WEBテク定点観測＜Issue.12: 2014/03/01-2014/03/31＞ 今月の定点観測はWeb Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化などを紹介します。 注目ニュースピックアップ Web Componentsに関するパネルディスカッション 原題: EdgeConf 3: Components 3月21日にロンドンにて開催されたEDGE Conferenceにて議論されたWeb Components。このカンファレンスでの議論そのものも非常に興味深いものですが、このカンファレンスをきっかけに多くの議論がブログなどで展開されました。Web開発の未来を担うとす
※OOCSSについては過去記事を参照のこと OOCSS（オブジェクト指向CSS）のススメ 難しいOOCSS（オブジェクト指向CSS）の設計 再利用性の範囲を2つに分けて考える OOCSSはとにかくクラスを細分化すればいいってもんではない。 クラス=プロパティ レベルまで細分化されたCSSは、煩雑になるばかりかコストも高くなる。 だが、細分化すること自体が悪いわけではない。 失敗に陥るのは、再利用性の範囲を明確にしていないため。 再利用可能な範囲とは？ いま製作しているサイト内？ それともあらゆるサイト？ まずはこの線引きをしっかりすることが重要だと思う。 プロセッサー型CSSフレームワークmaple.cssのヘルパーには以下のようなクラスが定義されている。（抜粋 .ref { position: relative; } .abs { position: absolute; } .fl {
OOCSSとは、構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法である。 OOCSSの考え方に基づいてスタイルシートを記述すると、パフォーマンスと再利用性、メンテナンス性の向上が見込めます。 しかし、OOCSSを上手に設計するのはけっこう難しいのです。なんとなくそれっぽく書いただけでは、OOCSSの導入を成功に導くことはできません。 TwitterBootstrapに代表されるCSSフレームワークなどは、高度に設計されたOOCSSと言えます。そのレベルまで完成度を高めようとするなら、そうとう高度な設計技術が求められます。 初心者が陥りやすいダメな例 > OOCSS? .red { color: red; } .blue { color: blue; } 一見「どんなサイトでも再利用できそうな汎用性のあるクラス定義で、CSSのプロパティを見なくてもマークアップで
模写をする習慣がついてから、公開されているいろいろなスタイルシートを見るようになったのですが、その中で気になる表記を見つけました。 .mt5{ margin-top: 5px; } .mt10{ margin-top:10px; } .text-left { text-align: left; } .text-right { text-align: right; } ↑こういう表記です。「common.css」とか「base.css」と名付けられたファイルの中に記述されていることが多く、見かけるたびにこれって業界ではよく使われているのものなの？と思いました。 この表記の意味はわかります。あらかじめわかりやすいクラス名でスタイルシートを用意しておいて、HTMLにクラス名を記述しレイアウトを組んでいく…というものですよね。私も「.clearfix」と名付けたクラス用意して同じ手法を使っています
【OOCSS】 <div class="box box-red"></div> <div class="box box-blue"></div> .box { width: 50px; height: 50px; } .box-red { border: 1px solid red; background-color: #FFCCCC; } .box-blue { border: 1px solid blue; background-color: #66CCFF; } といった感じです。 いままで「OOCSS」という言葉を知らなくても、マークアップエンジニアや、ある程度経験のあるWebデザインナーであれば、効率化を図るために自然にやっていることではないでしょうか？ この考え方を体系化してまとめたものがOOCSSです。 では次にOOCSSがどのような考え方のもとに設計されたのかを見ていきまし
まんまです。使えるようになってるのを最近知りました。 text-overflowはIEが6から独自仕様として実装していたものですが、 Microsoftの珍しく素晴らしい先見性によって、CSS3の仕様にも組み込まれたものです。今までもwebkit,Operaでは使えていました。 それが、Firefox7からようやく実装されたということですね。 以下のクラスを作っておいて、横幅の指定された対象要素のクラスに追加してあげれば良いです。 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } はてなはCSSが使えるようなので、以下実際にやってみますね。 わかりやすいようにボーダ
The document introduces Object-Oriented CSS (OOCSS), emphasizing its benefits in enhancing website performance and reducing maintenance costs by promoting the reuse of design components. It outlines strategies for implementation, such as reducing file sizes, utilizing CSS sprites, and maintaining consistency across styles. The author discusses best practices for structuring CSS to avoid duplicatio
オブジェクト指向CSS（以下OOCSS）では「構造とスキンを分離する」という言葉を良く見かけます。 最初は具体的にイメージできなかったのですが、おそらくこういう事ではないかと思ったので、調べた事をまとめたいと思います。 サイト制作では、CSSの記述によって更新性などパフォーマンスに違いが出てしまいます。 柔軟に対応しようとして細分化しすぎるとインライン指定と似たものになりCSSの役割を活かず、セマンティックにしようとするとCSSが重複しがちです。 【インライン指定のようになってしまった例】 ・CSS .red { color: #FF0000; } ・html <div class="mainArea"> <h2 class="red">タイトル</h2> </div> 【セマンティックな例】 ・CSS .mainTtl01 { width: 700px; margin: 20px 0;
領域をはみ出したときに三点リーダー（…）で省略するtext-overflow: ellipsis;は、スマホサイトでは普通に使っていたけど、PCでは数年前に使おうとしてなんかのブラウザでダメだった記憶があって、使えないものとばかり思い込んでいた。 でも、ふとCan I use CSS3 Text-overflowをみたら、めっちゃ対応してた！IEなんて6から対応してるし、Firefoxも7から使えるようになってた。 実際に書いてみたら、いつものこんな感じのコードで普通に使えました。 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 昔、JSでなんとかそれっぽくできないかみたいに、誰かががんばっていたのはなんだったのか。 わたしみたいに使えないと思い込んでて、意外としらない人いるかもしれないので、ブログに書いてみま
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
