CSS

ホムペのデザインをプチ修正  2014年03月23日
元ダンスアカデミーのサイト  2014年03月21日
スタイルシートで細かい化学式を作成  2012年08月19日
2カラム左固定右リキッド  2012年06月29日
2カラム左固定右リキッド  2012年06月28日
3カラムサイド固定中央可変ができた  2012年05月11日
このブログをリキッドタイプに  2012年04月25日
見出しの文字部分に下線  2012年01月26日
ナビゲーションバーをプチ改変  2011年05月27日
テスト  2011年01月24日
画像置換時のリンク点線の処理  2009年11月01日
clearfix  2009年10月01日
ロールオーバー  2009年08月28日
IE6でチェックをしたら  2009年08月06日
Enough is enough! No more IE6!  2009年08月06日
画像の表示をOFFにしたら  2009年08月05日
ああ、勘違い  2009年03月27日
ホームページの修正  2009年03月22日
IE8で微妙にやばいことが  2009年03月21日
IE7での表示が微妙に  2008年10月12日
IEで隙間が出る問題  2008年09月29日
clearfix  2008年09月29日
画像のロールオーバー  2008年05月11日
IE-7の問題を解決  2008年05月11日
IE-7でひと苦労  2008年05月10日
clearfix  2008年05月10日
このブログのデザインを変更  2008年05月09日
親boxの高さがでない  2008年05月07日
CSSで天地左右を中央揃えに  2008年04月20日
動画をobjectで  2007年10月30日

2014年03月23日

ホムペのデザインをプチ修正

昨日のことですが、
久しぶりにHTMLとCSSを使ってデザインを修正しました。
動機は元大分ダンスアカデミーのトップページの画像がモバイルで崩れることに気づいたこと。
PCで見るぶんには全く支障がなかったがモバイルでは大変なことに。
それはとりあえず修正できたようだけど、ついでにというわけで。
ドクター江部の著作本の紹介欄に件数を増やした。
当然スクロールバーが表示されるわけだが、、、
すぐ下にある更新履歴にバーがあるからそれを流用。
サイズの数値を修正してうまくいきました。
ついでにプロフの100の質問の答えを修正しました。
HTMLはともかくCSSをいじるのは楽しいです。

biomasa at 09:45コメント(0) この記事をクリップ!

2014年03月21日

元ダンスアカデミーのサイト

元ダンスアカデミーのサイトはリキッドレイアウトにしているが、
今日初めてスマホやiPadでトップページを見たら画像がゆがんでいる。
自分はPCしか検証できないので確かではないがとりあえず修正した。
HTMLファイルのimgはwidthとheightをそれぞれ100%にしていたが、それを削除。
CSSファイルで#bsoita img { width: 100%; height: auto;}に変更した。
#dance imgも同様。
これでPCの画面は正常に表示されている。
W3C VALIDATOR でチェックしたらOKだった。
W3C CSS でチェックしたらケアレスミスが2箇所あったので修正した。
まりさんにメールして明日チェックしてもらおう。

biomasa at 19:38コメント(0) この記事をクリップ!

2012年08月19日

スタイルシートで細かい化学式を作成

今朝のがっちりマンデーで化学式を取り上げていた。
化学式をWebで表示するにはどうしたらいいのだろうと思い、
ググってみたらありました。
http://www.w-frontier.com/stylesheet/subsup.html


2012年06月29日

2カラム左固定右リキッド


HTML
<div id="container">
<div id="header">
  <p>ヘッダー</p>
</div>
<div id="main">
  <div id="menu">
    <p>左</p>
  </div>
  <div id="kiji">
    <p>右</p>
  </div>
</div>
<div id="footer">
  <p>フッター</p>
</div>
</div>


css
* {
  margin: 0;
  padding: 0;
}
#container {
  margin: 0;
  width: 100%;
}
#header {
  width: 100%;
  height: 150px;
}
#main {
  width: 100%;
}
#menu {
  width: 200px;
  height: 300px;
  float: left;
}
#kiji {
  width: 100%;
  height: 300px;
}
#footer {
  clear: both;
  width: 100%;
  height: 150px;
}
右側にくるkijiのwidth指定をしないのがポイント。

でもこのブログで幅指定を削除したら――、カラム落ちしました (;^_^A

2012年06月28日

2カラム左固定右リキッド

ダンスアカデミーのサイトのスライドショーの右側に更新履歴を置いた。
スライドショーは固定サイズだが更新履歴はリキッドにしたい。
要するに2カラムで左固定右リキッドスタイルだ。
これはこのブログもそうだけどすべてCSSで指定している。
問題は右のリキッドの部分の幅指定なのだ。
左はピクセルで指定して右は100%にしたけどカラム落ちする。
最後に分かったけどリキッド部分は幅指定をしなければいいみたいだ。
更新履歴の高さの部分だが、上に一文字分の空白を作る場合、
paddingを指定すると高さが下に伸びてしまう。
paddingはpxで指定してheightをその分減らすほうが確実だった。

2012年05月11日

3カラムサイド固定中央可変ができた

ホムペのダンスのところのCSSがなかなか思うようにいかなかったが、やっと完成した。
予め雛形を作ってうまくいくのを確かめてからそこにコンテンツを流しこむ。
それでうまくいくはずなのだが――、思わぬカラム落ちが発生。
ここにメモで残しておきます。
<div id="content">
<div id="maincontent">
<p>メインコンテンツは横幅がリキッドです。</p></div></div>
<div id="side1"><p>サイド1は横幅が固定です。</p></div>
<div id="sidebar2"><p>サイド2は横幅が固定です。</p></div>
#content {
    float: left;
    width: 100%;
}
#maincontent {
    margin: 0 240px 0 260px;
}
#side1 {
    float: left;
    width: 260px;
    margin-left: -100%;
}
#side2 {
    float: right;
    width: 240px;
    margin-left: -240px;
}

2012年04月25日

このブログをリキッドタイプに

このブログをリキッドタイプにに変更した。
CSSで横幅をパーセント表示に変えただけだけど、まあまあうまくいった。
今まではなんとなく横幅を720ピクセルにこだわっていたが、
今はそういう時代でもないからね。
ブラウザを画面いっぱいに開いたらブログもそれに連れて拡大するわけです。
技術的にはまだ不満もあるがとりあえずは良しとしましょう。
p.s.
「ライブドアブログ」「リキッドタイプ」で検索したらこの記事がヒット。
こんな方法でのチェンジは良くないので参考にしないでください。
理想は、左カラムを固定、右記事はそのままでうまくいくはずなのだが、
はじめの記事の下に来る広告が何やらおかしい。
そして2番目の記事は左カラムの下に飛ばされる。
なぜそうなるかがわからない。
分かる人がいたら教えてください。

2012年01月26日

見出しの文字部分に下線

しょっちゅう忘れるからメモ。
<h1><span class="title">見出し部分</span></h1>
#header h1 span.title {
    display: inline;
    padding: 2px 0.5em;
    border-bottom: 1px solid #f00;
    border-left: 5px solid #f00;
    font-size: 150%;
    font-weight: bold;
}

2011年05月27日

ナビゲーションバーをプチ改変

大分ダンスアカデミーのホムペのトップページにあるナビゲーションバーですが、
以前、可変タイプに変更したときに少し変えてそのままにしていました。
今日、ふと思いついて改良版に変更しました。
今までは「display:inline」で対応していたのを
aタグを「display:block」に変えて個々の枠を表示するように戻した。
可変ナビバーなので外枠とリストの枠が完全には一致しないけど、
何とか見苦しくない程度にはできた。
ブラウザの幅を読み取りそこから計算して個々の幅を決められればいいのだが、
そんな方法は知らないし、検索しても見つからない。
JavaScriptで何かできるのではと思うけど――。
最近はブラウザが進歩したからJavaScriptを停止させることは少ないと思うけどね。
たまには頭を働かせないととやってみた。

2011年01月24日

テスト

あああああ
いいいいい
あいうえお
<blockquote class="none"><h1>テスト</h1>
あああああ
いいいいい
あいうえお</blockquote>

テスト


あああああ
いいいいい
あいうえお


2009年11月01日

画像置換時のリンク点線の処理

今までの方法よりもいい処理方法があったのでメモ。
Firefoxでは、画像置換した場合、リンクをクリックした際に点線が画面外まで出るが、
focusプロパティを利用して点線そのものを消す。

a:focus { outline:none; }

また、overflowプロパティを利用してリンク領域の外にはみ出ている点線を消す。
(MacIE5.x対策としてホーリーハックで記述)

a { /*\*/ overflow: hidden; /**/ }


2009年10月01日

clearfix

clearfixの最新?のメモ
/*----- clearfix ----- */
.clearfix:after {
  content: url(./null.gif);
  display: block;
  clear: both;
  height: 0;
}
.clearfix { display: inline-block;}
.clearfix { display: block; }
/*----- /clearfix ----- */


2009年08月28日

ロールオーバー


<p id="ban1"><a href="#"><img src="画像" width="88" height="31" alt="banner" /></a></p>

p#ban1 {
  width: 88px;
  height: 31px;
  background-image: url(背景画像pass);
  background-repeat: no-repeat;
}
p#ban1 a {
  display: block;
  width: 88px;
  height: 31px;
}
p a:hover {
  background-color: transparent;
}
p a:hover img {
  visibility: hidden;
}


2009年08月06日

IE6でチェックをしたら

自分のサイトを久しぶりにIE6でチェックをした。
なんと、ナビゲーションバーの最後が一段落ちていた。
修正を繰り返しているうちに幅の設定が狂ってしまっていた。
その点、IE8は他のブラウザと同じ挙動をしてくれる。

Enough is enough! No more IE6!

IT media News

「IE6はもういらない」――Web企業が撲滅キャンペーン


 Internet Explorer(IE)6を撲滅せよ――Web企業が反IE6キャンペーン「IE6 No More」を立ち上げた。

 このキャンペーンを立ち上げたのは、WebサイトホスティングサービスのWeebly。同社は撲滅運動に乗り出した理由について、同ブラウザへの対応がWeb企業にとって負担になっているためと説明している。

 IE6は2001年にリリースされ、Microsoftから後継バージョンのIE7、IE8がリリースされているにもかかわらず、今なおかなりのシェアを占めている。NetApplicationsの調査によると、7月のIE6のシェアは27%に上った。

 このためWeb企業はIE6に対応せざるを得ないが、「IE6対応は難しく、いら立たしい作業で、過度に時間を取られる。さらにIE6は最近のWeb標準をサポートしていないため、開発者ができることに制約がある」状況に苦労しているという。

  IE6 No Moreは、IE6ユーザーにブラウザのアップグレードを呼び掛けることで、できるだけ早急にIE6ユーザーをなくすことを目指している。そのための手段として、Webサイトに埋め込むHTMLコードを配布している。このコードをサイトに埋め込むと、IE6ユーザーがサイトにアクセスしたときに、ブラウザのアップグレードを促すメッセージが表示される。

埋め込みコードは以下の通り(14日に修正されたものです)

<!--[if lt IE 7]>
<div style='border: 1px solid #000000; background: #FFFFFF; text-align: center; clear: both; height: 108px; position: relative;'>
  <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'>
    <a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
  <div style='width: 923px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
    <div style='width: 108px; float: left;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/warning_ie6.jpg' alt='Warning!'/></div>
    <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>    <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>あなたは旧式のブラウザをご利用中です</div>
    <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>このウェブサイトを快適に閲覧なさる場合には、最新のブラウザにアップグレードしてください。</div>
  </div>
  <div style='width: 108px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
  <div style='width: 108px; float: left;'><a href='http://www.microsoft.com/windows/internet-explorer/default.aspx' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
  <div style='width: 108px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
  <div style='width: 108px; float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/google_chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
  <div style='float: left;'><a href='http://www.opera.com/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/opera.jpg' style='border: none;' alt='Get Opera'/></a></div>
  </div>
</div><![endif]-->


2009年08月05日

画像の表示をOFFにしたら

ちょっと前まではインターネットは電話線だった。
だからデータのやりとりに時間がかかった。
Webのページはできるだけテキスト表示を心がけた。
観る方はブラウザで画像表示をOFFにすることもあった。
今はブロードバンドが普及し、
光ケーブルの時代だからデータの大きさは気にしなくなった。
とはいえ画像をOFFにすることもある。
CSSでテキストを飛ばして背景画像を表示することが流行った。
これだと画像をOFFにしたら何も表示されない。
それにリンクが貼ってあったら悲惨なことになる。
だからテキスト飛ばしはしないで画像は表示する。
画像のaltとリンクのtitleで画像OFF時のテキストの代替とする。
オンマウス(a:hover)時は上の画像を非表示にすると、
背景画像が表示される。

<p class="back"><a href="#" title="hogehoge"><img
src="hoge.png" width="88" height="31" alt="hogehoge" /></a></p>

p.back {
  background-image: url(./hoge2.png);
  background-repeat: no-repeat;
}
p.back a {
  display: block;
  width: 88px;
  height: 31px;
}
p.back a:hover {
  background-color: transparent;
}
p.back a:hover img {
  visibility: hidden;
}


2009年03月27日

ああ、勘違い

お薦め海外ミステリのトップページ。
お薦め本リストのデザインを修正したのはいいが、
IEで上下の幅が出ない(paddingが利かない)
今日気づいた。
liにdisplay:block;を設定していた。
li aに設定を変更した。
なぜこんな失敗をしたのだろう?!

2009年03月22日

ホームページの修正

データの内容を変えるのではなく、ソースの問題。
IE8の導入で起きる不都合を探してほとんどのリンクをクリックした。
お薦め海外ミステリのサイトですが。
昨日の修正でおおむねOKのようです。
ただ文字サイズに不都合があったのでそこを修正しました。
これは単純なCSSの問題です。
入れ子になっているフォントサイズが小さくなりすぎで (;^_^A
完全なミステイクでした。
本家のサイト(西野流呼吸法とダンス)はこれからチェックです。

2009年03月21日

IE8で微妙にやばいことが

Sleipnirで見てみるとマージンの不都合が出てるページがあった。
ということはSleipnirのベースはIE8ということですね。
自分のサイトながら膨大なファイルをチェックするのは大変です。
しばらく時間がかかるでしょう (;^_^A

2008年10月12日

IE7での表示が微妙に

IE7で自分が管理しているサイトを巡回してみた。
微妙に表示がおかしいところがある。
別窓のリンクが開かない。
で、こんなサイトを見つけた。
http://journal.mycom.co.jp/special/2007/ie7/

2008年09月29日

IEで隙間が出る問題

27日のHPをリキッドに変更する作業中に隙間ができる問題に悩まされた。
左メニューをポジション指定でfloatを解除したら、隙間が消えた。
floatを解除する前に隙間は消えていたからfloatとは違うのでしょう。
結果的に不要なのでfloatは解除、とりあえず結果オーライということで (^_^.)
そのうち原因がわかるでしょう、一年後ぐらいに (笑)

clearfix

最新版かも?
メモとして。
/*----- clearfix ----- */
.clearfix:after {
    content: ".";
    font-size: 0.1em;
    line-height: 0;
    display: block;
    height: 0.1px;
    visibility: hidden;
    clear: both;
}
/*----- /clearfix ----- */

2008年05月11日

画像のロールオーバー

テキスト飛ばしをしない画像のロールオーバーの方法。

<li id="gazo"><a href="#" title=""><img src="./gazo01.jpg" width="300" height="150" alt="" /></a></li>

li#gazo {
    width: 300px;
    background-image: url(./gazo02.jpg);
    background-repeat: no-repeat;
}
li#gazo a {
    display: block;
    width: 300px;
    height: 150px;
}
li#gazo a:hover {
    background-color: transparent;
}
li#gazo a:hover img {
    visibility: hidden;
}


IE-7の問題を解決

一晩考えてひとつ思いついた。
で、朝一番にやってみた。
イメージを透明GIFにして背景をずらす方法にした。
ただIEで駄目だったのはリストタグに幅を指定していなかった。
それでほぼ解決した。
p.s.
もしかしたらと思い、以前の方法のリストタグに幅を指定した。
何のことはない、これでIE-7も解決した。

2008年05月10日

IE-7でひと苦労

clearfixのIE7対応版を見つけてそれを適用したが――。
それ自体はうまくフィットしたのだが、
トップページのダンスのロールオーバーがうまく作用しない。
呼吸法のロールオーバーとまったく同じことをしているのだが、
ダンスの方は動作がおかしい。

clearfix

今まで使っていたclearfix
/*----- clearfix ----- */
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clearfix {
    height: 1px;
    /*\*//*/
    height: auto;
    overflow: hidden;
    /**/
}
/*----- /clearfix ----- */

新しいIE7対策のclearfix
/*----- clearfix ----- */
.clearfix {
    zoom: 1; /* for IE5.5 - IE7 */
}
.clearfix:after { /* for modern browser */
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /*display: inline-block;*//* IE7対策 */
}
/*----- /clearfix ----- */


2008年05月09日

このブログのデザインを変更

かねてより思案していたサイドカラムの背景色の問題を解決した。
記事が長い場合サイドカラムの最後は途中で切れていたのを下まで表示。
余計なDIVの括りを増やすことなく問題を解決できた。
白の網掛けがうまく収まらなかったのだが「container」に設定で解決した。
記事の部分とサイドカラムは寸法(ピクセル)を変えることなく外の枠のパディングの調整で収まった。
「Firefox」だけでなく「IE」(Sleipnir)でもうまく表示された。
ほかのブラウザでも大丈夫だろう、多分!

2008年05月07日

親boxの高さがでない

親boxの中に子boxを右左にfloatさせると親boxの底が押し下げられない。
clear-bothの改行でうまくいくときもあるけど――。
駄目な場合、親boxにclearfixの指定をする。
これは呼吸法のページのトップをこれで行っている。
今日はゲームのメニューページでつまずいた。
今回は親boxにfloatを指定したらうまく行った。

2008年04月20日

CSSで天地左右を中央揃えに


<body>
<div id="container">
コンテンツ  
</div>
</body>
---------------------------------------------
#container {
    position: absolute;
    width: 500px;
    height: 250px;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -125px;
}


2007年10月30日

動画をobjectで


  <h1></h1>
  <p class="memo1">動画が始まらない場合はスタートボタンを押してください</p>
  <p class="memo2">動画が表示されない場合は下記のリンクをクリックしてください</p>
  <p><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
    <param name="src" value="URL" />
    <param name="autostart" value="false" />
    <param name="controller" value="true" />
    <a href="URL" target="NewWindow">動画</a>
  </object></p>

p.memo1 {
    visibility: hidden;
}
/* ----- ob_win_ie6.css ----- */
p.memo1 {
    visibility: visible;
}
p.memo2 {
    display: none;
}



Profile
しぇんしぇい
西野流呼吸法とソシアルダンスと海外ミステリをこよなく愛しているおいさんの Diaryです。
記事検索
過去記事
Recent Comments
訪問者数

    天気情報
    Google Sitemaps用XML自動生成ツール
    livedoor Readerに登録
    RSS
    livedoor Blog(ブログ)