インターフェイスのデザイン、クローズやアローなどコントローラーのカスタマイズが可能な画像を拡大表示するLightbox風のスクリプト「ColorBox」を紹介します。 ColorBox 拡大表示できるのは画像のほかにも、インラインコンテンツ、外部コンテンツに対応しており、AJAX表示、画像ギャラリーにも対応しています。 デモでは、4パターンのカスタマイズが紹介されています。
インターフェイスのデザイン、クローズやアローなどコントローラーのカスタマイズが可能な画像を拡大表示するLightbox風のスクリプト「ColorBox」を紹介します。 ColorBox 拡大表示できるのは画像のほかにも、インラインコンテンツ、外部コンテンツに対応しており、AJAX表示、画像ギャラリーにも対応しています。 デモでは、4パターンのカスタマイズが紹介されています。
コーディングスピードはまだ上がる!! Zen-Coding カスタマイズ 2011-01-20 コーディング速度が"3倍!10倍!上がる"と言われてる Dreamweaver Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js Aptana [任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js") Notepad++ [Notepad+の場所]/plugins/NppScripting/include/Zen Coding.js HTMLの言語を修正する(ついでにインデントも) 例えばhtml:xsで展開す
めんどうくさがりの新米ブロガーが1日/10,000PVを達成した方法 2011-01-18 "ブロガー"といったら大げさかも知れないですが、ブログを本格的に始めたのが、2010年12月9日。 ブログを書く前の情報収集 ブログを書く前に情報収集を行います。 複数のニュースサイト、ブログのRSSに登録する。 twitterをする。 1、RSS 「RSSに登録」はブログを始めようと思う以前の3年前から購読しています。 最初は1日/20件程度の記事を読むことからスタートし、現在では150サイトから平均1日/200件ほどの記事に目を通しています。 毎日RSSを読むことで、Webに関する知識とブログを始める時のノウハウをある程度持った状態で始めることができました。 ブログを始める時にRSSで取得した参考になった記事(思い出せる範囲) 優れたライターになるための73の方法(SEO Japan) はてブと
非常に緩いライセンスです。 1999年までのBSDライセンスには、初期開発者を表示する宣伝条項が含まれていました。 現在はこの宣伝条項のない新しいBSDライセンスを修正BSDライセンス (New BSD License)あるいは三条項BSDライセンス (3-clause BSD license) と呼ばれています。 BSDライセンスをベースに作成されたBSDスタイルのライセンスも多く存在します。 例として、Apache Software License, Sendmail License, PHP License, Python Licenseなど多く存在します。 三条項BSDライセンスの表記例 三条項BSDライセンスのテンプレートがありますので記載致します。 以下のような表記がある場合、三条項BSDライセンスとなります。 Copyright (c) <YEAR>, <OWNER> All
この項目には、一部のコンピュータや閲覧ソフトで表示できない文字(後述にて記載されている記号など)が含まれています(詳細)。 約物(やくもの、英: punctuation mark)とは、言語の記述に使用する記述記号類の総称で、専らフォントなど組版を意識して使われる用語である。 具体的には、句読点・疑問符・括弧・アクセントなどのこと[1]。 元は印刷用語で、「しめくくるもの」の意。または、煉瓦・タイルなどで、縁に配置するために他と形状を変えてあるものを約物(「役物」とも書く)と称する。 約物は普通発音されないが、慣用的に用いられたり、文に意味付けを加えたり、音の表現でしかない平仮名や片仮名で表現しきれない意味付けを表現するのに使われる。 マークアップ言語とも似ているが、マークアップ言語は形式言語であるのに対し、約物の一般的な使い方としては、自然言語の一部として、それなりの約束事はあるものの厳
ブラウザで表示を確認しながらCSSを組む際に、一番便利なツールはやっぱり「Firebug」なのですが、どうもFirebugは高機能すぎて動作が重い気がします。 ただCSSの各プロパティを画面上で見たいだけなんだケドなぁ、という時にちょっと便利なCSSデバッグツール「XRAY」です。 XRAY ブックマークレットタイプなので、準備はコチラのサイトからツールバーなどに登録するダケ。 以降はクリックひとつで起動します。 確認したい箇所をクリックすれば、各プロパティの値やID/クラス名が表示されます。 HTMLの構造を追いながら確認することもできます。 とても気軽で便利です。 都合のいいコトにIEもSafariもイケます。 あと、Flashのデバッグツール「Xray」もas3に対応して大変便利。
よくHTMLコーディングのとき、画像のaltは設定するんですが、titleはLightbox系のAjaxやTooltipを使用する時ぐらいにしか気にしていませんでした。最近HTML5のコーディングを始めたので、ついでにこのあたりの基礎も勉強しなおすか、ということでAltとTitleの違いについてまとめてみました。 Alt これは画像の代換用の属性。なので、画像が表示されない場合や音声読み上げ、テキストブラウザなどに対処するために使う。 ですので、IEなどで画像の上にマウスカーソルをもっていくと、Altのテキストが表示されますが、それように使用するためのものではありません。 HTML5ではさらに厳格に規定されているようです。 簡単にまとめると、イメージのタイトルを alt 属性に入れるのではなく、そのイメージが表すものを言葉で説明した文章を入れなさい、ということです。画像が使われる状況にもよ
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
head要素の子要素 <base /> href属性必須 空要素 <link /> 空要素 <meta /> content属性必須 空要素 <object>-</object> 他の内容よりも param要素を先行させるべき param要素 ブロックレベル要素 インライン要素 テキスト <param /> name属性必須 空要素 <script>-</script> type属性必須 スクリプト(PCDATA) <style>-</style> type属性必須 スタイルシート(PCDATA) <title>-</title> head要素内に必ず1個だけ定義 テキストのみ(PCDATA) ブロックレベル要素 <address>-</address> インライン要素 テキスト <blockquote>-</blockquote> ブロックレベル要素 <div>-</div> ブロックレ
iPhone/Android向けサイト制作の基本を学ぶために、今回は実際に手を動かしながら非常に簡単なWebページを作ってみましょう。あわせて、スマートフォンサイト制作に最低限必要な制作環境(エディターとWebサーバー)についても紹介します。 用意するもの1:エディター HTMLを編集するのに必要です。使い慣れたソフトで構いませんが、もしなければ次のようなものを使うとよいでしょう。 ・Em Editor / Windows / 4000円(税込) http://jp.emeditor.com/ ・秀丸エディタ / Windows / 4200円(税込) http://hide.maruo.co.jp/ ・TeraPad / Windows / 無料 http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html ・JEdit X / Mac /
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
CSS の小技として、<dl>要素(定義リスト)を表のように見せる書き方を解説します。 当サイトでも更新案内など、デフォルトのスタイルシートでそのような表示になるようにした定義リストが幾つもあります。 CSS が対応していないか対応が不充分な環境, 携帯端末など非PC環境, 及びユーザスタイルをご利用の場合には表のように表示されない場合があります。 はじめに。 定義リスト(<dl>要素)をわざわざ表形式で表示させなければならない必然性は確かに無いかも知れません。 先ず、定義リストを表(テーブル)と較べた場合の利点を見てみましょう。 定義リストは記述が容易である 表(テーブル・<table>要素)の場合には <table>要素 <thead>要素, <tfoot>要素または<tbody>要素(必須ではない) <tr>要素 <th>要素または<td>要素 と言うように、要素を三重ないし四重にし
丸数字(丸付き数字)「①②③④⑤」を機種依存文字ではなく『数値文字参照』で入力する方法の紹介です。 丸数字(丸付き数字)の表記 丸数字(丸付き数字)の表記 ①②③④⑤⑥⑦⑧⑨⑩ ⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ 丸数字(丸付き数字)の入力方法 丸数字(丸付き数字)をHTMLで記述する場合は、下記のように記述します。 「①」の箇所が、ブラウザに表示される際に「①」となります。 表示 数値 文字参照 表示 数値 文字参照
Simple Toggle with CSS & jQuery demo デモではバーをクリックすると、パネルがスムーズに開閉します。 それぞれのパネルは個別に開閉するため、同時に開いた状態にすることも可能です。 バーはH2要素、パネルはdiv要素で実装されており、パネル内には画像やテキストなどを自由に配置することができます。 HTMLの基本構造 <textarea name="code" class="html" cols="60" rows="5"> <h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div> </textarea>
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery+ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページ アコーディオンのロジックは下記の通りです。 最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。 クリックをすると。 クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。 「hidden」(閉じた状態)のアイテムをクリックすると、 全てのアイテムから「active」を取り去り、閉じます。 クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。 ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row
Webページでは普通、マウスでドラッグするとテキストを選択することができるが、JavaScriptやスタイルシートを使うことで選択を防ぐことができる。 ただし、これはサイトの文章をコピーさせない目的で使うことは推奨しない。 紹介する方法でドラッグによる選択を防いだとしても、Ctrl+Aの全選択を防ぐことができないことが多く、ソースを表示させればコピーできてしまう。 さらに、文章をコピーできないサイトは不便で、ユーザに不快な思いをさせてしまう可能性が高い。 このドラッグによる選択をキャンセルする方法は、JavaScriptなどでドラッグで特殊な効果を表現する際に、通常の選択はしてほしくないという場合などに使うと良い。 例えば、テーブルのセルをドラッグで選択するサンプルのような場合がある。 これでテキストを選択してしまうと、おかしく見えてしまう。 ドラッグによる選択をキャンセルす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く