領域に収まらない文字数を「...」にしたい - bi_naの日記
1行とのき 行が1行のときなら、以下のCSSで、超えた部分を「...」に変えてくれる。 overflow:hidden; text-overflow:ellipsis; ちなみにこれはIEが先進的に取り入れたものであり、他のブラウザでは使えなかったというのを 多く読んだが、使いたい最近のブラウザで使用可能なことを確認した。 参考 http://www6.plala.or.jp/go_west/nextcss/ref/prp/ext_msie/txt_ofl.htm しかし複数行になるところは しかし複数行になるところは、「...」に置き換わらない。 JSで対応 参考 javascript - Insert ellipsis (...) into HTML tag if content too wide - Stack Overflow すこし改良 ちなみにCSSが 引用： .ellipsi
rgbaで簡単にcssのみの半透明の背景が実装できた - ファンブログハック
css3のrgba指定 css3では、色をrgbaで指定できるんです。なので、こいつを使えば透明とか簡単らしいッス。 CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！(Hatena)RGBa 画像透過処理について | webtrace rgbaで、背景色に透過な色を設定するだけです。多くのブラウザでは対応していますし、ブラウザ毎に変なコードを書く必要がなくて、楽ですな。 ただし、rgbaはie8以下では適用できなかったり、色々注意点もある様なので、少しまとめてみます。 rgbaの基本情報 基本的な事は、リファレンスで見れます。 rgba()−CSS3リファレンス 問題は、対応していないブラウザ、特にie7,8をどうするか、って事です。6はもう良いですw やっぱりopacityとかpngとか使う 1つは単純に、他の方法を使うって解決法があります。 Web-半透明について
画面をスクロールしたとき、要素を少し透過させる - at kaneshin
画面をスクロールしたときに、fixedしているヘッダーやナビゲーションに対して、少し透過させるとかっこよくありません？ 実装の仕方は scroll されたときの位置を取得し、それに応じて透過させるだけで良いです。 See the Pen rWXoBY by Shintaro Kaneko (@kaneshin) on CodePen. $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 0) { $('header').css('opacity', 0.8); } else { $('header').css('opacity', 1); } }); }); これは、window がスクロールされたときに処理をするようにしています。 $(selector).scroll
サンプルで学ぶTwitter Bootstrapの使い方：前編 (1/3)
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
Ja - Scalable and Modular Architecture for CSS
大規模なプロジェクトにおいて最適な構造を見つけ出すために自分自身(そして自分の周りの人たち)のプロセスを分析してきたが、その結果、私が見つけ出したのはプロセスは規模の大小に関わらず大規模なサイトであっても小規模なサイトであっても同じように有効なプロセスだった。 プロジェクトやチームが大きくなるのに併せてCSSをより柔軟に、よりメンテナンスしやすいCSSを書くための構造について学んでいこう。 What is it? SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在に
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
StyleDocco
StyleDocco generates documentation and style guide documents from your stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences (```) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resiz
イメージファイルをzipにしてアップロードするとCSSスプライト用の画像とCSSを自動生成するツール・SpriteMachine - かちびと.net
CSSスプライト用の画像とCSSを 自動で生成してくれる、という Webツールのご紹介。作るのは 結構面倒なのでこうして自動化 してくれると楽で助かりますね。 CSSスプライトで使いたい画像を1つのフォルダにしてZIPにしてアップロードすると即座に1枚の画像にし、CSSも発行してくれます。 ZIPをドラッグ&ドロップすれば即座にCSSスプライト用の画像とCSSが入ったファイルをDLします。数によるかもしれませんけど一瞬で出来るのは凄いです。 img.spritemachine_foo { width: 450px; height: 72px; background: url(sprite.png) 0px 0px no-repeat; } img.spritemachine_bar { width: 16px; height: 16px; background: url(sprite.pn
Pixate
Saying farewell to Pixate. When we launched Pixate, our mission was to change the way mobile apps were prototyped. We joined Google just over a year ago to continue our mission, and to pursue a broader vision of changing the way products were designed and built. While a lot of the ideas we’ve been developing could work inside the Pixate framework, we believe we can have a larger impact if we move
Bootstrap
Introducing Google Bootstrap. Need reasons to love Google Bootstrap? Look no further. By nerds, for nerds. Forked from Twitter Bootstrap, built by todc, Google Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Made for everyone. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as I
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
METROUI >> Korzh.com - Tools from Developers for Developers
MetroUI includes everything you need to build your frontend app: responsive grid system, 100+ prebuilt components, 500+ incons, and powerful JavaScript plugins.
Favrik: Preview all Pygments Styles for your code highlighting needs
Published on Tuesday, 22 February 2011. For quickly outputting all the styles (available on my system) I used: $ for i in monokai manni perldoc borland colorful default murphy vs trac tango fruity autumn bw emacs pastie friendly native; do pygmentize -f html -S $i -a .highlight > $i.css; done <?php class A_Request { private $_fields = array( 'title', 'fullname', 'email', 'company', ); private $_op
Untitled Document
Demo CSS3 Image Styles Tutorial by Web Designer Wall. Normal Image (without jQuery background image wrap) Basic Circle Card Style Embossed Style Soft Embossed Style Cutout Style Morphing + Glowing (mouse over images here) Glossy Overlay Reflection (mouse over images here) Tape Style Glossy + Reflection Morphing + Tinting (mouse over images here) Feather Circle
画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！
今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。 私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です
iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 - くらげだらけ
iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。 それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascriptライブラリが登場して一部では盛り上がったりもしています。PhoneGapみたいにWebAppをネイティブにパブリッシュするツールや、Titanium MobileのようにWeb言語ベースで開発してネイティブにするものもありますし、いろいろですね。 iOS4までのMobile SafariではCSSの一部のプロパティが使えなかったりで、よりリッチなWebAppをつくろうと思えばJavascript必要でした。 先日公開されたiOS5では今まで「なんで使えないの？」といったところが少し修正されて、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
fujitaiju.com
Index
#how-to-hide-follow-button on Tumblr