宮崎ロッド・Prime Time バンブーロッドPiggy's Tail

Page 1 of 5 :  1 2 3 4 5 Next › »

2016-04-08

Dropdown menuを(小)変更

前から気になっていた本家ホームページ、メインコンテンツ上部のDropdown menuをブラッシュアップした(画像)。CSS3の「box-shadow」を追加してその他を調整したけど、途中で謎の横スクロールが出現、手間取った。メニューはHTML+CSSだけで書かれているので今時のインタラクティブな動作はないけど、以前の2次元ペッタリの時より見やすくなったかなぁと思う(思いたいw)

Dropdown menu

Posted by TM* at 2016-04-08 17:39 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

2016-02-01

本家ホームページのレスポンシブ化

モーニングコーヒーなう。奥多摩は気温マイナス1℃、みぞれ混じりの雨から雪に。

本家ホームページのレスポンシブ化、90%終わってアップロード完了(画像)。調整はおいおいやろうと思います。半日ぐらいで作業は済むかな♪と思っていましたが始めてみたら目論見は超呆気なく崩れ去りました(笑)

編集慣れてくるころにトラブル発生。原因はあるスタイルシートに「}」が一個どういうわけか足りなかったのですが、それを探すのに1時間ぐらいかかりました。自分が作ったコードですが作業しているうちに書いたヤツを呪いたくなりました(プログラマーあるあるw)

近隣河川はあとひと月で解禁ですね

皆さん、よい一日を!

本家ホームページのレスポンシブ化

Posted by TM* at 2016-02-01 09:21 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as: ,

2016-01-28

レスポンシブWebデザイン・2

モーニングコーヒーなう。奥多摩は気温マイナス3℃で晴れています。前から気になっていた本家ホームページのタブレット・モバイル環境対応化に手を付け始めてみました。取りあえず幅640px(画像)でレイアウトしています。久しぶりにスタイルシートを弄っていますがフライタイイング並みに面白いですね。元々、共通スタイルシート+個別ページのスタイルシートに分けてあったのでviewportで共通スタイルシートを切り替えてあげると良かったわけですね。修正完了次第、順次アップロードいたします。

皆さん、よい一日を!

レスポンシブWebデザイン・2

Posted by TM* at 2016-01-28 08:49 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

2016-01-24

レスポンシブWebデザイン・1

晩酌なう。湯豆腐でちびちびやりながらレスポンシブWebデザインなるものをアレコレ調べています。本家ホームページ+子豚日記をいかにモバイル端末にフィットさせるか、ちょっと見で、閲覧環境に応じてCSSを振り分けて見栄えを切り替えるのが手っ取り早いというのが第一感。(X)HTMLについてはガチに強固な構造を自負していますのでこの方法が最善だろうなぁ。

表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。Link
Posted by TM* at 2016-01-24 22:10 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

2014-07-11

LESSとはなんぞや?

[メモ]CSSの開発環境を整えるための“less.js”のGUIフロントエンド。ウェブサイトにはコンパイルしたCSSファイルをアップロードする、みたいな使い方のようですね。独自変数でCSSの効率的な記述ができて良さそうです。本家の現状はある程度は@インポートで重複した記述を省いていはいますが各ディレクトリにそれぞれCSSがぶら下がっているので、例えばidやclass別のbackgroundとか、値を一々Grepしてから書き換えているという手間が省けそうだなぁ。あるいは猫に小判か…

Posted by TM* at 2014-07-11 17:00 in Web関連 » WWW | English | Permalink
Tagged as:

2010-08-23

リンクをタブのように見せるCSS

メニューのスクリーンショット
リンクの新旧比較・上が新しいタブスタイルのリンク

ホームページ・メインコンテンツのリンクを画像上のようにボタンからタブっぽく変更してみました。上が新しいタブのリンク、その下が今までのボタンタイプのリンクです。画像はお知らせのページです。

元のHTMLはそのままでCSSのみの変更で実現出来ました。CSS3的にはちょっとアレ(borderとbackgroundが同色指定、タブの角の丸めに-moz-border-radius)ですが見た目、リンクとコンテンツの関連が良くなったかなということでその辺りは後々改善しようと思います。

以下、リンクのHTMLです。<li>とか使っていないので至ってシンプルw

<div id="guide">
<span>お知らせ</span>
<a href="info.html">From "Prime Time"</a>
<a href="info_log.html">Log File</a>
&nbsp;
<a href="../content/searchsite.html" title="サイト内検索へ">Search</a>
</div>

以下、新しいタブ・タイプのリンクの主なCSSです。

/* #guide */

#guide {
   font-size          : 0.9em;
   margin             : 0;
   text-align         : right;
   border-bottom      : 2px solid #e9e9d1;
}
 
#guide a {
   color              : #666;
   background-color   : #ffffff;
   border-top         : 1px solid #808080;
   border-left        : 1px solid #808080;
   border-right       : 1px solid #808080;
   border-bottom      : 1px solid #c0c0c0; /* 他のページへのタブ */
   text-decoration    : none;
}

#guide span {
   color              : #000000;
   background-color   : #ffffff;
   border-left        : 1px solid #666;
   border-right       : 1px solid #666;
   border-bottom      : 3px solid #fff; /* 現在位置のタブ */
}

#guide a, #guide span {
   padding            : 1px 3px 1px 3px;
   -moz-border-radius : 4px 4px 0 0;
}

#guide a:visited {
   color              : #696969;
   background-color   : #ffffff;
}
 
#guide a:hover {
   color              : #000000;
   background-color   : #fae9a7;
   border-bottom      : 2px solid #fae9a7;
}

#guide a:hover, #guide span {
   border-top         : 3px solid #edb636;
}

/* 親divのbackground-colorは#e9e9d1 */

…というようにborder-bottomの設定(色と太さ)がミソになっています。コレ、なかなか気が付きませんでした。CSSの変更なので検索エンジンのキャッシュにも自動的に適用されるのもいいですね〜

付記:タブの角の丸めはFirefox 3ブラウザでご覧いただきますとそのようになります。

Posted by TM* at 2010-08-23 12:02 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

2009-12-09

Lightbox 2 と line-height

Lightbox 2.0 と Line-height
「Close X」からずれると表示されるカーソル(右)。左は正常。

新しいページにLightbox 2を組み込んだところ、ポップアップした画像を閉じる「Close X」にカーソルをオンマウスしてクリック出来ない。そのちょっと下にカーソルを移動するとクリックできる、という症状が出た。

これはCSS(スタイルシート)が原因だろうと直感、とりあえずウェブサイトのスタイルシートを切り離してみるとLightbox 2 のClose Xには正常にオンマウス&クリックが出来るようになった。

さて、つらつらと自分が書いたスタイルシートを眺めると以下の記述があった(のを忘れていた>オイオイ!)。

div,p
{
   line-height       : 1.4em;
}

…この部分をコメントアウトするとビンゴ!でした。

見栄えをCSSで制御しているとついついアレコレと書き込みたくなりますが継ぎ足しは老舗の焼鳥屋さんのタレのごとくとはいかないですね。height とか line-height とかはセレクタを特によーく考えて設定してねwwwという教訓でした。

Posted by TM* at 2009-12-09 18:03 in Web関連 » WWW | English | Permalink
Tagged as: ,

Page 1 of 5 :  1 2 3 4 5 Next › »