[ Tags :: CSS ]

画像なしで吹き出しみたいなもの

category-icon

 この頃は、リッチなツールチップ(バルーンヘルプ)が増えてきたように思います。中には、派手すぎて逆に分かりづらかったりするものもありますが、まぁそういうので遊んでみるのもたまには良いかなと思います。

 自分なりに実装するとしたら、どのようなものが良いか考えてみました。

  1. シンプルであること
  2. 軽快であること
  3. 吹き出しっぽく見せたいな
  4. 角丸コーナーが良いな
  5. 出来ればドロップシャドウぐらいは付けたい

という感じで、矛盾をはらんだリストですが、これを実装するにはどんなが良いか考えてみました。

  1. シンプルであること → 画像ファイルを使わずにやれるか?
  2. 軽快であること → フェードなどのエフェクトはなしで
  3. 吹き出しっぽく見せたいな → あのニョロっとした尻尾みたいなのをどうやって作るか?
  4. 角丸コーナーが良いな → CSS3に対応していないIEはどうするか?
  5. 出来ればドロップシャドウぐらいは付けたい → 同上

 いつものようにCSS3のサポートが貧弱なIEが足かせとなります。でも、IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう。画像を使わずに、角丸コーナーやドロップシャドウ効果を付けるには、IEのVMLやfilter機能を使うのが良いでしょう。

 角丸コーナーは、VMLのroundrectGを使って実現できます [参考記事: VMLやSVGを用いた角丸コーナーLink ]。ドロップシャドウは、IEのフィルター機能のひとつであるBlurを使うことでOKです[参考記事: IEでCSS3のドロップシャドウを使いたいLink ]。問題は、吹出しには必須とも言える、あのしっぽみたいなやつですが、これはCSSのボーダー属性を使うことで可能です。トリッキーな(でも正統派)手法ですが、これに関して、レファレンスともいうべきサイトがありますLink 。このサイトは、以前から知っていていつか利用しようと思っていたんですが、ようやくお世話になる時が来ました:)

 とりあえず、試験的なモデル(プロトタイプ)を作ってみて、それが意図したように実現可能であれば、それを自動化すべくスクリプト化という流れが良いでしょう。プロトタイプが、よさげな感じに仕上がったのでスクリーンショットをば。
cutePop
なかなか良い感じでは。FirefoxですがIEでもほぼ同じ。
 

実際のデモのページはこちら。Link

 で、かなり手抜きですが、これを元にスクリプト実装したのが以下。

実際のデモのページはこちら。Link

 ppBlogで、これらをどれくらい採り入れるかは未定ですが、引き出しは多ければ多いほど良いでしょう

   


— posted by martin at 01:57 am   commentComment [2]  pingTrackBack [0]

Flexを用いた複数ファイルアップロード

category-icon

 こんばんは、martinです。前回のエントリーで述べていたように、次期バージョン(v1.9.0)では、画像ファイルのアップロードの際に、複数の画像をまとめてアップロードできる仕組みを提供予定です。

 現状では、複数の画像を一度にアップロードするには、FlashかJavaを使うしかありません。JavaもFlashも素人ですが、とっつきやすいのはFlashですし、ファイルアップロードに関しては、色んなサイトでソースコード付きのFlash/Flexのデモサイトがあったので、Flexを用いたインターフェイスを作ってみました。

実際に試すことが出来るデモサイトLink

 実際には、Coding CowboysLink というサイトにあったプログラムをベースに、好みのインターフェイスになるよういじっただけです。

uploadInterface
改良したインターフェイス。日本語化したりとか。

 ローカルのフォルダからは基本的に任意のファイルを選べるのですが、画像ファイル(*.jpg, *.png, *.gif)のみに絞っています。また、Flexの練習もかねて、デモページのFlashではアップロードした画像を見ることが出来るように、右下に画像ギャラリーへのリンクボタンを付けてます。

画像ギャラリーへのリンクLink

 ちなみに、このリンク先の画像ギャラリーは、Flashとは関係なしに、単にPHPでページを生成しています。CSSのみを用いたシンプルなものです。IE向けのハックは使ってませんが、IE6でもそう表示が崩れることはないかなと期待。アップロードされた画像ファイルの内、最新のJPEG画像を5枚表示するようにしてます。

galleryShot
CSSのみでのフォトギャラリー。IE6でも何とか動くかな。

 今後、いじるとすれば、ファイルサイズ上限を指定したりとかですかね。とりあえず。

     


— posted by martin at 04:10 am   commentComment [8]  pingTrackBack [0]

テーブルレスカレンダーを考えてみる

category-icon

 こんばんは。常々、既成概念にとらわれない生き方をしようと思っているけど、それを実践するのはなかなか難しいなと思っているmartinです。

 さて、ppBlogでは現状、大まかに3種類のカレンダーを指定できますが、その内2種類は、TABLEタグを用いたものです。まぁ、よく見るカレンダーの構造を見ると、TABLEタグを使って表みたく作成というのは自然な流れでしょう。web界隈の最前線は追っていないので、ちょっと知るのが遅かった気もしますが、カレンダーの中には、TABLE要素を使わずに、UL要素やOL要素などのリスト要素を用いてカレンダーを生成する試みもあるようです。

 Tableless Calendar In UseLink

 A Semantic List-Based CSS CalendarLink

 一口にリスト要素を使うといっても、色々な記述があり、紹介しているサイト毎に違っています。で、未だに無視できない数のユーザーの方々がIE6を使っていると思うのですが、少なくとも上記2つのサイトは、IE6で見ると微妙に表示が崩れてしまいます(IE6,7に見られるバグで、hasLayoutをもった要素のOL要素の番号付けが無視されるというものは、有効な解決法がなく致命的)。なので、自分なりに、どのブラウザで見ても同じような見栄えになるようにと色々試した結果、以下のやつが現時点での最適解かなというのに辿りついたので、ppBlogにも採用するついでに紹介しておこうと思います。

tableless-calendar
これはスクリーンショットです。実際のデモは下のリンクから。

 TABLE要素の代わりにOL要素(Ordered List)を使います。日付は時系列なものですから、順序付きリストを用いるのが良いでしょう。このテーブルレスカレンダーの特徴として挙げられるのは、ひとつのHTMLの記述で、3種類の全く違った見栄え(ボックス型・水平型・垂直型)にすることが可能ということです。この見栄えの制御には、CSSを使いますが、かなりシンプルな記述で済みます。また、IE6にも対応となると、色々ややこしいCSSハックを駆使しがちですが、CSSハックは全く必要ありません。

 では早速、カレンダーを生成するHTMLソースを見てみましょう。以下のような感じです。

 <div id="calendar">
  <ol class="wheader">
   <li>S</li>
   <li>M</li>
   <li>T</li>
   <li>W</li>
   <li>T</li>
   <li>F</li>
   <li>S</li>
  </ol>
  <ol class="weekday">
   <li class="blank"> </li>
   <li class="blank"> </li>
   <li class="blank"> </li>
   <li class="daySubmit" title="エイプリルフール">1</li>
   <li>2</li>
   <li>3</li>
   <li class="Sat">4</li>
   <li class="Sun">5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li class="Sat">11</li>
   <li class="Sun">12</li>
   <li>13</li>
   <li>14</li>
   <li>15</li>
   <li>16</li>
   <li>17</li>
   <li class="Sat">18</li>
   <li class="Sun">19</li>
   <li>20</li>
   <li>21</li>
   <li>22</li>
   <li>23</li>
   <li>24</li>
   <li class="Sat">25</li>
   <li class="Sun">26</li>
   <li>27</li>
   <li>28</li>
   <li class="Holiday" title="みどりの日">29</li>
   <li>30</li>
   <li class="blank"> </li>
   <li class="blank"> </li>
  </ol>
 </div>

 例として今年4月のカレンダーをあげます。曜日を表す部分(日月火水木金土)と、日にちの部分を分けて、それぞれOL要素でグルーピングしていて、各にwheaderweekdayというクラス名を与えています。ppBlogでは、記事を書いた日付には、daySubmitというクラス名が与えられます。

 まず、通常の、よく見るボックスタイプですが、これは以下のようなCSSで実現できます。

#calendar * {
  margin: 0; padding: 0; /* まずは、マージンやらのリセット */
}
#calendar ol {
  list-style: none; /* 順序付きリストの番号を非表示に */
  width: 220px;  /* この横幅指定が一番のポイント */
}
#calendar li {
  float: left; /* これもポイント */
  border: solid 1px #aaa;
  width: 18px; height: 18px;
  margin: 2px;
  padding: 3px;
  text-align: center;
  line-height: 18px;
  font: 600 14px Trebuchet MS;
}
#calendar ol.wheader li {
  background: #c69;
  color: snow;
}

/* その他 ppBlog用のオプション */
li.daySubmit { background-color : #feff7d; }
li.Sun { color: red; }
li.Sat { color : blue; }
li.Holiday { color : orange; }
li.Today { font-weight: 900; }
li.blank { border: solid 1px #ddd !important; background: #f5f5f9; }

 ポイントは、OL要素に具体的に横幅を指定して、かつ、LI要素を左寄せにすることです。指定した幅に達すると自動的に下に流れ込みます。となると、水平タイプにするのは簡単で、幅を指定しなければ良いわけです。その際に、曜日の部分や、空白のリスト要素はあえて表示させる必要はないので、以下のような記述になります。

#calendar ol {
  width: auto; /* 幅を指定しない! */
}
#calendar ol.wheader, #calendar ol.weekday li.blank {
  display: none; /* 非表示に */
}

 最後に、垂直タイプですが、これも簡単で、従来、OL要素は縦に展開するものです。それを上ふたつではフロート指定で横方向に伸ばしたので、そのフロート指定をしなければ、自ずから縦になります。明示するなら以下のような感じです。

#calendar ol.wheader, #calendar ol.weekday li.blank {
  display: none; /* 非表示に */
}
#calendar ol.weekday li {
  float: none; /* フロートの解除 */
}

 それでは、実際のデモを見てみましょう。

 

8-)Tableless CalendarのデモLink

 ボタンをクリックすれば、その場でひとつのカレンダーが3通りに切り替わります(最後にスタイルを適応させないボタンも付けました。OL要素のデフォルトの動作が確認できます)。JavaScriptで制御しているのですが、動的スタイルシートの適応は、動的スタイルシートの作成Link で紹介した手法を用いています。

 個人的に、このOL要素を用いたカレンダー表示というのは、お気に入りなので、近くバージョンアップ予定のppBlogに組み込んでいます。後、現状、ボックスタイプでは、週の初めは日曜日ですが、これを任意の曜日を指定できようにしています。

 


— posted by martin at 07:40 am   commentComment [2]  pingTrackBack [0]

ppBlog1.7.3の自動インストール版

category-icon

 こんばんは。とりあえず自動インストール版を昨日リリースしました。が、今日ちょっと弄っていてutils.phpのurl_encode関数辺りを変更したので、その差分を添付しておきます。また、テーマ管理画面で「テンプレート」←→「スタイルシート」の切り替えリンクが適切に作動してしなかったので修正しました(theme.inc.php)。あと見栄えの修正でpages.inc.php。以上の3つを添付しておきます。

 先月の4月23日に差分ファイルを出しましたが、それから至る所を弄りました。昨日のリリース版では、JSスクリプトはoParts.js, lib.js, photoeffect.js, syntax.js, comment.jsは軒並み手が入ってます。modulesも色々変更を加えているので、1.7.3ベータ版をお使いの方は、現行リリース版(080511)をダウンロードされて、jsディレクトリとmodulesディレクトリの中身は一括して上書きするのが楽だと思います。utils.phpなどのトップディレクトリのファイル群については、これも一括して上書きして下さい。変わっていないPHPファイルもありますが、アップデート漏れを避けるにも、とりあえず上書きというのが良いかと。ログやらownerディレクトリ、cssディレクトリ、statディレクトリの中身は特に何も変更することはないです。

 テーマ関連で変更があります。Ajaxを利用してコメントなどを読み込んで表示させるボタンですが、これらのボタンにはcute-buttonというクラス名を与えました。utils.phpが出力する、このボタンのHTMLは以下のようになります。

<div class="cute-button" onclick="loadComments(1209722736);">
 <button title="ここでコメント・トラックバックを展開します">12件のレスポンス [+]</button>
</div>

 これに対するテーマBasicでのCSS指定は以下のような感じです。

.cute-button {
  background: url(Images/button-bg-left.png) no-repeat 0 0;
  height: 24px;
  margin: 3em auto 2.5em 1em; /* 好きな値を。本文とのマージン */
  padding: 0 0 0 12px;                 /* ボタンの左パディングに相当します */
  display: inline-block;
  display: -moz-inline-box; /* for Firefox2.x */
  zoom: 1; *display: inline; /* for IE */
}
.cute-reply { margin: 1em auto 4em 4em; } /* 「コメントする」ボタンへの対応 */
.cute-button button {
  background: url(Images/button-bg-right.png) no-repeat 100% 0;
  height: 24px; line-height: 24px;
  cursor: pointer;
  display: block;
  padding: 0 12px 0 0;           /* ボタンの右パディング。上記の左パディングと同じ値。 */
  margin: 0;
  border: none;
  overflow: visible;                 /* IEのために必要 */
  font: 500 13px Trebuchet MS, Tahoma, 'ヒラギノ丸ゴ Pro W4', 'メイリオ', Arial, sans-serif;
}
* html .cute-button { overflow-y: hidden; width: 1%;} /* for IE6... */
* html .cute-button button { width: 1%;}   /* for IE6... */
.cute-button:hover {
  background-position: 0 50%;
}
.cute-button button:hover {
  background-position: 100% 50%;
}
.cute-button:active {
  background-position: 0 100%;
}
.cute-button:active button {
  background-position: 100% 100%;
}
.cute-button button[disabled] { 
  color: #aaa;
}
.cute-button button:focus::-moz-focus-inner { 
  border-color: transparent !important;  /* Firefoxでのドットフォーカスを避けるため */
}

 上記以外に、配布しているベーシックテーマのCSSには、一応IE6向けに、モダンなブラウザに似せたボタンアクションにするための記述も書いてますので参考に。とりあえずコメントアウトしていますが。

 結果として、それまでのこのAjaxボタン関係で使用していた.button-ownerとか.comment-expandとか.commentFormHereは不要になります。

 あと、1.6以下のバージョンと現行バージョンでは、カテゴリー定義ファイルとページリストの定義ファイルの形式が異なっているので、これを現行のものに対応させるための変換ページを用意しました。トップページのメニューバーの「Tools」にあります。

 1.6系からのバージョンアップに関しては、新規に最新バージョンをアップロードして、そこに既存のログなどを流し込むやり方をオススメします。既存のカテゴリー定義ファイルとページリスト定義ファイルは上記ページで変換した後にアップして下さい。

添付ファイル: DIFF080511.zipattachedIcon 

— posted by martin at 11:52 pm   commentComment [6]  pingTrackBack [1]

画像のドロップシャドウ ~ テスト

category-icon

 この辺に落ち着こうかな。

オオハシ
従来のノーマルタイプ。キャプションは画像の下に表示されます。

オオハシ
ポラロイド風。キャプションが画像のボーダー内に含まれるパターン

オオハシ
ドロップシャドウあり、ボーダーなしのパターン

オオハシ
ドロップシャドウなし、ボーダーありのパターン

オオハシ
ドロップシャドウもボーダーもなしのパターン。

 今回の試行で分かったことは、IE7のみに適用されると思っていたCSSハックが、実はOpera9.xにも有効だったこと。

*+html body div.shadow { margin-bottom: -15px; } /* just for IE7 */

 何かOpera9.27での表示がおかしいなと思ったら、このハックがOperaにも適用されていました(追記:XML宣言するとOperaにも通ってしまうみたいです)。なので、純粋にIE7のみをターゲットとしたい場合は、以下のようにすると良いらしい。

*:first-child + html div.shadow { margin-bottom: -15px; } /* just for IE7 */

 ちょっとググった感じでは、IE6とIE7とを一緒にハック対象とする方法が分からなかったんだけど、個別に書かないとダメかなぁ。

 近々、ドロップシャドウのまとめ記事を書こうかと思っています。

 


— posted by martin at 10:11 pm   commentComment [4]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0060 sec.
prev
2024.3
next
          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
31