Home > css

css Archive

スポンサーサイト

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

森信雄の日々入門詰将棋の CSS

  • 2009-04-25 (Sat)
  • css

森信雄の日々入門詰将棋

森信雄の日々入門詰将棋の CSSを書いてみた。ブログのタイトルは入門詰将棋となっているが、けっこう難しい。

右のカラムの固定幅を可変にした。将棋盤の間隔を広げて、中央に少し寄せた。

/* 右カラムの幅を可変 */
body > table {
    width: auto !important;
    background: #cceaff !important;
}
body > table > tbody > tr > td > table {
    width: auto !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important
}
body > table > tbody > tr > td > table > tbody > tr > td:nth-child(2n) {
    width: 100% !important;
}
td.main_txt {
    background: #cceaff !important;
}
td.entry_title {
    background-image: none !important;
}

/* 将棋盤の間を広げる */
td.main_txt > object {
    display: block !important;
    margin: 2em auto 2em 25% !important;
}
td.main_txt > a {
    display: block !important;
    margin: 2em auto 4em 25% !important;
}

本当は解答の Flashの将棋盤を大きくしたかったが、拡大すると太い線が現れてしまう。

td.main_txt > object > embed { 
    width: 125% !important;
    height: 125% !important;
}

Flashの将棋盤

Google マップの CSS

  • 2008-12-02 (Tue)
  • css

Google マップの CSS

Google マップの地図を少しでも大きくして見たいから、上の部分を検索ボックスとボタンを残して削った CSSを書いた。

/* フォームの周りを削除 */
#logo, div.example {
    display: none !important;
}
/* メニューを削除 */
#guser, #gbar {
    display: none !important;
}

/* 検索ボックスの位置を調整 */
#search .controls {
    padding-top: 0em !important;
}
body.leaf.opera {
    margin: 0 !important;
}

/* 下のリンクを削除 */
#mclip {
    display: none !important;
}

CSSの fontプロパティ

  • 2008-11-01 (Sat)
  • css

fontプロパティは、フォント関連のプロパティをまとめて設定する。

設定できるプロパティは、

font-style
文字の表示スタイル
font-variant
スモールキャピタル(小さくした大文字)
font-weight
文字の太さ
font-size
文字のサイズ
line-height
行の高さ
font-family
フォントの指定

font-size, font-familyの 2つだけは省略できない。省略されたプロパティはデフォルトの値が設定される。font-styleや font-weightなどは値が初期化されて(いずれも normal)便利だが、line-heightは初期化される(normal: 1.0~1.2?)と困ることになることがある。

fontプロパティは、スペースで区切って並べる。font-size, font-familyの順番は決まっている。line-heightは font-sizeの後に「/」で区切って書く。

font: italic bold 14px/1.4 sans-serif;
font: 1.2em/120% monospace;

CSSの white-spaceプロパティ

  • 2008-10-14 (Tue)
  • css

CSSの white-spaceプロパティの値がこんがらかるので、試してみた。

white-spaceプロパティは空白文字の扱いを指定する。空白文字とは、半角スペース、タブ、改行などのこと。(全角スペースは含まれない。)

値のキーワードには、デフォルト値の normal, pre, nowrap, pre-wrap, pre-line,継承を意味する inheritがある。

キーワード連続する空白を1つにする改行文字で折り返す自動的に折り返す
normal×
pre××
nowrap××
pre-wrap×
pre-line

例で使った HTML
<div>Note〈ここに半角空白が6つある〉(空白6)that there〈ここにタブが2つある〉(タブ2)are two spaces between A and B, and none between B and C. This can sometimes be avoided by using the natural bidirectionality of characters instead of explicit embedding levels.
〈ここに改行がある〉(改行) Also, it is good to avoid spaces immediately inside start
〈ここに改行がある〉(改行) and end tags.
</div>
例で使った CSS
white-space: (normal, pre, nowrap, pre-wrap, pre-line);
margin: 1.5em 0 2em 1em ;
padding: 0.5em;
width: 95%;
overflow: scroll;
background-color: #ddffdd;
line-height: 1.4;
normal
Note (空白6)that there (タブ2)are two spaces between A and B, and none between B and C. This can sometimes be avoided by using the natural bidirectionality of characters instead of explicit embedding levels. (改行) Also, it is good to avoid spaces immediately inside start (改行) and end tags.
pre
Note (空白6)that there (タブ2)are two spaces between A and B, and none between B and C. This can sometimes be avoided by using the natural bidirectionality of characters instead of explicit embedding levels. (改行) Also, it is good to avoid spaces immediately inside start (改行) and end tags.
nowrap
Note (空白6)that there (タブ2)are two spaces between A and B, and none between B and C. This can sometimes be avoided by using the natural bidirectionality of characters instead of explicit embedding levels. (改行) Also, it is good to avoid spaces immediately inside start (改行) and end tags.
pre-wrap
Note (空白6)that there (タブ2)are two spaces between A and B, and none between B and C. This can sometimes be avoided by using the natural bidirectionality of characters instead of explicit embedding levels. (改行) Also, it is good to avoid spaces immediately inside start (改行) and end tags.
pre-line
Note (空白6)that there (タブ2)are two spaces between A and B, and none between B and C. This can sometimes be avoided by using the natural bidirectionality of characters instead of explicit embedding levels. (改行) Also, it is good to avoid spaces immediately inside start (改行) and end tags.

Goal.comの CSS

  • 2008-06-29 (Sun)
  • css

スタイルシートを適用したGoal.com

Goal.comはやたらと Flashが多く、重いので、スタイルシートで Flashを消して、見た目を整えた。

具体的には、トップページの Flash4つ(!)と、記事のページの Flash1つ(前は3つだった)と、Googleの広告を消した。ヘッダを小さくした。メインのカラムの幅を広げ、文字を大きくした。幅が固定指定されていたので autoにして、ウィンドウのサイズを小さくしても下のスクロールバーが出ないようにした。

div.giantRight, div.giantBody, div.corpo, div.fasciaGiant {
    width : auto  !important;
}

div.testataL1, div.testataL2, div.col1, div.line1, div.pageCol3, div.MyGoo, div.testaPage,
.tabContenitore .articoloOption {
    display : none !important;
}

div#Articolo_divArticolo {
    background-image: none !important;
    background-color: transparent !important;
}

div.testata {
    background-image : none !important;
    height : 25px !important;
}

div.pageCol1 {
    width : 24%  !important;
}
div.pageCol2 {
    width : 70%  !important;
    margin : 0 14px;
}
div.col2 {
    width : 40%  !important;
}
div.col3 {
    width : 55%  !important;
}
div.flash_box embed {
    margin : auto  !important;
}

div.articoloTesto * {
    font-size : 14px !important;
    line-height : 1.4em !important;
}

a.news_box {
    font-size : 12px !important;
    line-height : 1.3em !important;
}

div.banner728, div.banner960, div.banner300H, div.banner300, div.banner300H , div.banner160X160, div.banner160H, div.banner160, div.bannervirgilio120, div.banner160G, div.banner160SX, div.bannerGhome, div.bannerART468 {
    display : none !important;
}

Home > css

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

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