便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer
1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し
【CSS】コピペでOK！強調文字を蛍光ペン風にする方法 | ままはっく
皆さんはブログで強調文字をどれくらい使用されているでしょうか？ 強調文字というのは、タグでいえば＜strong＞。文章中では「特に強調すべき部分」に使用するものですよね。 これ、普通に使うと太字になるのですが、こんな感じで、 蛍光ペン風におしゃれにデザインする方法があります。 コピペでできるので是非やってみてください。 strongタグを蛍光ペン風にデザインする方法 直接、strong指定にしてしまいます。クラス名で指定してもいいのですが、それだと毎回クラス名を指定しなければならないこと、そして今までの記事は適用されないので、strongのタグを置換してしまいます。ただし、全ての強調タグに適用されるので色合いなどはチェックしてください。 場所はstyle.cssに追記します。Stinger3の場合はsmart.cssにも追記。 赤の蛍光ペン 赤の蛍光ペン風はこんな感じ。目立ちますね。 st
Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能
5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show
今更だけどretina対応を考えてみた[簡単] | Cntlog
そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下げておきたいところなので、コーディグ前にどのように画像を切り出すかが悩ましいところです。 高解像度用の画像に対応させる方法 1.読み込ませる画像の大きさを半分にする。 メリット：簡単 デメリット：画像修正の時はHTMLも触らないといけない場合がある。（管理がしにくい） 2.JavaScriptライブラリを使う（今回はRetina.js） メリット：高解像度用の画像を用意するだけで、勝手に読みこんでくれる（管理しやすい） デメリット：読み込む画像の数が増えるので、通信量が増える。 3.Media Queriesを使って高解像度用のデ
![今更だけどretina対応を考えてみた[簡単] | Cntlog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c2d915aad5d9cf326a23609f76e3bd321549b28/height=288;version=1;width=512/https%3A%2F%2Fblog.cntlog.net%2Fwordpress%2Fwp-content%2Fuploads%2Fcropped-01.jpg)
display:table-cell の親に display:table を指定しないと意味無い
CSSのfloatを解除するclearfix で「display:table」を使いました。 clearfixでは、table内のセル(trやtd)が0ならぺったんこで何も表示しない特徴を利用しましたが、 実際のレイアウトで「display:table」を使う場合は、必ず「display:table-cell」と一緒に使います。 逆に言えば「display:table-cell」を使う時は、親要素に「display:table」を指定していないと何も起こらない、意味が無いということです。 また、「display:table-cell」には、tableのセルで設定できる「vertical-align」が使えます。 そのため、通常の要素では指定できない「縦方向の中央揃え」も実現できて、とっても便利です。 本日のINDEX display:tableは、display:table-cellと一緒
UIデザイナー募集で困ってること | F's Garage
トレタCOOのkengochi氏がUIデザイナーについての記事を書いてた。 UIデザインの価値 | Parallelminds BASEでも、ずっとこの辺の職種も募集していて、来月１人入るんだけど、実はUIデザイナーの募集はすごく困っている。 というのも、今、BASEでほしいUIデザイナーとは、 ・いわゆるWebデザイナーではないし、 ・いわゆるフロントエンドエンジニア（JavaScript実装特化型）の人でもない。 というところ。まさしくkengochi氏が書いてる「のりしろ」重要 じゃぁコアスキルって何？ってのを、経験者採用の理想を言えば、 １．D.A.ノーマンの本ぐらいは読んだことがあって、ユーザインターフェースを意識しながらユーザビリティの高い設計ができて ２．ビジュアルデザインのスキルもあって、カッコいサイト、サービスが作れて、 ３．ちゃんとユーザーさんのことを意識できて（つまり
『ＣＳＳ 二重の取消し線・打ち消し線』
アメーバブログ(Ameba アメーバ)をＣＳＳでカスタマイズしてオリジナルブログにしてみませんか? ＣＳＳでどこまでスキンをカスタマイズできるかチャレンジ！ 初心者でもオリジナルなスキンで個性的なアメーバブログ(Ameba)に！ これも問い合わせが多いです 取り消し線（打ち消し線）・・・・・ 色違いの取り消し線はどうやるのですか？ コレについては http://ameblo.jp/exlink/entry-10132377749.html ここにありますので参考にしてください ・・・・・じゃあ・・・普段よく使う二重の取り消し線は？ これはHTMLにもCSSにも残念ながらありません・・・・ googleで二重取消し線、二重取消線、二重打ち消し線 などで調べても出てきません 諦めてください・・・・ えっ？・・・・ じゃあ・・・・ ↑は？ うっふっふ・・・・ 残念ながら二重の取り消し線でも二重
スモールキャップ(先頭は大きな大文字・続く文字は小さな大文字)を作るfont-variantプロパティ - スタイルシートTipsふぁくとりー
《2016年3月5日 11:30 公開/更新》 スモールキャップ(先頭は大きな大文字・続く文字は小さな大文字)を作るfont-variantプロパティ [テキスト] 英語には「先頭だけを大きな大文字」で掲載し、続く文字を(小文字ではなく)「小さな大文字」で表示する「スモールキャップ」というデザイン方法があります。このような「スモールキャップ」は、CSSのfont-variantプロパティを使うことでフォントサイズを自力で調整することなく簡単に実現できます。 スモールキャップ(先頭は大きな大文字・続く文字は小さな大文字)のデザインを作るCSS スモールキャップを作るfont-variantプロパティの書き方 スモールキャップ表示例を作るHTML＋CSSサンプルソース スモールキャップ(先頭は大きな大文字・続く文字は小さな大文字)のデザインを作るCSS 英語には「スモールキャップ」というデザイ
concrete5には、CSSを書ける場所が４つぐらいある - しかたこうきブログ
concrete5を扱っていると、独自のCSSを書きたくなることがあると思います。ただ、誰かに作ってもらって納品した後にCSSをお客さんが書き足したいとか、自分でテーマ作ってるんだけど、jQueryとかの都合でどこに書いたらいいのかわかんない、とかそういう局面はTPOによっても色々。 この記事では「ここにCSSを書くんだよ〜」てなことを書いた上で、シチュエーション別に使い分けを考えたいと思います。 概論 １．main.css フルスクラッチでテーマを作る人なら基本的にはここからCSSを書いて行くと思います。WordPressでは、style.cssという名前でCSSファイルが必須ですが、c5の場合は必ずしもmain.cssという名前でなくとも良い様子。しかし、慣例的にmain.cssと命名するテーマが多いですね。 参考：テーマのつくり方 :: concrete5 Japan 日本語公式サイ
CSSのime-modeについて調べてみた - Web系がおもしろい。
Webサイト関連の仕事をしている友達が、サイト（その友達が作ったものではない）の情報記入フォームを入力時に (＃ﾟДﾟ)「ime-mode勝手に切り替わってくれんがー！」 と憤慨しておりまして、 ( ´∀｀)「Webの仕組みに入力モードの切り替えするの変えるのあったっけ？」 って聞いたら教えてくれました。 聞いたことがないと思ったら非標準なんですね。っていう話です。 テストしてみる http://esperia.kitunebi.com/javascript/css/imemode.html 僕の環境でのテスト OSはMac OS X 32bitです。 IE Firefox3.6 Chrome8 Opera11 ◯ ◯ × × ime-mode便利なんだけど、全ブラウザで使えるようにならないの？ ちょっと経緯とかを探していると、Mozilla Japanの方とW3Cの方からの言及がありまし
クロスブラウザな画像マスク手法（FadeIn/FadeOut可能） - Paradigm Shift Design
最近、クロスブラウザで画像と動画にマスクをかけるという案件がありまして、IEに呪いの言葉をぶつけながら解決したので、そのメモです。 ちなみに私は、フロントエンドエンジニアではなく、バックエンドエンジニアでもなく、ただのプログラマなのでCSSまわりとかおかしいところあるかもしれませんが。 なお、当記事は、The Nitty GrittyというサイトのChristian Schaeferさんが書いたThe Nitty Gritty: CSS Masks – How To Use Masking In CSS Nowという記事をものすごく参考にしています。 はじめに なにをしたいかは、マスクテスト (Masking Test Script)を見ていただければ分かります。 (サンプルの画像がなぜネコ科のアレかというと、Schaeferさんの記事があのネズミだからです) つまり 「画像を2枚重ねて、
最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman（ジョナサン・コールマン）氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
さらばMS ゴシック／MS Pゴシック！ Windows版Google Chromeできれいなフォント表示を実現する - さわだのノート
Windowsではいまだに使用されているMS ゴシックとMS Pゴシック。メイリオやConsolasといったClearTypeのフォントがリリースされて長らくたっても、いまだに標準フォントとして設定しているWebサイトが少なくありません（IT mediaとか）。 Firefoxの場合は、標準フォントを「メイリオ」に設定しておくとある程度勝手にフォントを置き換えてくれます。 一方、Google ChromeはCSSで具体的にフォント名が指定されている場合は、指定されたフォントを優先して適用するようです。そのため、律儀に「MS Pゴシック」とフォント名を指定してくれているWebサイトでは、残念ながらあのビットマップのフォントが表示されてしまうというわけです。 これらのフォントの使用場面が減るだけで、「Windowsはフォントの表示が汚い」といった誤解も減らせそうなのですが……。というわけで、せ
モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
携帯サイト（html,table使用可）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
前回のエントリー「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」では、tableを使わずにできるデザインでサンプルページを作成しました。 今回は「tableを使用してよい」という条件のもとで制作した場合、で考えてみます。 ただ、table非対応機種で見てもそこまでむごい崩れ方をしないように考慮して制作します。 デザイン、条件は前のエントリーと同様です。 前提条件は、 ・3キャリア1ソース ・html（CSSは使用不可） ・文字コード：Shift-JIS ・改行コード：CR LF 対応端末は、 ・docomo 901以降 ・au WIN端末 ・sb 3G です。 ※table非対応端末が含まれているがtableは使用してよいこととする。ただし、table非対応機種でもサイトの閲覧に支障がないようにすること。 チェックポイント tableが使えることによって前よりもチェッ
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
jQueryでテーブル（table）を操作する小回り系コード5種
jQueryでテーブル（table）を操作する小回り系コード5種 テーブルを操作するのに大掛かりなことはプラグインがいろいろありますのでそちらを使うとして。 ここでは、わりと細かいことをjQueryでやってみます。 投稿日2011年08月31日 更新日2011年08月31日 html 始めに操作するべきテーブルを用意します。 ごくごく普通のテーブルですね。 html <table class="table01"> <tr> <th>商品名</th> <th>入荷日</th> <th>価格</th> </tr> <tr> <td>椅子</td> <td>2011-08-01</td> <td>¥ 2,800</td> </tr> <tr> <td>机</td> <td>2011-08-08</td> <td>¥ 6,800</td> </tr> <tr> <td>本棚</td
クックパッド流UIの作り方 - takeshi nagayama's blog
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
伊藤公助氏セミナーGoogleの変化から理解するSEOのトレンド感想 | CSS Nite in SAPPORO
IDEA * IDEA
