スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

floatで横並びさせたリストとリスト内の画像をセンタリングする方法


floatで横並びさせたリストをセンタリングして、
さらにリスト内の画像をセンタリングする方法を紹介します。

1、floatで横並びさせたリストをセンタリング
リストを囲む<div>タグなどのid属性をlistとして下記のCSSをあてます。
 #list {
  position:relative;
  overflow:hidden;
}
#list ul {
  position:relative;
  left:50%;
  float:left;
}
#list li {
  position:relative;
  left:-50%;
  float:left;
}

2、画像のセンタリング
<div>タグの背景に画像を設定して、それをセンタリングします。
背景画像を設定した<div>タグに下記のCSSをあてます。
 .centerimg {
  width: 150px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
}


以上です。
画像のセンタリングは、<div>タグを使ってセンタリングしました(^_^;)
<img>タグでセンタリングするいい方法はないかな?
勉強しないと!



  
スポンサーサイト

テーマ : WEBデザイン
ジャンル : コンピュータ

tag : HTML センタリング 画像 リスト

コメントいっぱい増えるかな?

facebookのCommentsプラグインを導入してみた。
これでコメント増えるといいな~

設置方法は
http://developers.facebook.com/docs/reference/plugins/comments/にアクセス
・各項目を入力してGet Codeを押すとコードが生成される
comments


1には貼り付けたいページのアドレスを入力
2は表示するコメントの数
3は幅
4は色が選択できる
Get Codeを押せばコードが表示される!!




・あとは、生成されたコードを貼りたい場所にコピペしたら完成!!

コメントするたび、ともだちふえるね!



  

テーマ : WEBデザイン
ジャンル : コンピュータ

HTML5の行方

今、アメリカではHTML5の技術者がひっぱりだこらしい。

HTML5の技術者といっても、
CSS3、JavaScript API、SVGなどの様々な次世代Web技術の技術者なので
HTML5そのものだけを理解しているからといってどうにかなるわけではないのでご注意を。
それで、どうにかなるなら苦労はしないですけどね(^^;;
Webアプリケーションの可能性を大きく拡げるHTML5をどう生かすのかが重要なんです。

ただ、今のうちにHTML5の知識を身につけれておくのもいいのではないでしょうか?
HTML5を簡単に理解したい方はHTML5.JPHTML5リファレンスを参考にしてみてください。
そして上記を理解したらHTML5"とか"アプリ開発入門なんかを見るといいでしょう。

ちなみに私の知っているHTML5の知識は
・DOCTYPE宣言が<!DOCTYPE html>となり、すごく楽になった!
・Javascriptなどで図形が書ける<canvas>が追加
・ナビゲーション用の要素<nav>が追加
・動画再生用の要素<video>、音楽再生用の<audio>が追加
・なんか<div>っぽい<section>が追加された。
この程度です(笑)
私ももっと勉強しないといけませんね(>_<)


  

テーマ : ITニュース
ジャンル : ニュース

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。