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>... 続きを読む

ブロック要素の高さをレスポンシブに揃えられる「jquery-match-height」:phpspot開発日誌

2014/08/20 60 users レスポンシブ phpspot開発日誌

liabru/jquery-match-height GitHub ブロック要素の高さをレスポンシブに揃えられる「jquery-match-... 続きを読む

ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する | Mach3.laBlog

2013/03/04 87 users jQueryプラグイン Mach3.laBlog 行毎 既知

既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。 なにをしたいのか 例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。 こんな感じに。この処理をしてくれるライブラリを書いてみます。 書いてみた物 jQuery.lineUp 使い方 例えばこんな要素があるとして <div ... 続きを読む

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

2013/02/25 116 users HTML WEBCRE8.jp インライン要素 考え方

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

CSSレイアウトをWEB上でサクッと作れる「PageBlox」:phpspot開発日誌

2012/11/30 69 users PageBlox export phpspot開発日誌 効率

CSS Layout Generator | PageBlox - home CSSレイアウトをWEB上でサクッと作れる「PageBlox」。 次のような画面で、カラム幅をクリックで簡単に拡大縮小できたり、ブロック要素を消したり移動したり、追加したりといったことが自由にできます。 基本となるテンプレートを選んで修正すればより効率があがりそうです export で簡単にHTMLコードを生成できます。... 続きを読む

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

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

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

アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」:phpspot開発日誌

2012/08/07 77 users phpspot開発日誌 気持 gridster.js 位置

アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 2012年08月07日- gridster.js アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」。 ブロック要素を好きな位置にドラッグ＆ドロップで移動できるだけではなく、アニメーションしながら気持よく動かせます サイトのメニュー等に実装すると好きな... 続きを読む

スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れる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回目... 続きを読む

ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」:phpspot開発日誌

2011/10/18 59 users Element iOS風 phpspot開発日誌 既存 数値

Badger - Super sexy iOS style badges for jQuery ブロック要素にいとも簡単にiOS風の通知件数を表示できる「Badger」 $(element).badger(22);みたいに実行すると次のようにブロック要素に通知件数が追加されるというもの。 ちょっとめんどくさそうな処理もたった１行で実行できるのは有難い限りです。 既存の数値にプラスしたり、コールバッ... 続きを読む

教養としてのゲーム史 - 情報考学 Passion For The Future

2011/09/01 66 users 教養 ゲーム史 ギャラクシアン ギャラガ インベーダー

・教養としてのゲーム史 ゲームの「進化の系統樹」がよく整理されている。 たとえば最初に紹介されているのは、 ポン　→　ブレイクアウト　→　インベーダー　→　ギャラクシアン　→　ギャラガ という進化系。単純なテニスゲームのポンにブロック要素を加えるとブレイクアウトになり、ブロックが動くインベーダーに進化して、さらに自由度の高い動きをするギャラクシアンができて、合体などの要素が加わるとギャラガになる。... 続きを読む

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

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

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

コンテンツを流し読みしたいような場合に便利なUIを提供してくれる自動スクロール実装jQueryプラグイン「aautoscroll」:phpspot開発日誌

2011/05/20 55 users スクロール phpspot開発日誌 コンテンツ サイズ

コンテンツを流し読みしたいような場合に便利なUIを提供してくれる自動スクロール実装jQueryプラグイン「aautoscroll」 2011年05月20日- jquery.aautoscrol Demonstration コンテンツを流し読みしたいような場合に便利なUIを提供してくれる自動スクロール実装jQueryプラグイン「aautoscroll」. ブロック要素なんかをサイズ調整してスクロール... 続きを読む

Re:犯してはいけないHTMLタグの過ち10個[to-R]

2011/04/19 73 users to-R HTMLタグ XHTML 過ち10個 原文

Re:犯してはいけないHTMLタグの過ち10個 Check Tweet ネタ元：犯してはいけないHTMLタグの過ち10個 基本的には良い記事なんだけども、原文が2年近く前の物でXHTMLを前提に書かれているので少しだけ内容が古いかなと思ったりします。 1. インライン要素の中にブロック要素を入れない これは間違いです aタグのようなインライン要素の... 続きを読む

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

2011/04/18 1128 users Webpark インライン要素 意味 再確認 日本語

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

要素をドラッグ＆ドロップで自由にリサイズできる「jQuery Splitter」:phpspot開発日誌

2011/04/01 59 users phpspot開発日誌 split ペイン リサイズ 要素

jQuery Splitter | jQuery Plugins 要素をドラッグ＆ドロップで自由にリサイズできる「jQuery Splitter」。 通常、ブロック要素というと固定が当たり前ですが、jQuery SPlitterを使えば、Windowsアプリケーションのようにペインをリサイズ可能です。 使い方も色々とありそうです。 マウスで簡単リサイズ   JSのコードは次のように split メ... 続きを読む

HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」:phpspot開発日誌

2011/03/10 88 users フレームワーク phpspot開発日誌 ビデオ ビデオ映像

HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」2011年03月10日-Popcorn.js | The HTML5 Video Framework HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容... 続きを読む

横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させない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ファイルが分かれているがサンプルを参考に作成すれば比較的... 続きを読む

リサイズ可能なブロック要素をページに作る為のJavaScriptコンポーネント:phpspot開発日誌

2006/11/27 91 users リサイズ phpspot開発日誌 ページ

Jack Slocum's Blog Resizable Reloaded - A reusable component for resizing elements This is a basic as you get. To resize the box, position your mouse anywhere near the bottom, right or bottom right ed... 続きを読む