CSSで長いURLや文章を改行させる場合のメモ - 牌語備忘録 -pygo
下記サイトから引用 Wrapping Long URLs and Text Content with CSS | Perishable Press pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ }
WebページのCSSプロパティ・値をワンクリックで表示してくれるブックマークレット「XRAY」が神便利！！！
こんな便利なんあったん… Webページ制作でよく利用されるのが「Firebug」などのデベロッパーツールですが、もっと超絶簡単にCSSプロパティを確認できるブックマークレットがありました。っていうかその存在を知りました。 そんなわけでXRAYと言うブックマークレットのご紹介。 使い方は簡単、サイトに訪れたら中央部分にあるボタン状のブックマークレットをブックマークバーへD&Dします。 これにて準備は完了。 CSSを覗きたいサイトを訪れたら先ほど登録したブックマークレットを起動。 XRAYが立ち上がります。あとはページ上の要素をクリック！ すると、その要素のプロパティ・値がご覧のように表示されるのです！なにこれお手軽！便利！ 要素のwidth・heightも確認できます。 そんなわけで簡単ではございますが、CSSを表示してくれるブックマークレット「XRAY」のご紹介でした。ちょっとしたCSSデ
CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
モバイルアプリ向けJavaScriptフレームワーク「Junior」、Backbone、Zeptoなどを採用し、ネイティブのルック＆フィールを持つ
Juniorは、Justin Martin氏が開発したフレームワーク。Martin氏は“My holiday project”としてJuniorを開発したとツイートしています。 Juniorの特徴は、モバイルに最適化したCSSトランジションによるスムーズな画像効果、zeptoやbackbone.jsなど多数のライブラリに依存していることなど。UIコンポーネントはRatchetを利用しているようで、モバイルネイティブのルック＆フィールを備えていると説明されてます。 modernizr、zepto、backboneなどに依存 Juniorが依存しているライブラリは以下。 modernizr（ブラウザごとに異なる実装を調べて、対応するコードを書きやすくする） zepto（jQuery互換のミニマルなライブラリ） zepto flickable（zeptoのタッチ対応プラグイン） lodash（U
Sassy Buttons, Awesome CSS3 Buttons With Compass and Sass - Jared Hardy
Want that fancy CSS3 button look with none of the work? Then Sassy Buttons are for you! Easily create great looking, cross-browser compatible buttons with just a few lines of Sass and you’ll be in button heaven in no time. Getting Started Sassy buttons is a compass extension so, naturally, you must have compass installed to use it. To install compass and the sassy buttons extension, simply open yo
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
落とし穴になる空白文字と改行文字
今回は、意外と分かっているようで分かっていない「空白文字」の問題を取り上げる。これを知らないと、妙なところで落とし穴に陥ることもある。空白文字だからといって、ばかにできないのである。 空白文字・改行文字とは何か？ 最初から当たり前のことを解説するようだが、まずは読んでいただきたい。空白文字というのは、キーボードのスペースバーを押すことで入力される見えない文字のことである（ここではいわゆる半角空白を空白文字と呼び、全角空白は含まないとする）。文字と文字の間を空けたいときに挿入するものである。一見当たり前のことのように思えるが、今回はこれが当たり前ではないケースがあって、しばしば落とし穴になるという話である。 TAB文字は、空白文字と少しだけ似ている。あらかじめ指定された位置までカーソルを前進させる機能を持つ。これは状況によって幅が変わる空白文字と考えてもよい。 改行文字とは、行の最後に挿入し
Fuel UX
Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications. Get Fuel UX View examples Ignite your Bootstrap project today. Include Fuel UX controls in your next web project knowing it's solidly optimized and easy to upgrade. Use a little or use a lot. Deploy only the controls you want with minimal, name-spaced, responsive styling designed to easily fit into
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life
『CSS の border プロパティを使って見出しを装飾しよう』 第２弾!(第４弾まであります!!) 引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します. ちょい派手な見出しです. シンプルな見出しです. 大見出しから中見出しを想定して作りました. 色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい. シンプルな見出し ちょい派手な見出し←今ここ ド派手な見出し(近日公開予定) 超有名サイトの見出し(近日公開予定) Table of contents サンプル Header Type 01 Header Type 02 Header Type 03 Header Type 04 Header Type 05 Header Type 06 サンプル サン
WEB屋にとって便利なジェネレーター色々！最近のオススメも、昔から使ってきた物もまとめてご紹介！ | バンクーバーのうぇぶ屋
WEB屋を名乗って仕事をする以上、作業効率を考える事は必要最低限の努力だと言うお話は何度かこのブログでもさせて頂いてきました。 まぁしかし、ぶっちゃけ何が自分にとって作業効率に繋がるかはやってみないと分からないですよね。作業時間の見直しをするだけで効率化に繋がるかもしれないですし、ツールをもっと使いこなすことだったりするでしょうし、コミュニケーションを円滑にすることで作業効率につなげたりと、何が一番効率化に直結するかは人それぞれだと思います。 ただ、何度かこのサイトでもWEBサイトを作る上で便利そうなジェネレーターの存在を共有させて頂いてきましたが、こういうツールは知ってるのと知らないのとでやはり大きな差が出てくることはやっぱり多いと思います。特に最近はWEBに強いクライアントの存在も目立ってきて、自分だけじゃなく、お客さんにとっても、もしかしたらプラスになるジェネレーターの類も多いんじゃ
ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介
twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。 今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。 実物は別サーバーにアップしていますので、こちらでご確認ください。 今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。 で、まず最初にアイコン形式のフォントを読み込む設定をします。 @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols-regular-webfont.eot'); src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
2012年版、漢字も揃っている日本語のフリーフォントのまとめ
http://handywebdesign.net/2012/11/if-you-want-to-use-many-colors/
デザイナーの私が色選択に迷った時に使用している配色ツール・カラーチャートなどのまとめ
HugeDomains.com
Mana’s Portfolio Website
http://portnine.com/bootstrap-themes/preview