HTMLなどのソースを綺麗に表示するSyntaxHighlighterが2.0になってた
SyntaxHighlighter 以前からソースコードを見せるときはこれを使っていたのですが、バージョンが2になっているのには気づかなかった。２にバージョンアップして、表示が良くなったので、すぐにここでも使えるようにして導入してみた。 なにやら使い方が変わっている 以前はclassともう一つ設定することでsyntaxhighlighterが使えたけど、今回はclassだけでいいみたいだ。でも、デフォルトのままだと文法エラーになる記述が必要のようだ。おまけに以前の設定を全部変えないと使えないというデメリットも。。。 このバージョンアップから、class="brush:js;"のようにしないと使えないらしい。ってことで、以前の状態でも使えるように、こんなスクリプトを最初に読み込ませてみた。 $(function(){ $('pre.js').removeClass().addClass('b
過度なCSSリセットなんていらない！ - [NO CSS RESET]
No CSS Reset - Snook.ca 『CSSリセットなんかいらないわ！』 というような内容のエントリーを見つけたので読んでみた。 個人的にも、必要以上のリセットなんていらないよって思っていたので、 僕の思うCSSリセットについて書いておこうと思う。 今後はCSSリセットは減っていく by大藤 CSSリセットを使うサイトは、今後減っていくでしょう。 という話を聞いたのが去年の末くらい。 昨年の札幌のCSS Niteにて大藤さんが話したことだ。 そしてその後の話ではリセットをしていないサイトも増えているとか？ 先月の東京でのセミナーに参加していないので、詳しくはわからないのが残念。 CSSリセットは必要か？ ここからは僕個人の見解だけど、 ブラウザ間の相違をなくすためのリセットは必要だと思う。 仕事として締め切りがあって制作をしているサイトは特にそうだ。 納期がまでの期間が限られて
![過度なCSSリセットなんていらない！ - [NO CSS RESET]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e8928853d3cfdd5dd1ab489c59313e6ee7794a89/height=288;version=1;width=512/https%3A%2F%2Fh2ham.up.seesaa.net%2Fimage%2F20071020_138961.jpg)
CSSで制作するメリット？
CSSで組むことのメリットとか｜CSS HappyLife いつも読んでいる「CSS HappyLife」で、 『CSSで組むことのメリットとか』というのがエントリーされていた。 CSSとXHTMLでサイトを作るメリットってなんだ？ って考えたら、たしかにいつも制作側の視点が大きい気がする。 結局のとこと、制作側のエゴなのか！？ 僕もなぜCSSで作るのかとかを考えてみた。 制作者>クライアント>ユーザー せっかく色んなメリットがあるのに、その恩恵を得られるのは、きっと、 制作者>サイト権利者（企業とか）>ユーザーみたいな感じだよね。 CSSで組むことのメリットとか｜CSS HappyLife 確かにCSSのメリットって、制作側に沢山あるなって思う。 特にデザインの変更とかちょっとした変更の時は、 XHTMLはソースが見やすくなっている分、 どこを修正したらいいのかすぐわかる。 CSSで考え
HTMLソース内のコメントを見やすくする方法
HTMLを書いていると、 自分以外の人が見たときにも少しはわかりやすくするように、 コメントを入れるようにしている人が多いと思う。 <!-- ここからheader --> というようなコメントを入れたりしていると思うけど、 ソースの量が多くなて来ると、たとえ文字色を変えたとしても、 一行だけのそれを見つけるのってちょっと面倒になって来ませんか？ それを少しだけ見やすくする方法を紹介します 見やすくするには ものすごく単純なことなのですが、 コメントに入れている文字の前に「●」もしくは「■」を入れるだけです。 Macのテキストエディタとかでみただけだと、 ●も■もちょっと小さくて見辛い場合があるのですが、 ブラウザでソースを表示したりするときはとても見つけやすくなります。 <!-- ●ここからheader --> 塗りつぶされているのがポイントで、 通常の文字やタグは細いので、 一目見ても塗
Another HTML-lintとHTML Validator
先日、ValidなHTMLを書くとかうんたらかんたらってエントリーを書いたのですが、ブクマコメにも書いているように、あまりにもひどい内容だったなーなんて思い、ほぼ改訂。言いたいことだけに焦点を絞りエントリーしなおしました。 いろいろお恥ずかしい文章を書いてしまい、申し訳ないです。 最初はAnother HTML-lintとHTML Validatorのことについても、触れたのですが、自分がうまく説明できない状態（つまり不理解状態）でしたので、ここで復習をかねて、それぞれがどのようなツールなのか、ものすごく簡易的にまとめてみた。 Another HTML-lintとは DTDに則した文法のみをチェックするのではなく、アクセシビリティガイドラインに準拠した項目や作者が望ましくないとした項目(大文字小文字の統一についてなど)までチェックを行う。またチェック結果が点数で出力されるのも特徴の一つであ
初心者がXHTMLを上達するためのポイント
初心者がXHTMLのマークアップを覚えるときに、 『コレをおさえておけば大丈夫！』 というポイントをまとめてみました。 マークアップするための基本も含めて、 上達するためのポイントは以下の通り。 １．タグは小文字で書く２．終了タグを入れ忘れない３．テーブルレイアウトやフレーム仕様にしない４．表示の指定を直接組み込まない５．表示の指定を目的に空の要素を使わない６．作るときはXHTML1.0 Strictの文法で７．入れ子にしたときはタグの終了順序を間違えない８．divの入れ子はなるべくしない９．divやspanを乱用しない。10．空要素の最後のスラッシュ(/)を入れ忘れない11．インデントなどを使い読みやすいソースにコードにする12．適度にコメントを入れておく13．最後に必ずバリデートしてみる １．２．７．10は最初はありがちな間違えだ。 ×→<BODY> ○→<body> ×→<p>あいう
初心者がHTMLとCSSを覚えるおおまかなポイント
最近僕の周りで、「HTMLやCSSを勉強し始めた」 という人が何人かいました。 まだ僕も勉強の身なので、偉そうなことはいえないですが、 HTMLとCSSを勉強するためのポイントを書いておこうと思います。 Web標準って？ Web標準(Web Standards)ってのは、 「Webで標準的に利用される技術の総称」であって、 主にW3Cが規定している。 昔は「テーブルレイアウト」って言われる、 テーブルタグをフルに用いてサイトを構築しているとことがおおかったけど、 今ではWeb標準を採用した正しいHTMLとCSSで構築していく傾向にある。 Web標準でいることがアクセシビリティやユーザビリティ、 SEOやメンテナンスなどに活かしていきやすいからである。 Web標準でのHTMLとCSS Web標準でサイトを作るということは、 文書構造と視覚表現は分離して設計する。 つまり、HTMLとCSSは分
jQuer基礎：深い階層のタグを指定する方法
jQueryをもう一度基礎的なことから学ぼうかな、 なんて考えていたので、勉強がてらエントリー。 idとかclassを指定していなくても、 特定の階層のタグを指定すべきときがある。 そんな場合の方法をご紹介。 深い階層（何重もの入れ子）のタグを指定する方法 階層を$("div > p")で指定すると、 divに囲まれたpに適応となる。 この■ > ●という構造はさらに深く指定できて、 ■ > ● > ▲という風に、「>」でどんどん階層を深くしていける。 このことをふまえて、サンプルを作った。 Preview JavsScript $(document).ready(function(){ $("div > div > div > div > div > div > div > p") .css("border", "1px solid gray"); $("div > div > div
float関連の問題で覚えておくべき５つの対策
CSSのfloat関係って、基本的に覚えておくべき事ですが、 動作がいまいちわかり辛かったり、バグが多かったりと、 float一つとっても覚えておくべきことって多いと思います。 なのでfloat関連の問題で覚えておくべき解決方法や 回避方法のことなどについてをまとめてみた。 １）floatしたボックスの下にコンテンツがこないようにする 写真の横に文字をもってきて、その文字が多ければ 写真の下にも文字をもってくる・・・というような場合は、 単純にimgにfloatをつけるだけでできるのですが、 コンテンツが下に来ないようにしたい場合はどうしたらいいか。 ■例１ー１（imgにのみfloat:left、下に回り込む） ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキス
CSSのpositionのまとめ
CSSのpositionのプロパティに、fixedというのがある。 これは指定の部分を固定配置にして、画面がスクロールしても、 画面の同じ位置に表示させておくものである。 ところがこのプロパティ、IE6だとうまく固定されない。 CSSの設定の仕方で実現できるようなので、メモエントリー。 positionプロパティ まずはpositionプロパティを見てみよう。 positionのプロパティ、よく使うのはabsoluteやrelativeで、 他にもstaticとfixedというのがある。 今回の説明は解説サイトを参照します。 ■static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 position－スタイルシートリファレンス ■relative 相対位置への配置となります。positionプロパティでst
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
