今覚えたい！エンジニアのための CSS の基礎講座 〜Flexbox レイアウト編〜 | 株式会社ヌーラボ(Nulab inc.)
大好評の「エンジニアのためのCSS基礎講座」シリーズの続編です。今回は前回の記事でも少しだけ触れた Flexbox レイアウトについて解説したいと思います。 Flexbox は CSS3 から導入され、ヌーラボのサービスでも一部 Flexbox を使用しています。また最近では React Native のコンポーネントのレイアウトにもこの Flexbox が使われており大変注目が集まっています。なので「今更聞けない！」というより「今覚えたい！」技術になりますので、是非マスターしておきましょう。 Flexbox とは Flexbox は正確には CSS Flexible Box Layout Module といいます。その名の通り、柔軟なボックスレイアウトを可能にする CSS の新しいレイアウトモードです。横並びのレイアウトを組む際に従来の方法であれば float や inline-bloc
今更聞けない！エンジニアのための CSS の基礎講座 横並び（float）レイアウト編 | 株式会社ヌーラボ(Nulab inc.)
また、clearプロパティの原理としては、margin-topを自動的に浮動化した要素の高さまで調整するような振る舞いをします。「floatを解除する」というよりも、「floatの影響の及ばない範囲まで調整する」というイメージの方が理解しやすいかもしれません。 2. 親要素がはみ出してしまう See the Pen clear properties by makotofukuda (@mfukuda) on CodePen. 最初の解説のようにfloat要素は浮動化しているため、実は通常のフローから外れるような振る舞いになります。 これが原因のため、要素自体の高さはあっても、描写領域としては認識されないため、親要素からはみ出してしまうような表示になってしまいます。 この現象は「1. floatは勝手に解除されない」でclearプロパティを使用したように、親要素の内側で何かしらの要素を使って
Font Custom
Generate custom icon webfonts from the comfort of the command line. Cross-browser Output multiple font formats and a bulletproof stylesheet with one command. Works on modern browsers, quirky mobile flavors, and even your old friend IE8. Bootstrap-ready Font Custom creates styles using Bootstrap's .icon-{{your-icon-name}} naming convention. Just include fontcustom.css and you're set. Plug and play
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.3 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
京都大学大学院医学研究科 放射線医学講座（画像診断学・核医学）
2024/09/02 NEW 研究会/勉強会を更新しました 2024/08/02 NEW 研究会/勉強会を更新しました 2024/07/03 NEW 研究会/勉強会を更新しました 2024/06/28 NEW 日本核医学会 近畿支部会更新しました。 2024/06/05 NEW 研究会/勉強会を更新しました 2024/05/08 研究会/勉強会を更新しました 2024/05/07 専門研修プログラムを更新しました。 2024/05/02 日本核医学会 近畿支部会更新しました。 2024/04/09 研究会/勉強会を更新しました 2024/04/04 日本核医学会 近畿支部会更新しました。 2024/04/04 News を更新しました。 2024/03/28 日本核医学会 近畿支部会を更新しました 2024/03/18 News を更新しました。 2024/03/04 研究会/勉強会を更新
beautiful fonts with @font-face – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. […] you ever wanted to know about beautiful fonts with CSS’ @font-face: http://ur1.ca/5ikf (via @mozhacks) […] June 11th, 2009 at 08:54 Al Fonts. About bloody time!!
Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
W3Schools.com
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
MOONGIFT: » ごくシンプルなCSSテンプレート「CSS Layout」:オープンソースを毎日紹介
オープンソースまたはCreativeCommonsでデザインを公開しているサイトが増えてきた。こうしたテンプレートを活用する事で簡単にサイトを構築できるようになり、非常に嬉しいのだが一つだけ問題があった。 それはあまりに凝りすぎていて、他に転用しづらい事があるのだ。特にロゴなども格好いいものが既に埋め込まれていると流用がききづらい。その点、このプロジェクトでは転用を考慮したものが公開されている。 今回紹介するのはCSS Layout、オープンソースで公開されているシンプルなCSSテンプレートだ。 CSS Layoutで公開されているテンプレートは大枠で画面幅750px、950px、100%となっている。そしてヘッダ、フッタがあり、2カラムまたは3カラムのコンテンツがあるものになっている。 特に、カラムは左側が160/180/300pxという指定や右側が180/240/300pxという具合に
CSSデザインカタログ
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
CSS でよく使う装飾定義をコンポーネントとしてまとめる
2007-01-26T01:26:38+09:00 北村曉さんよりコンポーネントにまとめる際、それを或る一つのclass名に集約するという方向性についてご指摘いただきました。この記事をご覧いただく際、是非参照してください。 CSSでよく使う装飾定義をclass名でまとめることについて(徒書) また、いただいたフィードバックを元にもう一度考えを改めて記事を書きました。 『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度 リニューアルの際に CSS の分割管理を実践したのだけれど、その分割した CSS の中によく使う装飾をコンポーネントとして class にまとめた component.css というのを作成しました。コンポーネントとしてまとめることで変化に強くなりメンテナンス性が上がるのだけではなく、同じような装飾をおこなうために何度も良く似たスタイル定義を行うということ
暴満館 » JavaScriptでCSSを弄る際のメモ
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。 – 俺の探し方が悪いんだろうが、JavaScriptでCSSを弄るリファレンスが中々見当たらなかったので、メモも兼ねて書く。 結構適当に書いてる部分もあるので鵜呑みにしないように。あと、Operaは知らね。 スタイルシートのルールを弄る div内の全要素をgetElementsByTagNameで拾ってforで回してstyleに・・・ってなことをやるよりも、スタイルシート側から操作できるようになれば楽になる。 function addRule( selector, property ) { if( document.styleSheets[0].addRule ) //IE document.styleSheets[0].addRule( selector, "{" + property + "}" );
Lucky bag::blog: プロパティから CSS 仕様書（邦訳）へのリンク
プロパティ -> CSS 仕様書（邦訳）へのリンク 各プロパティから仕様書（邦訳）の当該箇所へのリンクです。( en | ja )
Lucky bag: : blog: CSS デザインギャラリー
世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー（ショーケース）サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとまとめてみた。（ちなみに順不同） CSS Vault » The Web's CSS Site CSS Beauty | CSS Design Showcase Unmatched Style | CSS Design Gallery and Design Inspiration. CSS Drive css thesis: sites, that's all. » screenspire.com | the leading full
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Demo: Pure CSS GUI icons (experimental) – Nicolas Gallagher
http://www.alvit.de/blog/article/javascript-libraries-roundup
Blogサイトで見かける変なHTML