タグ display
新着順 10 users 50 users 100 users 500 users 1000 users一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ - jsdo.it - Share JavaScript, HTML5 and CSS
2011/07/21
2061 users
一夜漬け
Box
jsdo.it
なか
3カラム
jsdo.itに投稿されたCSS3のコードのなかから、実用的なものからネタ系のものまで厳選して集めました。 Tweet jsdo.itに投稿された800以上のコードのなかから、実用的なものからネタ系のものまで厳選して集めました。 これだけ見ておけばCSS3で何ができるのか、何を勉強したらいいのかがだいたいわかる！（はず） display:boxを使ったレイアウト CSS3の数行で作る簡単な3カラム... 続きを読む
レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
2012/11/01
877 users
Design Spice
レスポンシブWebデザイン
小技
レスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。 tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist... 続きを読む
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する | Webクリエイターボックス
2017/04/13
706 users
CSSグリッドレイアウト
Grid
レスポンシブ
タイル状
大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 1. どんなレイアウトに... 続きを読む
あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | デザイン | POSTD
2016/08/05
579 users
POSTD
プロパ
inline
Flex
Grid
CSSプロパティの1つであるdisplayはCSSレイアウトに用いるプロパティの中でも極めて重要なものです。block、inline、none、さらにtableやinline-blockは今ではかなり一般的になってきました。一方新たに登場したflexやgridはレイアウト用に作られたものです。これらについて紹介します。CSSプロパティの1つである display は、CSSレイアウトに用いるプロパ... 続きを読む
画像とかの横にあるテキストを上下中央に｜CSS HappyLife
2008/03/16
552 users
CSS HappyLife
上下中央
テキスト
ヨモツネット
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 ---- こっから続き デモページ 画像とかの横... 続きを読む
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
2015/02/04
523 users
アニメーション
CSS3
table-cell
保存版
横幅
この擬似クラスを使うことにより3番目のli要素にわざわざ別のクラスを付けなくても独自のスタイルを適応することができるので、運用性の向上が図れます。 ▼記事リンク Useful :nth-child Recipes | CSS-Tricks 要素を均等に横並び CSS3の「display:table-cell」は要素を均等に横並びにすることができます。「float」でも要素を横並びに出来ますが、横幅... 続きを読む
ブラウザの作り方 - Speaker Deck
2021/01/25
426 users
Speaker Deck
ブラウザ
inline
block
Transcript ブラウザの作り方 Keiya Sasaki 2021/01/25 ➔ Sasaki Keiya ➔ 大学4年生 ➔ 4月からIT企業で フロントエンドエンジニア ➔ TypeScript・Rust ➔ Twitter: _keiya01 ➔ Github: keiya01 話すこと 1. 実装状況 2. 実装方法 3. チュートリアル 4. まとめ 実装状況 実装状況 • display … block, inline • b... 続きを読む
ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
2009/09/09
417 users
inline-block
ishida
バシャログ
サンプル
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです... 続きを読む
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
2007/03/07
406 users
None
text-indent
CSS
画像置換
▽ 閲覧者様へご迷惑をおかけしております。 サーバーを管理している Just-size.networks です。 現在、都合により閲覧が制限されております。 大変申し訳ございませんが、しばらく経ってからまたお越し下さい。 ▽ 管理者様へ アカウントがロックされております。 お問い合わせ窓口よりご連絡下さい。 続きを読む
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
2013/04/08
358 users
バシャログ
CSS
上下中央
ishida
IE7以下
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: ... 続きを読む
[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック | コリス
2018/04/04
349 users
コリス
contents
cont
ラッパー
CSS
例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。 こういったレイアウトをセマンティックなHTMLで実装できるようになる「display: contents;」の基礎知識と使い方を紹介します。 How display: cont... 続きを読む
[css] floatを使わないで要素を横に並べる方法を使ったデザイン例 - NAVER まとめ
2014/10/25
335 users
float
CSS
inline-block
NAVER
要素
ul,olのリストを横並びにするとき、floatを使う人も多いと思いますが、僕はdisplay: inline-block;を使って横並びにする方法が好きで良く使ってます。この方法は手軽で便利ですが意図しない隙間が生まれるというデメリットがあるので、その解決法も一緒にご紹介します。 続きを読む
[CSS]検索フォームを素敵なデザインするスタイルシート集 | コリス
2009/03/04
331 users
コリス
background
images
CSS
URL
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 HTML CSS /* style1*/ #searchform1 {background:url(images/search1.gif) left top no-repeat; display: block;width: 240px; height: 32px;} #sear... 続きを読む
段ボール授乳室の件だけどさ、この記事読むといろいろ書いてあるよ。 https:/..
2023/09/28
310 users
段ボール授乳室
https
更衣室
職員
屋根
段ボール授乳室の件だけどさ、この記事読むといろいろ書いてあるよ。 https://newsdig.tbs.co.jp/articles/-/739110?display=1 「設置する場所がない」とか、「前は更衣室にあったけど利用者から使いたくないって声があって撤去した」とか、「屋根の設置や職員が周囲を警戒するなどの対策を追加予定」とか。 「日本道路... 続きを読む
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
2022/11/02
310 users
Flex
デベロッパーツール
Flexbox
プロパティ
下記
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携... 続きを読む
[CSS]印刷用のCSSのフレームワーク -Hartija | コリス
2008/04/14
292 users
None
コリス
print
Media
フレームワーク
Hartija - Css Print Framework Hartijaをページに実装するには、ダウンロードした「print.css」を下記のように「media="print"」を記述して配置します。 Hartijaの構成は、ベース、見出し、画像、リンク、テーブルの5つと、「display:none;」を使用して印刷時には非表示にするものから成っています。 フォントの指定は英語がベースになってい... 続きを読む
[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク | コリス
2010/11/14
271 users
コリス
margin
Row
カラム
フレームワーク
たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。 .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } HTMLもシンプルでdiv要素を使うだけです。... 続きを読む
Apple、10.2型Retina Displayに刷新した34,800円の「iPad」 - PC Watch
2019/09/10
264 users
iPad
Apple
PC Watch
[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ | コリス
2017/07/31
258 users
コリス
transform
Flex
ビューポート
CSS
div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transform, position, display:flex;などを使ったテクニックが紹介されて... 続きを読む
イシグロ氏の発言について、ある左翼かつリベラルから見た感想
2021/03/06
228 users
左翼
イシグロ氏
カズオ・イシグロ
発言
リベラル
この記事が注目を浴び、多くのブコメが集まっている。 "カズオ･イシグロ語る｢感情優先社会｣の危うさ" https://toyokeizai.net/articles/-/414929?display=b まず、私は自分が大別すれば「左翼」かつ「リベラル」の立場にあることを自覚している。左翼の定義やリベラルの定義の困難さ、特に現在の日本で「リベラル」が「... 続きを読む
CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス
2021/08/04
191 users
コリス
section
inline
CSS
div
sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む
[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ | コリス
2013/03/07
189 users
コリス
inline-block
CSS
ナビゲーション
欠点
リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: po... 続きを読む
俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag
2007/05/26
166 users
clearfix
visibility
Lucky Bag
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _he... 続きを読む
IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog
2011/02/17
153 users
Mach3.laBlog
メモ
opacity
height
透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。 この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。サンプルコード例えば、こんなコード。.test {display:block;width:128px;height:128px;backgrou... 続きを読む
CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
2023/06/06
121 users
block
displayプロパティ
inline
Flex
CSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。 そんなdisplayプロパティで2つのキーワードを...記事の続きを読む 続きを読む