タグ max-width
人気順 10 users 50 users 100 users 500 users 1000 users<div style="max-width: 480px;">What Is ChatGPT Doing … and Why Does It Work?</div>
See also: “Wolfram|Alpha as the Way to Bring Computational Knowledge Superpowers to ChatGPT” » It’s Just Adding One Word at a Time That ChatGPT can automatically generate something that reads even superficially like human-written text is remarkable, and unexpected. But how does it do it? And why ... 続きを読む
58 bytes of css to look great nearly everywhere
58 bytes of CSS to look great nearly everywhere When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me: let's break this down: max-width: 38rem it appears that the defau... 続きを読む
CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス
Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか? そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な... 続きを読む
【CSS】max-widthやmin-widthの使い方を徹底解説!レスポンシブ対応もバッチリ | creive【クリーブ】
「widthの種類はあるけど、とりあえずwidthしか使っていない。」 「maxやminのwidthをいつ使えば良いのか、その状況が想定できない」 こんな思いを持っていませんか?「width」の設定だけで十分ではないか、と。事実、なぜ最大値や最小値の設定が必要なのかと思うでしょう。それを設定しなければならない理由がわからない... 続きを読む
俺の必殺技 ボイスバージョン喜び度100%マシマシ - ねうしとらうたつみうまひつじさるとり押井守い - Radiotalk(ラジオトーク)
俺の必殺技 ボイスバージョン喜び度100%マシマシ ねうしとらうたつみうまひつじさるとり押井守い <iframe width="460" height="185" src="https://radiotalk.jp/embed/82363" frameborder="0" scrolling="no" allowfullscreen style="max-width: 100%;"></iframe> 続きを読む
CSSスニペット:SVGで作る非長方形なヘッダ画像いろいろ | かちびと.net
Result インラインに書いたSVGを画像に重ねる 背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる css .card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wr... 続きを読む
max-widthを否定するクエリー - Weblog - Hail2u.net
モバイル・ファーストが浸透して久しくなり、めっきりmin-widthクエリー以外を見かけることはなくなった。そんな中、not (max-width: 768px)という書き方を見かけて、なるほどなと思った。現状のブラウザーにおける実装(と安定した仕様)では768pxを含まずそれより大きいという表現がmin-widthでは書くことができないが、notキーワードとmax-widthを組み合わせることで... 続きを読む
レスポンシブWebデザインに対応した横メニューの作り方|Webpark
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px... 続きを読む
Cocos2d-xで作る弾幕シューティング(ソースコードあり) by Utage Blog
<img src="http://utage.headwaters.co.jp/blog/wp-content/uploads/2013/11/shooting01.png" alt="shooting01" max-width="657 class="alignnone size-full wp-image-1404" /> こんにちは。野口です。 業務アプリプログラマーがCocos2d-xでゲ... 続きを読む
画像の最大幅を calc() で制御する – terkel.jp
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (... 続きを読む
[CSS]ウェブデザインの可能性を広げる10のスタイルシート | コリス
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウト... 続きを読む
[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック | コリス
Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video ifram... 続きを読む
CSS/HTMLのテクニックをクロスブラウザ対応(特にIE)にする方法のまとめ | コリス
#content { width: expression(document.body.clientWidth 1242? "1240px" : "auto"); min-width: 760px; max-width: 1240px; } RGBa (IE included) 不透明度を使ったカラーをIEでも利用できるようにします。 .element { background-color: tra... 続きを読む
固定幅ベースの elastic レイアウトサンプル
elastic レイアウトと言っても、固定幅ベースか可変幅ベース(とは言っても min、max-width による半固定だけど)のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する ela... 続きを読む