Facebook Like Boxを可変レイアウトにして横幅ピッタリにするカスタマイズCSS
昨日公開した当ブログのスマートフォン版デザイン。 このデザインを作成するにあたって、ちょっとカスタマイズしたのが、Facebookのソーシャルプラグイン「Like Box」です。 デフォルトだと固定幅レイアウトになるので、スマートフォンサイトでは可変幅になるようCSSで調整しました。その実装方法をご紹介します。 Page Pluginでは不要です 追記 「Like Box」が取下げられ、その代替として「Page Plugin」というソーシャルプラグインが登場しました。 こちらのプラグインは、最大幅が500pxしかありませんが、自動的にデバイスに合わせて幅が可変されるようになっており、本記事で紹介しているカスタマイズが不要になります。 「Like Box」は今後一切使えなくなりますので、速やかに新しいコードへ移行することをオススメします。 実装するとこんな感じになります! まずは縦向きで表示
IE8で nth-child を使う│WEB│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積
first-childは、IE8でもきくのですが、 nth-child(n)はきかないのですよねー。 これが使えたらすごく便利なのに。 ということで調べてみました。 いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で その案件が、大きめの案件で既に納品しているページもあったので ヘッターの記述に新たに何か追加したくなかったことと、 はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。 下記ページのハックが簡単でわかりやすかったです。 CSS: Internet Explorer 7-8 nth-child hack これを ------------ .test ul li:nth-child(3){ background: yellow; } ------------ こう書く ------------ .test ul > *:f
CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張 ローカル環境での使用（スタイルシートファイル） Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
Quick Start
Getting StartedQuick StartAjaxAPIClassContextDomEventsModuleOptionsServiceThemingModulesAlertBreadcrumbBreakpointButtonColorDropdownFormGridHelpersLabelLayoutMixinsModifiersNavbarOffcanvasPagerSpaceStickyTableTabsToggleTypographyServicesAppAnimateLangMessageModalModalFormModalElementProgressResponseUtilsAddonsAutocompleteCheckComboboxDatepickerEditableMagicQueryNumberSelectorSliderUploadValidateVi
[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
CSS見出し-ジェネレーター | WEB道
あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ 見出しサンプル あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ CSSコード .sample2 { position: relative; color: #ffffff ; background: #000000; font-size: 16pt ; line-height: 1; margin: 20px -10px 20px -10px; padding: 10px 5px 10px 20px; box-shadow:1px 3px
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
既存のHTMLからID/クラスを抜き出してCSSを生成·extractCSS MOONGIFT
extractCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 スタイルシートの記述法は幾つかあります。linkタグで外部ファイル化、styleタグでインラインに表示、そしてstyle要素でタグごとに指定する方法です。styleタグに書き込まれてしまったスタイル設定を一気に書き出してくれるのがextractCSSです。 トップページです。まず右側に現状のHTMLソースを入力します。 そしてExtractボタンを押すとスタイルシートが出力されます。 入れ子向上も適切に処理されています。 extractCSSではID/クラスを自動的にピックアップして生成していますので空っぽの指定が相当数生成されることになると思います。それらを必要に応じてフィルタリングするようにすればスタイルシートのベースとして使えるのではないでしょうか。 MOONGIFTはこう見る
jQuery Custom Select Box Plugin - jQuery.customSelect()
jQuery .customSelect()The ridiculously lightweight, semi-native select box styling plugin What it be This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. This conc
最近流行りのウェブ開発系ツールまとめ（主にデザイン） | keisuke.tsukayoshi
最近、ウェブデザイン周りの優良ツールがたくさん出てきていて、しかもちゃっかりみんな買っちゃうしアドオン系のソフトウェア界隈にも良い流れを感じるこのごろ。今回は、ぼくが買ったツールのうちこれは手放せないなとおもったものをピックアップしてアフィリンク付きでゲス顔で紹介したいと思います。主にMacです。 マークアップ系 Slicy PSDファイルから画像素材が出力できるアプリ。PSDファイルを読み込ませるだけでほとんど自由自在に画像素材を書き出せます。使い方はPhotoshopのレイヤーやフォルダに.pngなどの拡張子をつけておくだけ。 マークアップするときの画像書き出し作業が全然億劫じゃなくなったのが一番嬉しい。一度読み込ませると、あとはPSDが更新されたら自動で書きだす機能なんかもあります。スマホのRetina用に半分の画像も一緒に書き出せたり、MacのRetina用に二倍の画像も一緒に書き
チェックボックス、ラジオボタン、セレクトボックスをカスタマイズしてカッコよくするjQueryプラグイン | スターフィールド株式会社
チェックボックス、ラジオボタン、セレクトボックスをカスタマイズしてカッコよくするjQueryプラグイン 普段、webサイトを制作していると、 チェックボックスやラジオボタン、セレクトボックスはブラウザのデフォルトのものしており、 しばらくは変更できないものだと思ってました。 でも、今はもうそんなことはないみたいで、 いろいろカスタマイズできるプラグインなんかがけっこうあるみたいですね。 その中から、チェックボックスやラジオボタンをカスタマイズできるものと、 セレクトボックスをカスタマイズできるものを紹介します。 簡単ですが、 デモも作成していますので、ぜひご覧ください。 DEMO チェックボックスやラジオボタンをカスタマイズできるjQueryプラグイン『iCheck』 iCheckというプラグインですが、 まずは、 iCheck から一式ダウンロードします。 <link t
フォーム要素のカスタマイズ｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements〔ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズ〕 Custom Select boxes with jquery〔アイコン入りのプルダウンメニュー〕 File Style〔参照ボタンを指定したボタン画像にする〕 jCombox: jQuery HTML Select Tag Plugin〔Select要素の拡張プラグイン〕 jQuery Custom Check Box and Radio Buttons 〔チェックボックとラジオボタンを画像化〕 jQuery Dropdown Check List〔複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューに〕 JQuery Geogoer VChecks Plugi
Patternify | CSS Pattern Generator
What is Patternify? Patternify is a simple pattern generator. I built it to save myself the pain of launching Photoshop just to export a 2px by 2px stripe pattern. Not only can you build your pattern online, but with the base64 code, you don't even need an image file anymore: just include the code in your CSS and you're ready to go! Instructions Draw your pattern on the grid. You can use the curso
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simple Styles for <hr>'s
uibox.in
» [CSS] 印刷用CSSのポイント Web Sytem | AIDREAM