CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin） - NxWorld
CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。 すべてp要素に対して適用するのを想定したコードで、全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。 1行の文章を省略 CSSで文章を省略させると聞くとまずこれを思い浮かべる人も多いと思います。 省略したい文章を括っている要素に対して下記のように記述することで、文章が長かったとしても1行に収まる形に省略され、文末に省略記号が表示されます。 複数行の文章を省略 #1 複数行の文章を省略して同じく文末に省略記号を表示させる方法で、省略したい文章を括っている要素に対して下記のように記述します。 省略させない行数は-webkit-line-clampの部分で指定し、このサンプルコードの場合は3を指定しているので文章が4行以上になってしまうときに3行目の文末で省略されて省略
Keiyaku CSS
Keiyaku CSS Crazy Style Formatter for Japanese Contract Document Unfortunately, the style in Japanese contract document is totally crazy. I hope this CSS library cures that a bit: write a document logically structured in markdown or HTML, apply keiyaku-css to it then, you’ll get a well-formed document good luck! 概要 Keiyaku CSS（以下、「本件ライブラリ」という。）は、Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするための、CSSライブラリです。 ユ
自動検出と自動修正でCSSを保守する - Qiita
CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。jslintやrubocopのSCSS版のようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコードを与えた設定に従って自動で変換してくれるものです。scss-lintを初めて導入するときに利用すれば、大半の警告を自動で修正してくれるでしょう。但しCSSの文法しか解釈できないため、SCSSに適用すると失敗する場合があります。SCSSで書かれたファイルに対して適用してみたところ、@includeなどの文法は受理されるものの、@ifなどの文法を受理できないようです。しかしながら問題となるケースが
Rails3.x開発時にIEで困らないためのメモ
Railsで開発するときにUIの実装時にIE8あたりで困ることないように備忘録としてまとめておく。 IE9まではファイルの読み込み限界値に気をつける。IEだけなぜかCSSが適用されないとき、IEの以下の仕様が原因。 IE9までは 1スタイルシートにルールは4095まで 1スタイルシートに @importは31個まで @importの入れ子は4階層まで ちなみにIE10からは、 1スタイルシートにルールは65534まで 1ドキュメントにスタイルシートは4095個まで @importの入れ子は4095階層まで に変更されてる。 詳しくしらべると、asset pipelineがdebug modeのままだとSprocketsがファイルを連結しないため、大量のファイルを読込むことでIEの仕様に引っかかってました。 回避策として、 /config/environments/development.r
JavaScriptベースのCSS preprocessorであるAbsurdJS を試してみる
JavaScriptやJSONでCSSを書ける、というよりもCSS Preprocessorに近い感じのJSライブラリ AbsurdJS を試してみた。 AbsurdJSはサーバー、クライアントの両方で使用できる。 ビルドツールとしてGrunt-absurdが提供されているのでこれを使って試してみる。 Gruntの設定する。以下のようにした。 最終的に１つのファイルにまとめるためにコンパイルが必要とのことなので、import.jsというファイルをmanifestにした。 インポートの順序はcssと同じく、overwriteされるので重要。 ノーマル 疑似要素 ネストネスト記述もほかのpreprocessorと同じく利用可能 変数・関数 mixin pluginmixinににているけど、property - value のペアを定義 media-query rawデータ json、cssファ
Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet)
Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint. The “Don’t use IDs in selectors” suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. This surprised me because smart people have been saying prefer classes to IDs for a while now. The a
CSSの命名規則で迷った話 - 憧れ駆動開発
命名規則大事 まあ時間がないときとか書き捨てとかだとてきとうにしてしまいがちだけど、時間があるときは、そして仕事のコードは自分がかくより読まれる機会が圧倒的に多くなるので変数の命名は非常に大事。で、プログラミング言語の命名規則の話はリーダブルコードとか各言語の慣習に合わせればいいと思うけど、CSS のときどうすればいいか迷った。普段あまりマークアップはしていない。 リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) 作者: Dustin Boswell,Trevor Foucher,須藤功平,角征典出版社/メーカー: オライリージャパン発売日: 2012/06/23メディア: 単行本（ソフトカバー）購入: 46人 クリック: 1,466回この商品を含むブログ (66件) を見る いろいろ参考にする ググって最初にヒットした
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
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
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
楽しいCSSこと「Sass」の3.1が異様な進化：Rails Hub情報局：エンジニアライフ
HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。 Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエンジン。SassはHamlとセットで誕生した、インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語です。CSSを書くのが苦痛じゃなくて、楽しくなるという触れ込みです。 Hamlのほうは、今回はSassの分離が大きなトピックである以外は変化はありません。変化が大きいのは「Brainy Betty」と名付けられたSass 3.1.0のほうです（brainyって脳みそが詰まっていて頭が良いという意味ですね。変な名前を付ける人たちです……。Sass自体も、生意気な女という意味で使われる「sassy girl」にかけているんだ
1px Background Alignment Bug - Firefox/Safari/Chrome - Background Not Aligning - CSS Background Fix
This is an annoying bug that frequently pays us a visit when trying to align a combination of center aligned backgrounds. If you pay close attention, you will catch these bugs on a number of sites, but for those who don’t know what I’m talking about let’s take a look at the issue. The Issue (Commonly seen in Firefox & Safari): The bug appears when trying to align even numbered width backgrounds, w
iPad UserStyle for Cookpad.com
このリンクをブラウザのブックマークバーにドラッグ＆ドロップ！ ブックマークバーに「iCookPadStyle」という項目が追加されます。 クックパッドのレシピページで「iCookPadStyle」をクリックすると、 ページデザインがiPadスタイルに変わります！ Safariのブックマークバーに登録して、iPadとブックマークを 同期すればiPadからも利用可能です！ ※このユーザスタイルはChromeやSafari、Firefoxの最新版でもご利用可能です。 ※このサイト及びユーザスタイルはクックパッド株式会社さんと関係はありません。無断で勝手に作成しただけですので、クックパッドさんに問い合わせなどはしないでください。
jQuery DropDown Menu - Simple JavaScript Plugin « JavaScript DHTML Tutorials
jQuery Simple Drop-Down Menu Plugin The peculiarity of this dropdown menu is that these 20 lines of code and absence of various cumbersome mouse events within html code. The HTML code of the menu represents like unordered list (ul-tag) and has no anything extra insertions. Just plain list of the items. The small size script finds this list by ID and then, just hang on the mouse event handlers. Ver
30 Advanced jQuery Dropdown Menu Solutions - 1stWebDesigner
Hello again, it’s time for the comprehensive programming article. Here you’ll find 38 mainly CSS and jQuery dropdown menu or just multi level menus with downloadable files and explanations as well. Mostly they are free. My favorite here is the first pick – Outside the box with a very unique navigation menu (free) and Mega Menu, which is premium. It’s always good to have such reference articles in
IE6 が死んだらできる10のこと（from Ajaxian） - oogatta のブログ
という記事がその昔 Ajaxian に挙がっていたので自分のメモとして残っていたモノを、そろそろ時期が来たかと言うことでこちらに再掲。 http://ajaxian.com/archives/10-cool-things-we%e2%80%99ll-be-able-to-do-once-ie6-is-dead-and-a-few-we-cant 子セレクタ（child selectors）が使えるようになる。 孫以下を除く直の子にだけ適用するセレクタが使えるようになります。 #bodyMain > p {} ul > li 24bit PNG の機能を全て使えるようになる。 アルファチャンネル付きPNGがネイティブで使えます。アンチ付き角丸を背景色毎に用意する必要が無くなります。 属性セレクタ（attribute selectors）が使えるようになる。 感覚的にいって class の3割
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ap/vim-css-color: Preview colours in source code while editing
CSSだけで幅を超えた文字列を...で省略する - Qiita
ふぁぼったーをFluidで使うためのCSS