参考サイト design.webclips.jp基本的にiframeを縦横比をアスペクト比に合わせたボックスで囲う、という形。 CSSでiframeのwidthとheightをボックスに合わせて100%にするので、問題ない。 <style> .video_wrap { width: 100%; height: 56.25vw; position: relative;</style>…

<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/xxxx/css/sp_rakuten.css" type="text/css" =""> <iframe src="https://www.rakuten.ne.jp/gold/xxxx/sp_header.html" class="sp_nav_menu" =""></iframe ="">意図的にタグの記述方法を間違えることで、楽天のチェックをスルーするらしい。 GOLDへのスタイルシートやインラインフレームをこれで呼び出す。</iframe></link>

参考：https://liginc.co.jp/330259 サイトがなくなると困るので、こちらにもメモ。（１）テーブル→リスト HTML <table> <thead> <tr> <th>Big heading</th> <th>Big heading</th> <th>Big heading</th> <th>Big heading</th> </tr> </thead> <tbody> <tr> <th>Title</th> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <th>Title</th> <td>C…</td></tr></tbody></table>

メディアクエリ @media print { }ちなみに、印刷用ページ（A4）は大体700pxらしい。 なので、レイアウトデザインにもよるが、 @media print { body{ zoom: 72%; } }こうすることで、なんとなく印刷時にデザインが収まるようになる。かも。

ワンポイントで見出しをフェードインさせたいときなんかに。 作ればいいのでしょうが、まぁワンポイント程度だと作り込むのは面倒くさい。 参考：http://qiita.com/stkdev/items/62c9f55500eff729fe4a CSSをダウンロードして、クラスを指定する。 ディレーシ…

忘れないように考え方メモ 入れ子にすることで、背景途中からストライプにするのはたぶん無理 ボックスの途中からストライプにする場合、単色＋ストライプなら可能 「全面ストライプ」の上に「単色＋透過100％のグラデ」の背景を重ねる感じ background-posit…

IE10および11において、どうしてそうなってるのかさっぱりわからないままですが、ひとつの要素に対してbackground:linear-gradientとborder-radiusの両方を適用すると、なぜかグラデーションが吹っ飛ぶ事象が。 ちなみに、ひとつずつ適用させるとちゃんと表…

参考：http://mae.chab.in/archives/2527 youtubeでなくてもいいけど、基本iframeタグは幅と高さを指定する。 <iframe width="500" height="300" ...></iframeただしこのままだと、500px×300pxがスマホでも確保されるため、横スクロールが発生することになる。 その対応。 HTML <div class="wrap_y</iframe>…

参考サイト：http://edge.sincar.jp/web/css%EF%BC%9A%E3%82%AA%E3%83%B3%E3%83%9E%E3%82%A6%E3%82%B9%EF%BC%88hover%EF%BC%89%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89/ a img { -webkit-transition: 0.2s ease-in-out; -…

参考：http://css-eblog.com/csstechnique/overflow-menu.html通常だと、コンテンツ幅800の場合なんかは <div id="wrap"> <div id="header"></div> <div id="content"></div> </div> #wrap { width: 800px; margin: 0px auto; }とする。だいたいはそうする。 ただ、デザイン的に、ヘッダーの一部だけはブラウザ幅いっぱいの表示し…

参照：http://d.hatena.ne.jp/takeru-c/20100121/1264037367リストを横並びにした際は、たいていfloat:leftで処理するが、その場合当たり前に左寄せになる。 右寄せにするにはfloat:rightで、と思ってやってみても、その場合は <li>リスト１</li> <li>リスト２</li>と記述する…

ＣＳＳでヘッダー部分をposition:fixedで固定すると、ページ内リンクがずれる。 正確に言うなら、ページ内リンクでページ上部に現れるはずのぶぶんが、ヘッダーの下に潜り込む。 ヘッダー固定だけならば、その下にコンテンツにヘッダー高さ分のmargin-topを…

トピックスなどに使う。 基本形 dl.news dt { clear: left; float: left; width: 7em; } dl.news dd { margin-left: 7em; } 注意点としては ・dtの方が高さが高くなるとレイアウト崩れが起きる （ddが2行にわたる場合は問題ない） ・なので、行間をあける場…

素材は基本FWで渡されるのですが、フォントサイズの指定が『FWのポイント』なんでこっちは正直面倒です。 なのでメモ。 ＊ 基本 12pt ... 80% 応用 80%縮小時 10pt ... 80% 14pt ... 110% 15pt ... 130%

参考：http://scuderia-web.com/tips/xhtml_css/equal_box_heights.phpfloatしたコンテンツに対してメニューの高さをそろえるなどの場合。 <div id="wrap" class="cl"> <div id="main"><p>コンテンツテキスト</p></div> <div id="menu">メニュー</div> </div>というソースで html, body { margin: 0px; padding: 0px; height: 100%; } #wrap { o…

つい最近、縦にぺたぺたと並べて貼っていった複数画像の間に、微妙な空白でできたことがあった。 imgタグのmarginやpaddingをゼロにしても空白はある。 imgタグをソースの左端から書いて、インデントをなくしても空白はある。 vspaceもたぶん設定していない…

ボックスをおいていくと、マージンが相殺されて意図したとおりに表示されない場合がある。 相殺される原因というか要因は ・どちらもfloatが指定されていない ・どちらもpositionがabsoluteではない 上記2点の要因をふたつとも満たした場合のみ、相殺される…

JavaScriptで印刷する場合、

IEとFirefoxなどで見比べた場合、CSSで背景画像をセンタリングしたときに１pxずれることがある。 その場合、 body, { padding-left:1px;}と記述することで、そのズレを調整することができる。 が。 ブラウザの進化により、やや複雑になってきたので再記述。 …

FirefoxなどＣＳＳ２準拠のものは 中身 ＋ padding ＋ border ＩＥは 中身 ＋ padding で、ＩＥはボーダーの分だけ狭められてしまう。こっちがバグ。ということで、ＣＳＳでどちらの測り方をするか指定することができる。 div { width: 200px; box-sizing: b…

IE6以前で透過PNGを表示する方法。 ・http://www.twinhelix.com/css/iepngfix/からダウンロード ・透過したいスタイルにビヘイビアの記述をする。 <style type="text/css"> img, div { behavior:url(iepngfix.htc) } </style>この場合、imgタグとdivタグのpngファイルを透過するようになる。…

２カラムのレイアウトなどの場合、大体センターに置くことが多い。 で、背景表示のために外枠にoverflow: hiddenを入れると、マージンをautoでとって真ん中に置いたハズのコンテンツがまるっと左寄せになってしまう。 いささか強引だが、その解決のためのハ…

ＣＳＳのハックの種類。 てんこもりで面倒だ。参考サイトはこちら ＩＥ７ハック ＩＥ７のみ通す。適用したいセレクタの前に「*:first-child+html」をつける。 *:first-child+html #content { font-size: 80%; } スターハック IE（Win,Mac両方）に通す。適用…

floatを使って２カラムのページ（左：block-1、右：block-2）を作った場合、block-1・block-2を含むブロックの背景（block-0）などなどが、FireFoxなどで表示されません。 float＝浮き上がっている、ということで、高さがない扱いになってしまう…らしい。 ん…

親要素から子要素をはみ出させる場合、子要素のz-indexを大きめに設定、positionをabsoluteで設定する。 ただしこの場合、relativeと違い、上下左右の位置が画面端基点になりやすいので注意。