プロフィール

mshp0723(旧Mikaん星人アワー)

Author:mshp0723(旧Mikaん星人アワー)
ごらんいただきありがとうございます。マルチクリエイタ・クリエイティブ起業家のmikaん星人アワーです。webや音楽コンテンツ関連お仕事をしています。

■お仕事関連サイト■
音楽制作・楽曲アレンジ・webサイトやブログ制作・アトリエSS



2010~2013年の業務
サウンド制作関連
・一般クライアントさま向けDAWレッスン
・芸能プロダクションさま、アーティストさま向け楽曲提供
・教育機関さま 歌唱教材ダンスアレンジ
・ダンススクールさま ダンスBGMオーディオデータ編集
・機器メーカーさま ナレーションレコーディングと編集
・地元企業さま イベント用ご当地風楽曲アレンジ制作
・飲食店運営企業さま 店舗用カラオケアレンジ制作
・移動販売店さま 店舗BGM楽曲アレンジ制作


webサイト制作・運用関連
・食品店さま ネットショップ制作
・音楽スクールさま webサイト制作
・楽器奏者さま 再生プラグイン埋め込みサイト制作
・エクステリア施工企業さま webサイト企画
・飲食店さま webサイト制作
・支援団体さま サイト制作
・一般企業さま 会社案内サイト企画
・支援団体さま fc2ブログカスタマイズ
・その他 メディア/アフィリエイト運用ブログカスタマイズ



よろしくお願いいたします。

最近の記事

カテゴリー

月別アーカイブ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック
トラックバック送信先 :
コメント

cssエディット・レイアウトねた~ 横並びリストタグでチェックする、 ピクセル表記(幅固定)とパーセント表記(中の要素によって変動)の違い

おばんです。

今日はcssレイアウト学習ねたなんですが、その前にどこかにぶつけたい悲しみがあるmikaん星人アワーです。


どーせくだらないことだろ(笑)

昨日とある定食屋でチキンカツやごはんで食事(米は2週間ぶり!ずっとパスタやパン!)したわけですが、ビッグチキンカツを頼んだとおもったら、以下のように

201211264.jpg

ころもがほぼ50%を占め、とり肉はほとんどなし・少ない状態(笑)さすがに、油ばっかりのころもにソースとかかけて、ごはんのおかずにはしたくありません。


これを見て、『ちょ』って思ってくれた方、ありがとうございます。

本題に入ります。cssレイアウトねたですよ。


おしごとでwebサイトとかいじる他、最近ではブログカスタマイズ案件をやっていたので、そこでやってみたねたを、このぶろぐでもやってみました。


スクショですが、
201211261.jpg
このぶろぐのレイアウトをちょっとエディットしますよ♪

管理人は、このぶろぐにグローバルナビゲーションみたいなのを勝手に作って横リストで並べてたよね?cssどう書いた?


細かいところはちょこちょこ変わっていますが、以下のような感じです。

もともとのcss


.mainmenu{width:864px; border:2px solid #ff6600;
background-repeat: no-repeat;
background-color:#ff9966;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
height: 26px; padding:10px 0px 0px 0px;
text-align: center; margin:0 auto 0 auto;
margin-bottom: 16px;}

ul.nav { margin: 0; padding :0; list-style-type :
none; display:inline; }

ul.nav li {float: left; text-align: center;
vertical-align:middle; margin-left:
2px; margin-right: 6px;}

ul.nav li a{width:134px; height:22px;
display: block; margin:0px;
padding-top: 0px; font-weight:bold;}

ul.nav li a:hover{width:134px; height:24px; margin:0px;
display:block; opacity: 0.7; filter: alpha(opacity=70);
border-bottom:2px solid #ffffff; font-weight:bold;}




上記のようなソースです。

ちなみに、今回の趣旨は『横並びリストタグで横幅をピクセルにするかパーセントにするか』が主題につき、『border-radius: 5px;』という関係ないタグが入っていますが、これはcss3で角を丸くする用に入れています。

もちろん、IEとか一部のブラウザには実装されていない機能なので、やりたい方はchromeやFF、サファリとかを入れましょう。


今回ポイントになるのは、横並びにしたリストの『ul.nav li a{width:134px;』という部分です。

このぶろぐの前のバージョンではピクセル指定していたので、表記は以下のようになりました。
201211262.jpg

中の文字数にかかわらず、134pxきっかりで、はこが並びます。これをやるときは、中の文字数など書きすぎて、指定したピクセル数を超えてはみ出ないよう注意しましょう。



ではパーセント表記だと?また、cssはどのように組んだの?


こないだ、以下のように変えてみました。
変更したcss


ul.nav li {float: left;text-align: center;
vertical-align:middle;
margin-left: 10px;margin-right: 10px;}

ul.nav li a{width:110%; height:22px;
display: block; margin:0px;padding-top: 0px;
font-weight:bold;}

ul.nav li a:hover{width:110%; height:24px; margin:0px;
display:block; opacity: 0.7; filter: alpha(opacity=70);
border-bottom:2px solid #ffffff; font-weight:bold;}



ul.nav li 以下をちょこっと変更しています。余裕ができたんでmargin多めに取りました(笑)


ポイントは『ul.nav li a{width:110%;』で、中の文字数が微妙に違うんですよね。その横幅に対して以下のように変動します。
201211263.jpg
ちっちゃい要素の110%と、大きい要素の110%は違いますからね


という感じで、たまたまいじってみただけでしたが、パーセント表記でうまくマージン取りました。134pxだとうまく取れなかったので。要素幅がそろっている場合は(同じ大きさ画像など)はピクセル数値でもokですね。両方状況に応じて使い分けてもよいと思います。




○absolute/relativeみたいな感じだね♪

○人生にも、絶対ぶれていけない部分と、状況に応じて変化する部分あるよね(笑)

と思う方は
にほんブログ村 IT技術ブログ Webサイト構築へにほんブログ村 ベンチャーブログへにほんブログ村 音楽ブログへ

↓↑クリックお願いいたします♪
関連記事
スポンサーサイト
トラックバック
トラックバック送信先 :
コメント
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。