業務でIE8には対応していた画面をIE11にも対応させる必要が出てきたのでIE11にのみスタイルシートを適用させる方法をご紹介します。 IE11にのみCSSを適用させたい場合はCSSハックという手法を用いると便利です。 IE11にのみ適用させるCSSハックの記述方法
コンテンツ幅よりも大きい画像を配置し、ウィンドウがコンテンツ幅より小さい時にだけ横スクロールバーを出す方法です。 今回は主な方法を3パターンご紹介します。配置したい画像や他の要素のスタイルによって使い分けてみてください。 よくある失敗例 まずはよくある失敗例をご紹介します。こんな風になってしまったことはありませんか? コンテンツ幅ではなく、画像の幅で横スクロールバーが出てしまう……。 コンテンツ幅からはみ出す部分が表示されない……。 ウィンドウを縮めると背景部分がずれてしまう……。 そもそも横スクロールバーが表示されない……。 こんな大変な状態とは無縁の、キレイなコーディングの方法を見ていきましょう! 達成したい条件 コンテンツ幅より大きい横幅の画像を配置 画像は左右中央に配置 ウィンドウ幅を大きく(小さく)しても、画像の位置がずれない ウィンドウ幅がコンテンツ幅より小さい時にだけ横スクロ
HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは? 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ
単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。 CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。 完成サンプル 下のサンプルが完成形となります。「Return」をクリックするとアニメーションを再度開始します。 See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen. HTML コード HTML コードはシンプルなリストになります。順番に表示する要素が li になるの
前回、【Sass/SCSS】Modular Scaleを使ったフォントサイズの指定でModular ScaleをSass/SCSSで使う方法について紹介しました。今回はCSS3のremを使ってVertical Rhythmを実現する方法について紹介します。remは対象ブラウザがIE8以上であることが条件になりますが、IE8自体非対象でも良いでしょう。 Example Vertical Rhythmは以外と簡単です。実際にFunctionを作成して実装してみたサンプルがこちら。GRIDLOVERを参考に作成しました。 Function ベースラインを保持ておく変数($base-line-height: <line-height>;)と行の高さを返すシンプルなfunction(vr([$lines = 1]))を用意します。functionは$base-line-heightと引数の$line
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
The logistics industry has experienced a meaningful changeover with the appearance of the Internet of Things (IoT). By enabling real-time data collection and analysis, IoT has supplied new visibility into logistics operations. This raised visibility is key for keeping up […] Read Article Digital trading services have transformed the investment landscape for stocks, commodities, and other financial
CSS設計とは 簡単にいえば破綻しにくいCSSを書こうという問題。 大雑把にいうと共通部分は同じクラスにして使いまわそう、共通化しようというやつです。 今回はCSSを書く前の話(カンプを見るところ)からどういう風にCSSを書くかについて少し書きます。 今回しない話 OOCSSやBEMやSMACSSについて(moduleごとにCSSファイルわけたりとかそういう話含む) 詳しい命名の仕方について ファイル管理(ディレクトリ構成)の方法について 細かいCSSの書き方について こんな方向け 毎回CSSが破綻する人 CSS設計するための◯◯の方法とか読んでもいまいちDRY(Dont Repeat Yourself)に書けないという悩みを持っている人 大事なのはいきなりCSSを書かないこと さてあなたはHTMLとCSSを書くコーダーさんだったりフロントエンドエンジニアさんだったり、あるいはフルスタック
tableの列を示すcol要素について,CSSのどんなプロパティがあてられるかのテストです。 Tried at 2007-06-10 まず,tableのマークアップは次の通り <table> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <tr> <th>項目1</th> <th>項目2</th> <th>項目3</th> <th>項目4</th> <th>項目5</th> </tr> <tr> <td>data11</td> <td>data21</td> <td>data31</td> <td>data41</td> <td>data51</td> </tr> ...... </table>
CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう! 石本 光司(Kaizen Platform, Inc...) こんにちわ、@t32kだよ! 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります!そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
Note: The files "reset.css" and "reset-context.css" are deprecated, use "cssreset.css" and "cssreset-context.css" instead. The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to build upon. With CSS Reset loaded, write explicit CSS your project needs. Note: CSS Base can complement CSS Reset by applying a style
Mind The Gap: Six Causes of Unwanted Spaces In Page Layouts 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 デフォルトのスタイルが原因となる隙間 ボックスモデルが原因となる隙間 ブロック要素内のインライン要素にできる隙間 inline-blockが保持している隙間 DreamWeaverなどWYSIWYGエディタでできてしまう隙間 マージンとマージンの相殺が原因となる隙間 デフォルトのスタイルが原因となる隙間 HTMLを作成する際、スタイルシート無しでも読みやすいようにすることをWeb制作者は忘れがちです。これはすべての要素にブラウザがもつデフォルトのスタイルを上書きして、サイト用のスタイルを適用することを意味します。 ブラウザがもつデフォルトのスタイルとは例えば、パラグラフ
本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情 この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く