曖昧になりがちなインライン要素とインラインブロック要素とブロック要素の違い
公開2016.06.17 更新2017.12.03 仕事・技術 曖昧で間違えやすいCSSのdisplayプロパティの、「display:inliine;」と「display:inliine-block;」と「display:block;」の違いについてまとめてみました。 主な違いとしては上図の表のとおりです。 表だけだと把握しづらいと思いますので以下にサンプルを示します。 <span class="inline">インライン要素です</span> <span class="inline">インライン要素です</span> <span class="inline">インライン要素です</span> <span class="inline">インライン要素です</span> <span class="inline">インライン要素です</span> <hr> <span class="inli
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
position-stickyについて調べたメモ - 1000ch.net
2015.03.31 position-stickyについて調べたメモ 業務中にposition: sticky;的な表現をする必要があって、JavaScriptで実装したり、その辺の仕様がどうなってるのか調べたメモ。スティッキーの挙動を言葉で説明するのは難しいので、デモを見てもらったほうが話が早い。 Fixed-sticky - filamentgroup Demo: Position Sticky 広告をスクロールに応じて一定位置まで追従させたいシーン等によく利用されているイメージ。範囲が限定されているposition: fixed;と言えばいいんだろうか。 スペックなど Sticky Positioning from Edward O’Connor on 2012-06-26 ([email protected] from June 2012) 6.2. Sticky positio
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の
z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
[CSS]要素を横並びに配置できる display:table-cell の基本的な使い方と注意点｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
display:table-cell は以下のような使い方をします。 /*CSSの記述*/ <style> ul.nav { display:table; } ul.nav li{ display:table-cell; vertical-align:middle; text-align:center; } </style> /*HTMLの記述*/ <ul class="nav"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ul> 親要素に display:table を指定し、テーブル扱いとする display:table-cell は display:table とセットで使う事が多いです。 親要素（ul.nav）に display:table を指定することで「表（<table>）」の扱いになりますので、子要素
![[CSS]要素を横並びに配置できる display:table-cell の基本的な使い方と注意点｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/064c25df7076bfa97df969ef135adeb7d7d66d9f/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2012%2F09%2Fdisplaytablecell.png)
line-height - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSSリファレンス。(ウェブの作り方)
CSS におけるボックスの概念に関して解説します。 ボックスとは。 CSS においては、視覚系のユーザエージェントでは各要素はボックスと呼ばれる領域に納められます。 ボックスを構成するもの。 ボックスは以下のもので構成されております。 本体 ボックスに収められる、要素の内容本体です。背景のプロパティが適用され、非置換インラインボックス以外では、幅と高さの概念を持ちます。 パディング 要素の内容本体周囲の空間で、上下左右にそれぞれ 0以上の幅が指定出来ます(不要なら幅を0とします)。 パディングには本体と同様に背景のプロパティが適用されます。 枠線(ボーダ) 要素に引かれる枠線で、上下左右にそれぞれ 0以上の幅が指定出来ます(不要なら幅を0とします)。 枠線(ボーダ)には本体と同様に背景のプロパティが適用されます。 破線や二重線など、枠線の一部に線が引かれない部分がある場合、その部分が背景と
子孫セレクタ－スタイルシートリファレンス
以下の使用例では、ｐ要素の下にあるstrong要素にスタイルが適用されます。 この際、p要素直下にある子要素のstrong要素だけではなく、孫要素以下のstrong要素にもスタイルが適用されます。 ■使用例 スタイルシート部分は外部ファイル（sample.css）に記述。 p strong {background-color:#3399FF; color:#ffffff; padding:5px;} span {font-size:small;} HTMLソース <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <h2>今日の<strong>お天気</strong></h2> <p> 今日は<strong>晴れ</strong>です。 <span><strong>洗濯
子セレクタ－スタイルシートリファレンス
セレクタを > で区切ると、あるセレクタの直下の階層にある子セレクタを対象にスタイルを適用することができます。 以下の使用例では、ｐ要素の直下にあるstrong要素にスタイルが適用されます。 この際、p要素直下にある子要素のstrong要素だけにスタイルが適用され、孫要素以下のstrong要素にはスタイルは適用されません。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル（sample.css）に記述。 p > strong {background-color:#3399FF; color:#ffffff; padding:5px;} span {font-size:small;} HTMLソース <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <bod
Inheriting box-sizing Probably Slightly Better Best-Practice | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I’m a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to setting it that seems like a pretty good idea. Here’s the adjusted version: html { box-sizing: border-box; } *, *:before, *:af
BLOCKS Bootstrap builder
Introducing new... BLOCKS v.3.2 Simple Yet Powerful Website Builder Watch theVideo demo Make Websites in Record Time! COMPARE PRICES NOW GET FREE DEMO NOW! "Developers could really use a hand in speeding up or even automating the process. That's where an application like BLOCKS is life saver!" -MightyDeals.com
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.” — Eric Meyer Features Processes every stylesheet in <link> or <style> elements
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
box-sizing－CSS3リファレンス
box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。 値にcontent-boxを指定すると、 widthとheightで指定する幅と高さが内容領域に対して適用されます。 幅と高さにはパディングとボーダーは含まれません。 これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。 値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。 内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、 パディングとボーダーの分だけボックスサイズが小さくなります。 DOCTYPEスイッチの互換モードのような表示になります。 ■値 content-box パディングとボーダーを幅と高さに含めない（初期値） border-box パディングとボーダーを
スマホサイトつくるならbox-sizing: border-box; をつかったほうがいいよ！ | 株式会社オールフェスタ
株式会社オールフェスタは、「仕事で一緒に遊ぼうぜ！」という祭の音頭をとる会社です。13/05/14 そのコードを入れるだけ！棚ボタウィジェット革命【WordPress】 今回は、【ウィジェット】を作る方法をご紹介します。 「ウィジェットエリア」を作りたい方は前回の記事をどうぞ。 １．やり方 ①下のコードをfunctions.phpにいれる class MyWidgetItem extends WP_Widget { function MyWidgetItem() { parent::WP_Widget(false, $name = 'ウィジェットの名前'); } function widget($args, $instance) { extract( $args ); $title = apply_filters( 'widget_title', $instance['title'] )
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ![[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1fd89076a824a2b1b121fa5a6c8839a4338de05/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012701.png)
CSSが破綻する4つの理由 - Qiita
めしおのアフィリエイト教材レビューブログ