カテゴリー別アーカイブ: CSS+html

ipadでbackground-attachment: fixedが効かない

iOSで background-attachment: fixed と size cover でうまく動作しないようです。
参考サイト様
http://webdesign.practice.jp/background-fixed-ios

http://qiita.com/volkuwabara/items/bedaf09244f5cdebb228

metaタグ

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
IEに互換表示させない
<meta http-equiv=”cleartype” content=”on”>
視覚テーマの有効/無効
<meta name=”HandheldFriendly” content=”True”>
<meta name=”MobileOptimized” content=”320″>
Mobile viewport optimization
今はviewportメタタグが非常に一般的
-webkit-text-size-adjust: 100%;
サイズ調整を制御するプロパティ
スマートフォンで閲覧したときに、フォントサイズが拡大されないようにする

floatした画像の下にtextを回り込ませない

画像側もしくはテキストに、paddingを指定していましたが、なんと
overflow:hidden;
でできるのでした。
テキスト側に、overflow:hidden を指定
参考:
http://weble.org/2011/09/29/css-do-not-wrap-the-bottom

html5 videoタグ MINEタイプ 動画形式 で つまずいたこと

「webcreater」の方法で、
swfobject.jsを用いて
PCはflv
スマートフォンはmp4
で表示しようとするも、
サンプルコードでは上手く行くのに、自分のFLVでは上手く表示されない。
スキンが表示されないのである。
サンプルコードと同じ階層に設置するもできず。。。よくわかりません。
しかたなくflvとかandroidとかスキンとかflashvarsとかなんかいいろいろあきらめ、
本家サイト通りにswfを読み込むすることに。
とりあえず、表示される
次は、if IEで、IEだけswfobjectでswfを読み込み、
その他のブラウザとスマートフォンはvideoタグで読み込むようにした。
mp4・・・ひとえに「mp4」と言ってもなんかいろいろあるらしく、ipodとかで再生するには、プロファイルを「メイン」ではなく「ベースライン」にしなければならない
webm・・opera?chrome?firefox?
ogg・・firefox
webmとoggは、「Miro Video Converter」でmp4から変換
さて、oggファイルを作成したものの、firefoxでは表示されない。
「この動画のファイル形式またはmimeタイプはサポートされていません」と表示されてしまう。
MINEタイプ・・・サーバによって取扱できるファイルが違うとのこと。
.htaccessで、mineタイプをaddすればいいようですが、windowsサーバのため、htaccessは利用できず。
よくよくみたら、コントロールパネルのウェブサイト設定で可能でした
http://support.gmocloud.com/shared/guide/infinito_plus/controlpanel/web/config.html

子セレクタ .comments-link > span

直接の親子関係にある要素にスタイルを適用する

<div class=”comments-link”>
 <span>  </span>
</div>

セレクタまとめ参考 http://www.coolwebwindow.com/csstips/cssbasic/000243.php

隣接セレクタ div.entry-meta + div.entry-meta

twentyelevenのスタイルシートで、「+」でくっつけられたclassをよくみかけます。
これは隣接セレクタと言われるもののようで、
A要素とB要素が直接隣接している場合、(A要素の直後にB要素)が出てくる場合に適用されます。
タイトルのように、
div.entry-meta + div.entry-meta
は、
<div class=”entry-meta”>  
</div>
<div class=”entry-meta”>  
</div>
な感じかな
間に他の要素がある場合は、適用されない

CSS3の擬似要素「::before」「::after」

:beforeと::beforeってどんな違いが、、、?
こちらに詳しく書かれていました。ありがとうございます。
http://blog.3streamer.net/html5-css3/pseudo-elements-and-pesudo-classes-530/
CSS1・2とCSS3の記述方法の違いのようです。
ただIE8ではこのダブルコロンの書き方は対応してないので、通常通り1つでいいのではないかと。
wordpressのtwentyelevenは、革新的なスタイルシートなので、わからないことがいろいろあって、眺めてると勉強になりますね。。。

HPBで文字化けする

Dreamweaver/utf-8で制作したhtmlをホームページビルダーで開くと文字化けします
とのこと
調べると、旧バージョンのホームページビルダーはutf-8に対応していないとか。
バージョンアップすると解決。
その他、スタイルシートに完全に対応していないのでプレビューで確認するとレイアウトが崩れて見える

今さらのhtmlタグ

今さらながら、初めて知ったhtmlタグたち、、、いろいろあるのですね。まだまだ初心者。
ABBR:abbreviation、略語のこと。
DFN:definition、専門用語の定義
KBD:keyboard、キーボードで入力される文字列
INS:insert、追加された文字列、datetime属性で日時指定できる
MARK:関連している文字列にマーカーをつける(ハイライト表示)。emやstrongとは用途が異なる
SAMP:プログラムやスクリプトによる出力結果のサンプルを表す
SUB3:<sub>はsubscriptの略で下付き文字
SUP2:<sup>はsuperscriptの略で上付き文字