Import Swatches From CSS to Photoshop | Envato Tuts+Unlimited fonts, graphic templates, mockups, add-ons & more! Unlimited asset downloads! From $16.50/m
CSS Rader - Tips and Tricks, Sometimes with jQuery
CSS Tips and Tricks Sometimes with jQueryCSSスプライトとは？ CSSスプライトってご存知ですか？ Yahoo！のパフォーマンス改善チームにも推奨されている手法で、CSSのコードもスマートに読みやすくなる、一石二鳥のテクニック。 さらに、ちょっと面倒な値を設定や画像の生成を手伝ってくれるオンラインツールも紹介しよう。 CSSでカラムのheightを合わせる 複数カラムを採用する場合のそれぞれのカラムの高さが同じにならない。 CSSレイアウトでよく出会うこんな不満。 Tableレイアウトにしてしまう前に、シンプルな解決を紹介。 IE ダブルマージンフロートバグをFix floatした要素に対して、同じ方向にmarginを与えると、marginが2倍になってしまう。 という、IEにおける不可解なバグ。 レイアウトに欠かすことのできないfloat
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
PhotoshopでCSSのカラーを読み込む – A Memorandum
新年明けましておめでとうございます。 Photoshopが最新のアップデートでFireworksよろしくCSSの書き出しをサポートしたのは皆さんご存知かと思うのですが、psd+tutsでCSSファイルからスウォッチにカラーを追加する方法が紹介されていました。 手順は簡単、CSSを読み込むだけ まずは最新のアップデートを適用しましょう（エラーになってできない人は一回アンインストールして入れ直せばいいです）。 6.1.xになったら、スウォッチパネルを引っ張り出して「スウォッチの読み込み」を選択します。 で、読み込みたいCSSファイルを選択する。 ご覧の通りスウォッチが追加されます。 自分が作ったサイトならまだしも、誰かが作ったサイトを作り直す時とかチマチマ色拾ってられないですからね…。これは覚えておくと便利かもしれませんね。
印刷用 CSS の決定版 ※ネタ - understandard
最近あまり聞くことがなくなりましたが、印刷用 CSS を書くのは結構しんどいです。 「パソコンと同じように印刷できるように！」というような要望は、頭を抱えてしまいます。 そんな面倒な作業をサクッと解決できる印刷用 CSS を紹介します。 知っている方も多いとは思いますが、たまに Twitter でネタとしてツイートする時に毎回検索するのが面倒なので。 print.css — only display what’s needed ( http://printstylesheet.com/ ) 2021年9月13日追記: サイトがなくなっていましたが、Tai さんが日本語訳したものを GitHub に残してくれていました。 GitHub – tekapo/print-css: print.css 日本語版 2021年9月15日追記: サイトは作者のサイトのサブドメインに移動していたようです。
CSSで1行目の見出し項目をぶら下げインデントする｜web bibo
注意書きや箇条書きなど段落の1行目に見出し項目がある文章で、項目を目立たせるために、2行目以降を字下げすることがあります。これを簡単に実現する方法です。 注意書きとか箇条書きなど、非常に使う場面が多いと思うのでので、かなり役立つテクニックです。ていうか、このテクニック皆さん知ってますよね。。。一応、CSS初心者の方向けということで載せておきます。 HTMLコード <ul> <li>※ああああああああああああああああああああああああああああああああああああ</li> <li>※いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</li> <li>※うううううううううううううううううううううううううううううううううううううううう</li> </ul> CSSコード ul { list-style: none; width: 250px; font-size: 0.8em; lin
CSSだけでスライドショーはつくれるよ。
この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ（以下：スライドショー）を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら。 以下が目次になります。 まえがき CSS Programmingに使える便利なやつ transitionプロパティ E ~ F（間接セレクタ） :not(s)否定疑似クラス :checked疑似クラス <label>要素 それCSSで出来るよ。 きっかけづくり チョボのところの仕組み ~と:checked <label> transition :first-childと:fi
CSSのfontプロパティと各プロパティについてまとめてみたよ。キーワード指定とかご存知？（CSS おれおれ Advent Calendar 2012 – 16日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 16日目 そういえば割と知らないなーと思いまして。だいたいばらばらに設定しちゃうので。 文法 仕様によると、以下のように設定できます。 [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar 長いのでまとめると、こんな感じ。 値（順序一定） スタイル系（順序不定、任意のものを利用可能） font-style … スタイル font-variant … 変形（CSS 2.1のも
CSSでスマートフォンでも見やすくスタイリング (1/4)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 第4回でWebページの土台となる画像や文字の基本的なCSSを記述したので、今回はヘッダー、メインコンテンツ、フッターなどの各領域のCSSを設定して見栄えを整えていきます。 ヘッダー部分の指定 「枝豆隊」のヘッダー部分のHTMLは以下のようになっていました。 <!-- header --> <header> <hgroup> <h1><img
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 &amp;amp;amp;amp;amp;lt;link rel
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
CSS FreeThrow – a game, noJS, only CSS and HTML – No.1026
CSS Programming Advent Calendar 2012 の12日目です。 自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です（今自分で考えました）。 最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。 適当な解説 メーターとボタンの連動 CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput（ここでは其れに対応するlabel）を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重
スタイルシートの有用なスニペットのまとめ | コリス
よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ
jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
css+jQueryでチェックボックス&ラジオボックスをオリジナルデザインのボタンにする
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Nite LP26に行ってきました | Webデザインのタネ
CSS で切る・貼る・コピーする
Webテンプレート ［HTML・CSSサンプルコード集］ - TAG index Webサイト