おまけでついてきたよっ！って言いたいだけです。
お久しぶりの更新で、あまりに酷い人の褌で相撲っぷりですが嬉しかったのでつい。
右のサンプルみたいな写真が500点ついてくるんで、僕のようなインドア派で手持ちの素材が少ない人にはピッタリですね！
利用に当たっては、用途がwebサイトのデザインのみに限定されるものの、1380円で1000px前後の素材が500点もついてくるっておトクですね。今月号は紙のほうがオマケです。
こんな過疎サイトでアフィっても意味ないからアフィりませんが、気軽に使える素材が少ない人はamazonとかで買ってみたらいいんじゃないかな。
題名にはあまり意味は無いです。たぶん書いてる本には書いてると思います。なので正確には
「僕の持っている 教科書には書いてない か、僕が見落としている XHTMLとCSS」
なのでニュアンス的にはちょっとした小技みたいな感じで受け取ってくれるとこちらも気が楽ですけど、いかがなものでしょうか。さて情けない逃げ口上もすんだことですので、本題に入ります。
リンクのアンダーラインを自分色で染めたい(調整・装飾したい)場合ってありますよね。そういうときはボーダーでアンダーラインを表現します。ですのでボーダーの幅やスタイル(実線、ドット、ダッシュ等)等で表現が可能です。(その他手書き風等のオリジナルの”飾り”を指定する場合は背景でやります)
1.が普通に指定したアンダーラインのあるリンク
2.飾りがnoneでボーダーの下が2pxのdotted
2.hoverの飾りがnoneでボーダーの下が2pxのsolid
文字と下のボーダーとの距離はline-heightかheightで調整します。その場合はdisplay: block;にする必要があるので少々クセがあります。
html内に＜img＞で画像を表示させた場合は必ずaltを指定する必要があります。このブログはaltが適当なんでけしからんです！最近ではもっぱらユーザビリティやSEOの要素として扱われる事が多いですが、純粋にちゃんと書いてた方が後々ソースを見直したときにも理解が早いですよね。
しかし色んな人の思惑や意図が絡み合って、どうしてもaltが長くなってしまいツールチップの表示が邪魔になることがたまーにあります。
そんなときは＜img＞の中にtitle=”"を入れましょう。そうすることでツールチップが表示されなくなります。ですが、本来の意味で考えると本末転倒になってしまうので積極的にはオススメできません。
僕がサイトを作る場合、基本的にXHTML 1.0 Strict+XML宣言で作ります作ってました。そうなると右の画像のようにFirefoxでは画像の下に意図しない隙間が出来てしまいます。
右の場合は特に問題ないのですが、装飾要素のある部位だと困ります。なのでそういうときはCSSでimgに対して
vertical-align: bottom;
を指定してあげます。こうすることで画像の下に表示されていた隙間は無くなります。
Firefoxはサイト全体が画面内に収まる場合はスクロールバーを表示しません(IEは縦スクロールバー常時表示)。縦にスクロールの必要がある場合にのみスクロールバーが表示されるので、制作側の大きいモニタでは問題なくても、一度に表示できない小さいモニタとFirefoxを使ってサイトを見ている訪問者は、ページ移動の度にスクロールバーが表示・非表示と切り替わってしまいます。
そうなるとページ移動の度にスクロールバーの幅だけ横にズレてしまうので、見ている人に何とも言い難い不安定感を演出してしまいます。サイトの縦幅が全ページ同じなら気にすることもないのですが、なかなかそういう風にはいきません。ですのでそういうときにはCSSに
html>/**/body { overflow-y:scroll;}
を記述することによってFirefoxでの縦スクロールバーの常時表示が実現します。これはIE7以外のモダンブラウザに適用されるようにCSSハックを利用しています。そしてこのハックはW3CのCSS Validatorには通りませんので注意してください。そもそもoverflow-y自体がCSS2.1に存在しないので最初から通らないんですが。
頑張って作ったサイトは自分の作品ですから、できるだけ色んな人に綺麗な状態で見てもらいたいですよね。
またなんか思いついたら書いてみます。
カンプ、またはモックアップ製作用のベースです。
IE7の中に10pxのグリッドが入ってます。「IEはいらねぇよ」って人もいるかと思いますが、まぁそう言わずに。
サイズは左から1100px, 1000px, 960px, 900px, 800px, 760px,と6種類が入ってます。あと縦は基本768pxなのですが、別レイヤー(初期不可視)で1200pxも用意してます。それをシフト押しながら上下に動かして好きな長さにしてください。
ブラウザ無しのカンプでクライアントにOKを貰ったものの、実際作ってブラウザ上で見せたら「なんかイメージが違う」と言われたという経験は誰しも一度はあるんじゃないかと思います。まぁ私たちはブラウザを見慣れてるんで大丈夫なんですけどクライアントはそうとは限りませんし、イメージが違う原因は他にもある可能性は高いですが、視覚化できるものはしておいたほうが良いですよね。
私は最初からこれを元に作るってよりは、作ったものをこれに当てはめるって感じで使ってます。だいたいの人は自分用ライフハックみたいなのを用意してると思うので、まだの人は良かったらどうぞ。
レイヤー構成はこんな感じです。IE buttonフォルダは、ブラウザの左上にある”戻る・進む”ボタンが3パターン入ってるだけです。
iebasesize.zip(358 KB)
お久しぶりです。なんか更新がとまってましたね。
何度か更新しようと思ったんですが、仕事の愚痴みたいな文章を書いては消してを繰り返してました。まぁとりあえず練習がてらに作ってたものからblogにのっけちゃいます。
お年寄りや、ブラウザの扱いに不慣れな人の為に、直接webページ内に”印刷する”ボタンを作ることもあると思います。今回そんな機会があったので数パターン作ってみた。
ぶっちゃけて言うとイメージソース(パクr…)はappleのサイトのアイコンを中心にその他諸々。でもやっぱ全然似てないんですね。てかこれプリンターに見える？大丈夫かな…ｗ 結構心配です。
使い方としては以前乗せた小さいPDFとかのアイコンみたいな使い方で
な、感じを想定したサイズです。良かったら使ってください。
ちなみに上のロゴを変えました。今まではblogのテーマを画像を使わない縛りで作ってたんで、CSSでフォントをArial(たぶん)を指定してたんですが、blogや配布物等の全てのフォントをMyriadに統一しようかなって事で画像にしてみました。
まぁほとんど見た目は変わらないんだけどｗ
今使ってるwordpressのテーマは練習がてら&ベースとして作ったんですが、プラグインを調べて色々乗せていく間にミスって＜h1＞＜h2＞＜h3＞の次に＜h4＞を飛ばして＜h5＞が出てくるみたいな事になってるので、全部書き直したいんですけどね。
まぁ次は画像を上手につかって、もっと見栄えのするテーマが作れたらいいなと思っております。
yamadaさんのところで紹介してる奴を見て触発されて作ってみました。
なんかシャンプーハットに見えてきたけど、CDですよ。
なんか円の上らへんとかギザっちゃってるしもうあれなんですが放流。
下の段はなんか安いCD-Rみたいな感じの色ですね。