AtoZ 晴れ時々UTU

Open / Close

[CMSD/jquery/js] CMSDにて、アイテムがない時にはその親要素を表示させないようにする

04. Webデザイン 2011年1月14日 金曜日 17:45:45

<article>
<h3>その他</h3>
<ul>
<cmsd:entrylist name="publications" design="default" rows="100">
<cmsd:group key="cat" value="4" />
</cmsd:entrylist>
</ul>
</article>

とある場合、エントリーが何も無くてもarticle、h3、ulまで表示されてしまう。
ので、
<article id="others">
<h3>その他</h3>
<ul>
<cmsd:entrylist name="publications" design="default" rows="100">
<cmsd:group key="cat" value="4" />
</cmsd:entrylist>
</ul>
</article>

と、article(親要素)に例えばidをあたえ、
cssで、
div#main section article#others{
display:none;
}

と非表示にしてやる。
そしてjqueryの以下のjsを読み込ませ、エントリがある場合(この場合はliがある場合)には、親のarticleにdisplayというクラスを与え、
$(document).ready(function(){
$("article#others:has(li)").addClass("display");
});

cssにて
div#main section article#others.display{
display:block;
}

displayクラスを表示させる。

Open / Close

覚書

04. Webデザイン 2010年10月27日 水曜日 16:23:48

captchaをやめてjsでフォーム要素をはきださせるようにする

Open / Close

Webサイト制作

04. Webデザイン 2010年3月17日 水曜日 14:43:51

去年から個人でwebサイトの制作依頼をいただいてました…
つうか俺がやらせてください、ってお願いしたんだけど、
ようやく、ほぼfixできました。
いつも通ってる東三国の理美容室、brilliantのサイトです。
Nucleusを導入して、ほとんどの箇所をお店の方で更新できるようにしました。
東三国 理美容室 brilliant
東三国 理美容室 brilliant
ホントにアットホームで明るく楽しい理美容室でオススメです。
>>brilliant

Open / Close

Reset css

04. Webデザイン 2010年3月3日 水曜日 0:51:46

覚書。/*
RESET.CSS
html5doctor.com Reset Stylesheet
v1.4.1.0
Author: Richard Clark - https://richclarkdesign.com
2010-03-02 Changed by Brionac,inc. Azuma
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
em,strong,address{
font-weight:normal;
font-style:normal;
}
body {
line-height:1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
ul,ol {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
outline:0;
transition: all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
a:hover,
a:focus{
filter: alpha(opacity=80);
opacity:0.8;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #000;
margin:0;
padding:0;
}
*html body hr{
margin:-1em 0 0 0;
}
input, select {
vertical-align:middle;
}

Open / Close

CSSハックforFireFox覚書

04. Webデザイン 2010年2月9日 火曜日 16:03:42

複数のセレクターに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクターをカンマで区切ってグループ化 (Grouping) することができます。
しかし、グループ化したセレクタ群の中に、Web ブラウザーが未対応のセレクターが一つでも含まれている場合、グループ化した別のセレクターも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。
例えば、h2, div>p{ color:red; } のように宣言した場合、h2 要素と divの子要素の p 要素が赤い文字でレンダリングされます。しかし、IE 6 では子要素を表す > に対応していないため、p要素が赤い文字にならないばかりか、グループ化した h2 要素も赤い文字にはなりません。
このようにグループ化したセレクター群の中に未対応のセレクターが含まれている場合、セレクター群全ての宣言を無効化されることを逆手にとった CSS hack です。
div.sample { color:red; } の宣言を Firefox などの Mozilla 系 Web ブラウザーのみを対象とするにはdiv.sample, x:-moz-any-link { color:red; } の様に x:-moz-any-link をグループに加えます。
:-moz-any-link は Mozilla 系 Web ブラウザーに独自実装されている擬似クラスです。Firefox などの Mozilla 系 Web ブラウザーはこの擬似クラスに対応しているので、div.sample, div:-moz-any-link {} のようにグループ化されたセレクタ郡に :-moz-any-link が含まれていてもこの宣言は有効ですが、その他のWebブラウザーは :-moz-any-link には対応していないため、宣言が無効になります。
また、この例を応用し、Firefox のバージョンアップで追加されていった擬似クラスをグループ化に加えることで、そのバージョン専用を対象とした CSS の宣言を書くことができます。

独自実装擬似クラス 対応バージョン 意味
:-moz-any-link Firefox 1.0 以降 :linkまたは:visitedに該当
:-moz-read-only Firefox 1.5 以降 CSS3 Basic User Interface Module :read-onlyの先行実装。ユーザが内容を変えられない要素に該当
:-moz-broken Firefox 3.0 以降 画像が正しいものでない場合に該当
E:last-of-type Firefox 3.5 以降 兄弟関係のノード中、最後に現れる要素 E。独自実装ではない

div.sample { background-image:url(img/bg00.png); }
div.sample, x:-moz-any-link { background-image:url(img/bg01.png); /* Fx 1.0 以降に適用される */}
div.sample, x:-moz-read-only { background-image:url(img/bg02.png); /* Fx 1.5, 2.0 以降に適用される */}
div.sample, x:-moz-broken { background-image:url(img/bg03.png); /* Fx 3.0 以降に適用される */}
div.sample, x:-moz-broken, x:last-of-type { background-image:url(img/bg04.png); /* Fx 3.5 以降に適用される */}
div.sample, x:x { background-image:url(img/bg00.png); }

最後に x:x としたセレクターにはデフォルト (この例では div.sample { background-image:url(img/bg00.png); } と同じスタイル) のスタイルを適用します。これは、Safari 2 などの一部の Web ブラウザーがグループ郡に未対応のセレクターが含まれている場合でも無視しないための対策

元ネタFirefox 1.0, 1.5, 3.0, 3.5 用の CSS ハック

Open / Close

webサイト

04. Webデザイン 2009年9月26日 土曜日 20:11:59

個人的にwebサイト2本制作するお仕事をいただきました!
いただいた、というか、やります、やらせてくださいというか。
ありがたいことです。
ひとつはネットショップのデザインとベースコーディング、
もうひとつは、美容室のデザインからcmsの導入まで。
かわいいの創るぞ。

Open / Close

mixi経由

04. Webデザイン 2009年9月21日 月曜日 14:37:01

このtalkのページは、
携帯用のページも作成してて、
mixi経由でもそのページが見られるはずなんだけど、
なんだかうまくいってない模様…
なんでしたら、このページに直接アクセスしてみて下さい。
それで携帯用のページが見られるはず…
普通の携帯は持ってないので検証できてないんだけど、
なんか不具合あったら教えて下さい。
どんな風に見えてるか、教えてもらえれば…
スクリーンショットとか送ってもらえたらベストなんだけど…
なんとか対処してみたいと思います。

Open / Close

IE6/7で<hr />の高さを消す

04. Webデザイン 2009年9月14日 月曜日 17:06:23

ie6/7で<hr />を表示させず、高さも0にしたい場合、以下でできる。
hr{
  border:none;
  height:0;
  text-indent:-9999px;
  visibility:hidden;
}
* html body hr{
  margin:-1em 0 0 0;
  display:block;
}
*:first-child+html body hr{
  margin:-1em 0 0 0;
  display:block;
}

Open / Close

ZENphoto

04. Webデザイン 2009年5月10日 日曜日 22:49:02

ZENphotoの管理画面のレビュー。
adminログイン
ログインしていると、
閲覧画面の右上に「admin toolbox」が出ています。

続きを読む

Open / Close

アルバム

04. Webデザイン 2009年5月7日 木曜日 23:45:08

アルバムのページ、
使ってるシステム?がどうにもこうにも汚いソースを吐いて、
いじくるのがとてもめんどうだったので旧デザインのままだったんですが、
いいシステムを見つけたのでごそっと入れ替えました。
ZENphotoというやつです。

続きを読む

Open / Close

携帯サイトTips

04. Webデザイン 2009年4月27日 月曜日 18:14:12

仕事でケイタイサイトを構築中。
何故にこうもドメスティックなもんかとイライラする。
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
3キャリア対応携帯サイトXHTMLテンプレート
docomoが一番縛りが多いのでdocomoベースで作ってたら
それはそれで他が立たず…
結局どうすればいいのかよくわからない…。
おまけにphpのCMSなんかが入ってるからもう何がなにやら。
追記:
携帯サイトの作り方

Open / Close

04. Webデザイン 2009年3月27日 金曜日 15:17:51

簡単サイト構築、Jimdo。
Jimdoサイト
こんなもの
アカウントを作ってみたデモサイト
↑ヘッダーの写真とタイトルを変えて、
 レイアウトを変えて、「ニュース」のとこに記事を一個追加しただけ。
jimdo
仕事に使えるのかなと思ってテストしてみたけど、
仕事には無理。
でも、個人サイトにはピッタリ。
写真ギャラリーとか、動画とか、
ただのblog以上のことが、簡単にできそう。
しかも、ダミーのコンテンツが最初から入ってて、何ができるかわかりやすい。

Open / Close

テスト

04. Webデザイン 2009年3月21日 土曜日 19:13:04

携帯用のスキンをいじくってたら、
いつの間にやらコメントできなくなってる…
ご迷惑おかけします
コメントある方は、メールフォームよりお願いします。

↑なおりました。
そんかしコメントスパムのプラグインが使えなくなりました。
またコメントスパムきたらどうしよう…
結局今んとこ原因不明…

TOP