Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります

2024/03/07 14 users div Chr Flex 垂直方向 中央

間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chr... 続きを読む

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 下記は各ポイントを意訳したものです。... 続きを読む

CSS の flexbox をゲーム感覚で身につけられる Flexbox Froggy がおもしろい - 頭ん中

2015/12/10 17 users Flexbox Flexible Box CSS ライブラリ

CSS の flexbox (略さずに言うと flexible box) を使うと、ページ上の要素を任意の方向や順番で配置したり、柔軟なサイズを持たせて表示領域を最適に埋めたりできますね。 flexbox を身につける 以前は横に並んだブロック要素の高さを揃えたり、幅が固定されていない要素を等間隔に中央揃えで並べたりするのに JavaScript のライブラリや CSS のちょっとひねった書き方を... 続きを読む

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

2015/06/14 286 users 株式会社LIG ページ

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

ブロック要素の下部をスクロールに応じ曲げてカッコよくするサンプル「Curved Cut」:phpspot開発日誌

2015/01/23 40 users スクロール カープ phpspot開発日誌 下部 サンプル

Curved Cut ブロック要素の下部をスクロールに応じ曲げてカッコよくするサンプル「Curved Cut」。 スクロールするとカーブがが... 続きを読む

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

はてな記法モードで改行の自動挿入を見直し、付加すべきない箇所ではbr要素を挿入しないようにしました - はてなブログ開発ブログ

2013/09/25 24 users 改行 挙動 scriptタグ tableタグ styleタグ

2013-09-25 はてな記法モードで改行の自動挿入を見直し、付加すべきない箇所ではbr要素を挿入しないようにしました 機能変更 本日、はてなブログで「はてな記法」モードを利用している場合、改行（br要素）を自動挿入する挙動を変更し、tableタグやscriptタグ、styleタグなどHTMLのブロック要素を直接記述している場合に、本来ならbr要素を付加すべきではない箇所では、br要素を挿入しな... 続きを読む

ブロック要素の高さを行毎にあわせる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(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイ... 続きを読む

MacOS X Lion風のスクロールをブロック要素に付けられる「Antiscroll」:phpspot開発日誌

2012/09/06 36 users マウスホイール スクロールバー フェードイン トラックパッド

Antiscroll - os x lion style cross-browser native scrolling on the web that gets out of the way MacOS X Lion風のスクロールをブロック要素に付けられる「Antiscroll」 カーソルを合わせるとクールなスクロールバーがフェードインで現れ、マウスホイールやトラックパッドで動くスクロールを実装可... 続きを読む

立体的にブロック要素を別画面に切り替える超カッコいいデモ:phpspot開発日誌

2012/08/28 11 users phpspot開発日誌 別画面 Codrops Safari

Unfolding 3D Thumbnails Concept | Codrops 立体的にブロック要素を別画面に切り替える超カッコいいデモ。 Safariのみ対応のようですが、超カッコよくて何度も切り替えてしまうこと必至のデモが公開されています。 WEB製作者なら一度は見ておきたいデモだと思います。 デモページ とりあえず殆どのブラウザで使えるようになるのは何年後かは分かりませんが、iOS用のサ... 続きを読む

CSS3でブロック要素を折り紙風にたたんだエフェクトを付けられる「oriDomi」:phpspot開発日誌

2012/08/23 45 users ブラウザベース iOS Paper エフェクト Safari

oriDomi - Fold up the DOM like paper. CSS3でブロック要素を折り紙風にたたんだエフェクトを付けられる「oriDomi」 Safariで見て頂きたいのですが、次のようにブロック要素を立体的に折り紙風にたたんだようなエフェクトをかけることができます。 iPadなどではお馴染みのあのUIをブラウザベースで実現するためのライブラリで、iOSでも使えます HTML5で... 続きを読む

美しいページめくり効果が作れるjQueryプラグイン「Flippy」:phpspot開発日誌

2012/08/14 42 users Flippy jQueryプラグイン 静止画 上下左右 印象

Flippy : flip effect jQuery Plugin | Guilhem Marty 美しいページめくり効果が作れるjQueryプラグイン「Flippy」。 ブロック要素を、上下左右になめらかに、めくるように切替えられます。 立体的になめらかに切替えられる効果は覚えておけばどこかで使えそうです ページめくり中。静止画だと印象が伝わらないのが辛い所なので、デモページを御覧ください オ... 続きを読む

アイテムをドラッグ＆ドロップで画面レイアウト出来る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);みたいに実行すると次のようにブロック要素に通知件数が追加されるというもの。 ちょっとめんどくさそうな処理もたった１行で実行できるのは有難い限りです。 既存の数値にプラスしたり、コールバッ... 続きを読む

ブロック内をiPhone画面内みたいにスクロールできるjQueryプラグイン「Red Plugin」:phpspot開発日誌

2011/09/02 31 users jQueryプラグイン phpspot開発日誌 ブロック内

ブロック内をiPhone画面内みたいにスクロールできるjQueryプラグイン「Red Plugin」 2011年09月02日- Red Plugin ブロック内をiPhone画面内みたいにスクロールできるjQueryプラグイン「Red Plugin」 ブロック要素にスクロール機能とスクロールバーをいれてiPhoneの画面内みたいにできます。 スクロールバーがあって現在位置が分かるため、使いやすいそ... 続きを読む

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

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

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

Yahoo!Incのお天気ウィジェット実装jQueryプラグイン:phpspot開発日誌

2011/08/26 16 users Inc インタフェース jQuery Plugins 温度

Like Yahoo Weather Feed with jQuery Plugin | jQuery Plugins Yahoo!Incのお天気ウィジェット実装jQueryプラグイン ブロック要素の中に世界各地の天気や温度をアニメーションで切り替えるウィジェット実装用jQueryプラグインです 動きやインタフェースが参考になるのと、旅行やインターナショナルなサイトなんかではすぐ導入して使ってみて... 続きを読む