Home 旅レポ一覧 MyPhoto 売れ筋インフォ  TechBlog  LinkBox  RSSr(New!)  SiteMap  Album  日記  blog  MyPage  About
 
icon icon
 

JFLABO::TechBlog(ジェイエフラボのテックブログ)->CSS,jQuery,RWD,レスポンシブルデザイン
ここではRWD(Responsive Web Design)
モダンでレスポンシブルなサイト構築の
入り口になりそうな情報やパラメータについて
さわりの部分を記述します。

CSSは主に表示系の装飾、文字サイズや要素のサイズなど
見た目を定義する際に使用する、決まりごとみたいなものです。

CSSテス ト サンプルページ CSS_migration

表現力は強化されますが、若干複雑になり、
微妙な調整が増え、見栄えの調整にかなりの時間を要します。
また、HTML5の最新仕様では非推奨となっているタグも存在します。
 
 贈り物に最適なデザイン商品
 画像アイコンをタッチ 又はクリックで
 商品の説明画面が表示されます。



 

   
 
 

  • このエントリーをはてなブックマークに追加
  • div li span textと CSS装飾
    対象:<B><center><s><font>を多用しているが、非推奨タグも出てきているので知識を入れ替えたい 目的:各ブラウザでどう見えるか手軽に確認したい CSS divパーツのテストをしたい
    メタデータ:RWD(Responsive Web Design) モダンでレスポンシブルなもの 関連技術:jQuery , jQuery ui , jQuery mobile , CSS , Twitter Bootstrap
     これは良く忘れてしまうことの個人的なメモです。時期により変化することがあるので  内容の正確さについては保証いたしかねます。聞き慣れないキーワードを検索すると、  ある程度解るようにしてあります。詳しくは書籍やより詳しい専門ページをご参照ください。 解ると楽しい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に詳しい人に聞いてみる