jQuery FreejQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representation of the real DOM). React only writes patch updates to the DOM, but never reads from it. It is not feasible to keep real DOM manipulations in sync with React's virtual DOM. Because of this, all jQuery functionality has been re-implemented in React.
4. 使用ツール(事前知識) • CSS Preprocessor: Sass（scss記法） • Reset CSS: sanitize.css • HTML Template Engind: Jade • TaskRunner: Gulp • VersionControlSystem: Git 4 5. 得られる恩恵 1. コードの品質の安定 慣例・定石の例をまとめることで品質(拡張性, メンテナンス性, 可読性, バ グの回避)を担保する 2. コミュニケーションコストの削減 ルールに沿った書き方をする事で連絡や質問事項を減らす 3. 経験値の共有 HTML/CSSの仕様上起きやすいミスを防ぐ 5
タイトルの通り、CSS のカバレッジを計測するツールを作りました。 github.com これは何？ css に書かれたスタイルが html の中でどのくらい使われているのか計測できるツールです。 使用頻度の多いスタイルを調べる（影響範囲が大きいので気をつける） 未使用のスタイルを調べる（消したい） ってのを調べるために作りました。 なんて読むの？ Clairvoyance は「クレアボヤンス」と読みます。 千里眼 という意味です。 PhantomJS を使っているので、超常現象っぽい名前にしてみました。厨二病乙。 インストール方法 npm でインストールできます。 $ npm install clairvoyance phantomjs を使っているので、もしかしたら phantomjs のインストールが別途必要かも。 使い方 インストールすると clairvoyance というコマンド
領域をはみ出したときに三点リーダー（…）で省略するtext-overflow: ellipsis;は、スマホサイトでは普通に使っていたけど、PCでは数年前に使おうとしてなんかのブラウザでダメだった記憶があって、使えないものとばかり思い込んでいた。 でも、ふとCan I use CSS3 Text-overflowをみたら、めっちゃ対応してた！IEなんて6から対応してるし、Firefoxも7から使えるようになってた。 実際に書いてみたら、いつものこんな感じのコードで普通に使えました。 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 昔、JSでなんとかそれっぽくできないかみたいに、誰かががんばっていたのはなんだったのか。 わたしみたいに使えないと思い込んでて、意外としらない人いるかもしれないので、ブログに書いてみま
こんにちは、デザインチームの@_ringogirlです。 弊社では現在スタイルガイドの構築をHologramというgemを使って進めています。 構築の過程で機能の拡張が必要になりプラグインを作ることにしましたが、 Hologramのプラグインに関する記事が少ないため、作り方をまとめてみました。 今回はサンプルとしてBrowserStackを使って複数のブラウザからスクリーンショットを撮り、スタイルガイドに貼り付けるプラグインを作ってみます。 Hologram Ruby製のスタイルガイドジェネレーターです。CSSに書いたコメントからスタイルガイドを生成してくれます。 SassやLESSにも対応しています。 trulia/hologram Hologramのプラグイン READMEには載っていませんがHologramはプラグインを作る機能を提供しています。 このプルリクエストでプラグインを作る
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。
CSSの:before,:afterは他のものとは違う独特の動きをしており、初心者が理解し難いため避けられがちな内容かと思います。今回は、そんな:before, :afterを初心者でも出来るだけわかりやすいようにご紹介したいと思います。 CSSの:before,:afterは他のものとは違う独特の動きをしており、初心者が理解し難いため避けられがちな内容かと思います。 今回は、そんな:before, :afterを初心者でも出来るだけわかりやすいようにご紹介したいと思います。 本記事の対象者 本記事は、以下の3点を全て満たす方を対象として書かれています。 HTML/CSSの初心者 :before,:afterを理解していない、または初めて名前を聞いたという方 インライン要素、ブロック要素を理解している(まだよくわかってない！という方はこちらで勉強しよう！) :before, :afterの
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
こんにちは、クレイの亀井です。もうすっかり秋ですね！コンビニやケーキ屋さんに芋栗南瓜のスイーツがもりだくさんでテンション上がりっぱなしです さて本題に入ります。先日9月30日にクレイ社内で Sass 勉強会を開催し、CSS 設計について発表しました。そのことについて今回はブログに書こうと思います。 開催することになった経緯 数ヶ月前から社員のキャリアアップのため、『クレイ社員補完計画』が開始しました。週に4時間まで自分の好きなことを勉強する時間をとれ、2ヶ月に一度ブログや勉強会などの場で成果を発表します。 私ははじめ別のテーマにしていたのですが、いまいちモチベーションが上がらず、相談した結果 Sass をテーマに勉強会を開催することになりました。 社会人になってから2年半、スライドを制作して発表をするという経験がなかったのですが、いつか外部の勉強会で LT などしてみたいと思っていたためい
昨日大阪で開催された、CSSオジサンっていうCSSの勉強会に行ってきたのでその雑感。CSSオジサンってだけに若者は少なかった。女性の人が思ったよりいた印象ある。 発表は、最初がCSS設計の教科書の著者である@hilokiさん。@hilokiさんと言えばCSS設計。「メンテなブルであり続けるためのCSS設計」というタイトルの発表だった。CSSを片手間に書いている人たち、@hilokiさんのスライドは一読すべきだと思う。 メンテナブルでありつづけるためのCSS設計 from 拓樹 谷 次が@cssradarさんで、「CSS Investigation: CSSコードレビューの仕方教えます」という発表。コードレビューをする側の心構えや、おなじみの便利ツールの紹介、コードの不吉な匂いの見つけ方とかの話だった。 最後が@t32kさん。「CSSオジサン、この先生きのこるためには」というタイトルで、@t
The document summarizes Hiroki Tani's presentation at the QCon Tokyo 2014 conference on modern CSS architecture. Some key points discussed include: - Adopting modular approaches like OOCSS and SMACSS to separate structure from skin/style and improve maintainability. - Using techniques like BEM naming to further decouple CSS from HTML. - Developing reusable CSS modules and components with flexible
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
１．ボックスの構造 マージン、枠、余白の関係は下図のようになる。コンテンツと枠の間にある間隔が余白（padding）であり、枠の外側部分がマージン（margin）となる。 背景色や背景画像を設定した場合は、枠の内側に適用される。マージン部分は透過色となるため、背景は付かない。 ２．マージン、余白、枠線の設定 マージン指定 ｛ margin ： （マージンの長さ） ； ｝ 余白の指定 ｛ padding ： （余白の長さ） ； ｝ 枠の指定 ｛ border ： （線の太さ） （線のスタイル） （線の色） ； ｝ （例）マージン幅30px（ピクセル）、余白20px、枠の太さ5px（茶の実線）、背景色ライトグリーンのボックス。 div { margin : 30px ; padding : 20px ; border : 5px solid maroon ; backgro
Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Acc
世間的には休日なのに仕事をしていると、脳の創造的活動を司る領域が破壊されていくような気がしてしまいます。 ある日見たWWFの404ページに感銘を受けて、いつか面白い404ページを作ってみたいと思っていました。 いい機会なのと、息抜きを兼ねて404 Not Foundページをちょっとファニーな感じに作ってみました。 ※注意：この投稿は技術的にためになるようなことは殆ど書いていません。 どんなNot Foundページを作ったの？ 背景画像がランダムで選択されます。 背景画像に沿ったテキストが表示されます。 「404 Not Found」のテキストがランダムでアニメーションします。 サンプルページ ロード時間とか一切考慮していない ブラウザ互換も全く気にしていないchromで試しただけ。 素材やライブラリについて このNot Foundページを作るにあたって以下の素材・ライブラリを利用しています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
