タグ「width」 - はてブログ

タグ width

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 246件)

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス

2017/06/14 917 users minmax コリス Calc CSS 関数

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。下記のレスポンシブ対応のグリッド... 続きを読む

スマートフォン対応でよく使うhtml、css、javascriptのまとめ | 69log

2013/02/15 897 users CSS HTML JavaScript viewport

スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 ■headタグ内での設定  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!... 続きを読む

もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

2015/06/10 816 users viewport Qiita content 呪文解像度

正義の味方と悪の組織の違い。これは面白い。 on Twitpic

2012/02/06 695 users 正義味方 on Twitpic 組織 thumb

Embed this Photo Copy & paste this code into your website <a href="http://twitpic.com/8gfr6y" title="正義の味方と悪の組織の違い。これは面白い。 on Twitpic"><img src="http://twitpic.com/show/thumb/8gfr6y.jpg" width="150" h... 続きを読む

CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ | コリス

2011/07/24 679 users コリス Tra クロスブラウザ対応 expression 方法

#content { width: expression(document.body.clientWidth 1242? "1240px" : "auto"); min-width: 760px; max-width: 1240px; } RGBa (IE included) 不透明度を使ったカラーをIEでも利用できるようにします。 .element { background-color: tra... 続きを読む

width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com

2012/12/05 660 users Ginpen.com position 横幅 CSS オレオレ

CSS おれおれ Advent Calendar 2012 – 05日目横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。はみ出した例 position:absoluteないしposition:... 続きを読む

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

2020/07/02 650 users height Rriver link jpg img要素

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般... 続きを読む

雑誌「小学一年生」の広告が秀逸すぎる on Twitpic

2012/07/14 647 users on Twitpic 雑誌小学一年生広告 thumb

Embed this Photo Copy & paste this code into your website <a href="http://twitpic.com/a79zoz" title="雑誌「小学一年生」の広告が秀逸すぎる on Twitpic"><img src="http://twitpic.com/show/thumb/a79zoz.jpg" width="150" heig... 続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary

2015/11/04 639 users padding border phiary height 原因

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-s... 続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life

2012/09/25 638 users padding border box-sizing CSS3

『出会いがない』とは言わせない！8つのモテる方法で人生が変わる | ENJILOG

2013/06/12 621 users ENJILOG caption alignnone 恋愛人生

[caption id="attachment_3392" align="alignnone" width="546"] photo credit: ashley rose, via photopin cc[/caption] 恋愛対象なんて１人いればいいのですが、その「１人」に出会うのって結構大変。また、「出会い」というのは何も恋愛に限ったことではないですよね。様々な人との出会いこそ人生の... 続きを読む

画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌

2009/03/18 595 users ハイクオリティ CSS phpspot開発日誌 Tip img

Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。具体的には以下のCSS指定によってそれが可能... 続きを読む

渋谷ハロウィンを5年見た感想

2018/11/01 582 users 渋谷ハロウィン感想 archive.today src

<a href="http://archive.today/XXv0v"> <img style="width:300px;height:200px;background-color:white" src="https://archive.fo/XXv0v/a57038bd6da710cad765280a7b542c64ccf0bce6/scr.png"><br> 渋谷ハロウィンを5年見た感想<br> アーカイブされた 2018年11月1日 10:31:24 UTC </a> {{cite web | title = 渋谷ハロウ... 続きを読む

CSRFで強制ログインさせるというアイデア - ぼくはまちちゃん！(Hatena)

2012/05/22 544 users CSRF height 足跡 CSRF脆弱性 IMG SRC

こんにちはこんにちは！！今日はCSRF脆弱性のちょっとした話です！このCSRFってなにかっていうと、サーバーへのリクエストを『誰かに勝手に送らせる』っていうやつ。わかりやすいな例だと、 HTMLの画像タグを以下のようにしたページを誰かに教える。 img src="何々SNSのの足跡.php" width="1" height="1"> そうすると、そのページを「見た人」が何々SNSのの足跡... 続きを読む

ちょっと使えるかもしれないCSS(1) - 見出しを飾る | オトコのキモチ２

2006/09/23 496 users きもち CSS オトコ見出し padding

ちょっと使えるかもしれないCSS(1) - 見出しを飾る Design ちょっとHTML(2) - h4，h5 で紹介した見出しをCSSで装飾する例をいくつか。見出し h4 はてなでよく見かけるタイプ。 h4 { width:12em; border:solid #CCCCCC; border-width:0 0 1px 12px; padding:0.4em 0.4em; } 見出し h4 付... 続きを読む

<img src="http://i.yimg.jp/images/ybm/icons/sbm_nw.gif" alt="別ウィンドウで表示" border="0" height="11" width="11">

2007/12/23 451 users icons border Alt height yimg.jp

作って理解するAjax (1)：IT Pro

2005/11/06 406 users Ajax border Ajaxアプリケーションまわり漢字

Ajaxアプリケーションの例。Webブラウザさえあれば，MS IMEのように，かな漢字変換できます。" width="200" border="0"> 図1 Ajaxを使ったFull IME Ajaxアプリケーションの例。Webブラウザさえあれば，MS IMEのように，かな漢字変換できます。 [画像のクリックで拡大表示] 最近，Webエンジニアのまわりで注目されている技術に「Ajax」(エイジャッ... 続きを読む

フッタをブラウザ下部に固定配置するCSSテクニック | CREAMU

2010/02/07 402 users ブッダ CREAMU min-height 前者バック

フッタをブラウザ下部に固定配置したい。そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 ... 続きを読む

円山動物園ヘビ飼育員の回答がアツすぎる on Twitpic

2012/12/24 395 users on Twitpic 回答 thumb hEi show

Embed this Photo Copy & paste this code into your website <a href="http://twitpic.com/boqdu7" title="円山動物園ヘビ飼育員の回答がアツすぎる on Twitpic"><img src="http://twitpic.com/show/thumb/boqdu7.jpg" width="150" hei... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users rem height font-size マージンピクセル

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

レスポンシブWebデザインに対応した横メニューの作り方｜Webpark

2014/03/18 379 users Webpark toggle MENU max-width

レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px... 続きを読む

スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法 | Border/memo

2014/10/16 368 users border memo viewport content 実在

※ この話はフィクションです。実在の人物や団体などとは関係ありませんスマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自... 続きを読む

今日、電車の中で見た。 on Twitpic

2012/09/24 365 users on Twitpic 電車 thumb height show

Embed this Photo Copy & paste this code into your website <a href="http://twitpic.com/axni6k" title="今日、電車の中で見た。 on Twitpic"><img src="http://twitpic.com/show/thumb/axni6k.jpg" width="150" height="150... 続きを読む

うちの母はこれが全て同じキャラに見えるらしい... on Twitpic

2013/07/18 345 users on Twitpic うち show title a href

Embed this Photo Copy & paste this code into your website <a href="http://twitpic.com/d39abv" title="うちの母はこれが全て同じキャラに見えるらしい... on Twitpic"><img src="http://twitpic.com/show/thumb/d39abv.jpg" width="15... 続きを読む

理系男子よ、これが文学部女子にとっての理想だ。... on Twitpic

2012/11/18 343 users 理系男子 on Twitpic 理想 thumb show

Embed this Photo Copy & paste this code into your website <a href="http://twitpic.com/beasla" title="理系男子よ、これが文学部女子にとっての理想だ。... on Twitpic"><img src="http://twitpic.com/show/thumb/beasla.png" width="1... 続きを読む