entrance モダンブラウザ用

JFLABO::CSS_migration::Note


w300px +img CSS element

w300px +img CSS element



  • CSSパーツを気合いを入れて作り込みたい
  • 状態:スクラッチ中

  • JFLABO 2013/02/26
  •  1.ぶれないように参考イメージ資料(PSD,png,ai,JPG,etc)を用意する
     2.styleで試す コードを見る プレビュー 微調整 プレビュー
     3.不要な記述を削除、整形してcssファイルに分割する



  • 
    
  • div li span textと CSS装飾

  • 対象:<B><center><s><font>を多用しているが、非推奨タグも出てきているので知識を入れ替えたい 目的:各ブラウザでどう見えるか手軽に確認したい CSS divパーツのテストをしたい
    メタデータ:RWD(Responsive Web Design) モダンでレスポンシブルなもの 関連技術:jQuery , jQuery ui , jQuery mobile , CSS
     これは良く忘れてしまうことの個人的なメモです。時期により変化することがあるので  内容の正確さについては保証いたしかねます。聞き慣れないキーワードを検索すると、  ある程度解るようにしてあります。詳しくは書籍やより詳しい専門ページをご参照ください。 解ると楽しいCSS
    ブラウザで要素を見てみる  モダンブラウザの場合、見たい要素の上で右クリック  次に[要素の検証]又は[要素の詳細を表示]、これと似た表記の物を選択  すると、どうなっているか確認出来ます。 font-size:12px;  フォントサイズを変更する font-weight:bold;  太字にする <B>で囲む、からフォントウエイトをボールドにするにアップグレード text-decoration:line-through;  取り消し線を入れる <S>で囲む、からテキストデコレーションをラインスルーにするにアップグレード 余白を調整する padding:3px 0px 5px 0px;  //[1上][2右][3下][4左]のパディング margin:3px 0px 5px 0px;  //[1上][2右][3下][4左]のマージン  //px など単位や ;の付け忘れに留意する 印刷用CSSもあります。  //marginが効かない 仕様により親要素への影響やそもそも効かない場合もあります。  //ブロックレベル要素とインライン要素の区別とボックスを意識すると少しだけ無駄な作業が減ります。  //何度か覚えたんですけど 検索するのも大変だしすぐに忘れちゃいますので、、  //引き出しやすいところにメモメモ...  //補足:UTF8はアルファベット部分は1byteで漢字等は文字によって1〜6バイトの可変長と、  //全部同じサイズというわけではないそうです。データサイズが小さく出来る等のメリットが  //ありますが、古いCライブラリであるとかアルファベット圏のパッケージの場合は  //文字数カウントした場合に文字コードによっては動作しなかったり、意図しない数値が  //帰ってきたりすることが稀に発生します。 ヒントになりそうなキーワード list-style-type:none;  liタグのリストマーカーを非表示にする width:200px;  幅を指定する   インライン要素には効かない が 親要素に影響する height:200px;  高さを指定する   インライン要素には効かない が 親要素に影響する -moz-box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000;  影を付ける 各ブラウザ用の物がある 熟成中  firefox chrome safari Opera IE ブラウザが対応していない場合は処理されない -webkit-border-radius:5px; -moz-border-radius:5px;  角を丸くする 各ブラウザ用の物がある 熟成中 background: -moz-linear-gradient(top, #666, #999); background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#999));  グラデーションを付ける 各ブラウザ用の物がある 熟成中 background-color:white;  背景色を指定する background-image:URL;  背景画像を指定する display:block;  インライン要素のブロック化 line-height:8px;  行間値を設定する clear:left;  回り込みを解除 clear:both;  フロート解除 vertical-align:top;  縦の配置の仕方を指定 text-align:center;  インライン要素の中央寄せ テキストアラインを中央にしたい  テキストのアライメントをセンターに調整する margin:0 auto;  ブロックレベル要素の中央寄せ display:inline-block;  インライン要素にする はみ出し対策 overflow:auto;  行の折り返し white-space: normal;  幅を指定しておくと自動的改行 word-break:break-all;  はみ出したら折り返す word-wrap: break-word;  省略せずに折り返す white-space:nowrap;  改行せずに省略して表示する page-break-after:always;  印刷時に改ページさせる divでくるんで背景色をつけて配置すると少し理解しやすくなります。 DivでくるんでCSSで装飾し、まるごと動かしてみる。webkit系の場合はエレメントの モーション描画にCPUではなくGPUで処理をしているらしい 表示が崩れる、動作しないという方へ  同じハードウエアでもソフトウエアを最新のものにすると動作する場合があります サンプル: spinoff/elemloc/jp/index.html(モダンブラウザ用) 世の中いろいろな人がいて反応もまちまちです。 ・時間をかけて身につける ・ツールを使ってやってみる ・互換性確保にかなりの時間がかかるし、他にも重要なことがあるので  最近ノウハウを溜め込んだ人、専門的な教育を受けた人、時間をかけて  取り組みたい人に頼んでみる ここには時間を費やせない ・どのブラウザでもだいたい同じように見えるようにレイアウトするのは  大変だし分業する ・出来そうかもしれないけど、使用頻度が少ないし、ちょっと大変なので  専門家に頼んでみる ・依頼を出して平行して学ぶ やらなきゃまずいと思ってた ・CSSに詳しい人に聞いてみる
    ページ上部へスクロール

    designed by JFLABO:2013