CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック

2022/07/13 241 users CSS コンテナ ボーダー 実装 テクニック

h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装？ と...記事の続きを読む 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users コリス section inline CSS div

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む

[CSS]要素を天地左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

2018/03/02 301 users コリス margin CSS center auto

子要素を親要素の左右中央に配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは上下、天地の中央です。 CSS Hackは使用せず、要素を天地左右の中央に配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。... 続きを読む

ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG

2015/06/14 286 users 株式会社LIG ブロック要素 ページ

お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプ... 続きを読む

HTML の q タグが日本語のサイトではカギ括弧を出すようになってた - 頭ん中

2014/12/01 372 users カギ括弧 HTML blockquote ぐあい 日本語

HTML に q という要素がありますね。 Quotation の Q ですか。 <q> について 文書内で引用をしたいとき、 ブロック要素を含むような場合には <blockquote> ですが 一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。 q 自体がデフォルトでインライン要素だしね。 こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q>... 続きを読む

[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方 - WEBCRE8.jp

2013/02/25 116 users HTML ブロック要素 WEBCRE8.jp インライン要素

http://www.hamashun.com/ で、お会いしたときにここぞとばかりに私が気にしているコーディングのしかたなどを聞いてもらったりしたのですが、いくつか気になるコメントをもらえたのでじっくり考えてみました。 今まで考えていた根拠の薄いコーディングルール 私は普段からかなり文書構造に気をつけてコーディングを行っていますが、仕様の中で理解できない部分についてはわりと独自の解釈も用いていま... 続きを読む

ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」:phpspot開発日誌

2012/10/02 243 users jQueryプラグイン phpspot開発日誌 カラム 瞬時

equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイ... 続きを読む

スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌

2012/02/12 128 users jQueryプラグイン phpspot開発日誌 カーテン

スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 2012年02月13日- Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下の... 続きを読む

HTML5のカテゴリーの種類についてまとめました【MdN連載第6回目】 | HTML5でサイトをつくろう

2012/01/24 306 users MdN Design Interactive ルール タグ

HTML4では、要素ごとにブロック要素、インライン要素というわけ方があり、インライン要素の中にブロック要素が使えなかったりなどタグの使い方にルールがありましたが、HTML5ではブロック要素、インライン要素というわけ方はしなくなり、要素ごとに目的に応じたカテゴリーという形で分けられています。今回はそのカテゴリーについてまとめてみたいと思います。 MdN Design Interactiveの第6回目... 続きを読む

ホバー時に素敵なエフェクトでパネルを変更するスタイルシート

2011/06/19 146 users エフェクト ホバー時 パネル アニメーション スタイルシート

デモではパネルにマウスホバーすると、背景を変更しアニメーションのエフェクトを適用します。 実装方法 HTML HTMLはシンプルです。 ポイントとなるのは、h3やpなどのブロック要素をa要素で内包している点です。これはHTML5を使用する限りvalidです。 続きを読む

犯してはいけないHTMLタグの過ち10個｜Webpark

2011/04/18 1128 users Webpark ブロック要素 インライン要素 意味 再確認

ちょっと前の記事ですが10 HTML Tag Crimes You Really Shouldn’t Commitという記事を見かけておもしろそうだったので紹介します。日本語にすると、犯してはいけないHTMLタグの過ち10個というところでしょうか。 知っている内容も多いかと思いますが、再確認の意味を込めて見ていただければと思います。 1. インライン要素の中にブロック要素を入れない 続きを読む

横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」:phpspot開発日誌

2010/12/14 122 users jQueryプラグイン phpspot開発日誌 レイアウト

横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返... 続きを読む

HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。

2008/07/18 277 users バシャログ position float HTML 段組み

「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっ... 続きを読む

デザインスクロールをブロック要素に適用するJavaScript （jsScrolling） - youmos

2007/07/12 109 users youmos スクロールバー ブロック要素 サンプル ブラウザ

ブロック要素など、コンテンツ上で長い文章やソースコードなど表示したい場合便利なのが、jsScrolling。ブラウザのスクロールデザインとは異なるオリジナルのスクロールバーを表示させることが出来る。 サイトのデザインに統一感を出したい場合に、コンテンツに配置したイメージをスクロールバーとして利用することも出来る。機能ごとにJavaScriptファイルが分かれているがサンプルを参考に作成すれば比較的... 続きを読む

CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌

2006/10/01 269 users CSS ライブラリ phpspot開発日誌 ブロック要素

Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSとJavaScriptでブロック要素の角を自在に操... 続きを読む

Lucky bag::blog: line-height の値には単位なしが良いとされる理由

2006/04/10 492 users line-height length Lucky Bag

この記事が属するカテゴリー CSS CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位... 続きを読む