秀丸マクロでZen-Coding
概要 Zen-Coding とは、CSSセレクタ風の簡単な記述を、複雑なHTMLソースへ素早く変換することを軸にしたコーディング支援ツールです。 例えば、div h1 aが<div><h1><a href=""></a></h1></div>になります。 その Zen-Coding を秀丸エディタでも利用できるようにすることをめざした秀丸マクロです。 本家にある機能のうち、「HTML生成」「生成したHTMLで既存のソースをラッピング」のみを実装しています。 そのほかの機能は別項で紹介するいくつかの秀丸マクロに任せ、連携していただく方針です。 インストール 秀丸エディタ（ver 7.00 以降のみで確認）を入れてください。 マクロフォルダのパスを確認します。秀丸エディタの [その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されているフォルダで
ブラウザを開かずに直接HTMLソースを見る方法
もしかしたら常識なのかもしれないけど、 今まで気づいてなかったので。 テキストエディタの「開く」でファイル名を指定するところに そのまんま URL を入力したら そこにあるソースを読み込むことができるのだった。 少なくとも TeraPad と Windows 付属のメモ帳ではできた。 何となくやってみたらできたので一応メモ。 追記 画像編集ソフトの「開く」で ウェブ上にある画像のURLを指定しても同じく開けました。 画像をダウンロードしてソフトで編集するとき、 ステップが一つ減るから楽かも。 Firefoxなら右クリックメニューに 「画像のURLをコピー」があるので便利。 というかこのメニューは そもそもこういう使い方をするためにあるのかな。
各HTMLバージョンのDOCTYPE宣言のサンプル集
当ページの概要 HTML,XHTMLで使えるDOCTYPE宣言(公開識別子とシステム識別子)などを分かりやすく使いやすくリストにまとめました。 各HTMLバージョンのDOCTYPE宣言(公開識別子とシステム識別子) HTMLでは、バージョンごとに使用できる要素(タグ)や属性、要素の配置のしかたについて厳密に定義されています。これはDTD(Document Type Definition:文書型定義)をDOCTYPE宣言で指定することで、そのバージョン規則に添って表示します。 簡単なメモ書きですので、参考までに。間違っていたらお教え下さい。 HTMLには以下のようなDTDがあります。目的に応じて使い分けてください。他にも大量にあります。 HTML 1.0 DTD HTML 1.0用のDOCTYPEなし HTML 2.0 DTD (RFC1866) [1994年に標準化] <!DOCTYPE
WEBデザインツール：カラーパレットを自動作成するサイト数々：Goodpic
This shop will be powered by Are you the store owner? Log in here
Firebug :: Add-ons for Firefox
Firebug は、Web ページを閲覧中にクリック一つで使える豊富な開発ツールを Firefox に統合します。あなたはあらゆる Web ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。 Firefox 専用 — 今すぐ Firefox をダウンロード
Firebug - Web Development Evolved
Thank you, Firebug. You made the web amazing for all! The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of
Mozilla Re-Mix: Firefoxに"Dreamweaver"ライクなHTMLエディタをビルトインするアドオン「Codetch」
FirefoxやThunderbirdはWEBユーザーの必須アイテム。 初心者からヘビーユーザーまで使える！便利でクールなFirefox拡張機能（アドオン）の使い方やカスタマイズ、Mozilla関連情報をどうぞ。 Adobe 「Flash Player」を緊急アップデート。 by hoge (07/16) Adobe 「Flash Player」を緊急アップデート。 by H.I. (07/16) ウェブページから余計なコンテンツを排除して読みやすく表示できるFirefoxアドオン「Tranquility Reader」 by しんちゃん (07/11) YouTubeのHTML5動画に表示される広告をブロックしてくれるFirefoxアドオン「YouTube Advertisement Blocker」 by はち (06/17) ウェブページ上の不要なリンクを非表示にできるFirefox
Mozilla Re-Mix: 表示ページを自由自在に編集してソースを取得できるFirefoxアドオン「Edit Page」
Webページの編集を行う場合や、参考サイトのソースを拾いたい場合、Firefoxなら表示→ページのソースなどでそれらのソースを表示、コピーして外部アプリで編集することになります。 このような作業は面倒なもので、編集→アップ→確認→修正などという具合にかなり面倒なことになる場合もあります。 そんなとき、表示されたアクティブページ上でそのまま編集できればかなり便利ですね。 Firefoxに「Edit Page」をインストールしておけば、そんな作業が少しは楽になるかもしれません。 「Edit Page」は、Firefoxで表示されているページを、ワードを利用しているかのごとく編集することができるアドオンで、ソースの取得や外部アプリの起動なしに表示ページを弄ることができるというものです。 アドオンをインストール後、編集したいページ上で、右クリックし、メニューから[Edit Page]を選択すればペ
RedLine Magazine : よく使うhtmlとCSSのソースセット
よく使うhtmlとCSSのソースセット 読んで字のごとく、よく使うhtmlとcssのソースセット。プロパティはよく使いそうなやつで値は全部空。自分用ストックだったりするので、もしコピペする場合は状況に合わせていろいろ追加やカットしてくらさい。 ナビゲーション部分用のソース サイトのナビゲーション部分によく使ってるソース。意外とこれ毎回書くの面倒なので個人的にこの雛形は気に入ってる。背景画像は通常時もhover時も全部まとめて１枚もの画像になってる前提。 <ul id="navi"> <li id="menu01"><a href=" " title=" "> </a></li> <li id="menu02"><a href=" " title=" "> </a></li> <li id="menu03"><a href=" " title=" "> </a></li> <li id="m
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
ページ配色を決めるのに便利な無料サービスいろいろ - GIGAZINE
まずは何も考えずに配色を考えたい人向けの「Color Wheel」から。 Color Wheel - ver 2.0.1 http://www.webwhirlers.com/colors/spinwheel.asp 「SPIN」をクリックすれば次々と配色が自動的にドンドン変わっていくので、お気に入りを見つければいいだけという超簡単仕様。各配色は背景や文字色などに割り当てられており、チェックマークを押すことで入れ替え可能。また、「HOLD」にチェックを入れればその色は「SPIN」を押しても変化しないようにできるので、気に入った色を見つけたらそれだけ固定して、さらに次の色も固定して入れ替えて…というようにすれば、いくらでも自分好みのカラーパターンを生成できるというわけ。 また、「Example1」以外にも「Example2」を押せば違うページレイアウトでの使用例も見ることができるので、同じ配
特殊文字一覧 - TAG index
文字参照には、文字実体参照と数値文字参照の2つの形式があります。 文字実体参照 キーワードで指定する形式です。 & に続いてキーワードを指定して、最後に ; を入れます。 &キーワード; 数値文字参照 番号で指定する形式です。 &# に続いて番号を指定して、最後に ; を入れます。 &#番号; キーワードについては、大文字と小文字が区別されるので注意してください。 文字実体参照で表示されない場合は、数値文字参照で指定すると表示される場合があります。 利用者の環境によっては、正常に表示されない文字もあります。
ハンディがあっても利用できるページづくり：Webアクセシビリティについて
様々な環境に配慮して、どんなユーザーでも使いやすい方法で提供されている情報はアクセシビリティ (accessibility) が高いと言います。アクセシブルなコンテンツづくりとは、ウェブでのコミュニケーションに誰もが参加できるよう設計すること。情報の利用者であると同時に提供者でもある私たちは、常にこの点に配慮していきたいものです。 なぜアクセシビリティか コミュニケーションとしてのアクセシビリティ：WCAG 2.1 1. 全ての機能と情報が誰にとっても認識可能であること 2. 全ての機能は誰にでも操作可能であること 3. コンテンツの内容、および機能が誰にとっても理解可能であること 4. 将来にわたってコンテンツの力を最大限に発揮できる技術を用いること 元祖ガイドライン：WCAG 1.0 アクセシビリティのJIS規格（2004年初出時の情報） JISの改定：X 8341-3:2010と20
Styleの「倉庫」
フォーム、それはINPUTをはじめとする入力欄やボタンの事です♪ マズはスタイルをいじくる前に、基本の基本技をいくつか紹介します♪ さて第一弾は、実際に入力欄やボタンを出す為の基本タグそのものです@(o^ｪ^o)@ 注1）フォーム、つまりINPUT系の入力欄やボタンです♪ 注2）赤い表示のところが変更できます♪ 尚ソースは↓見て下さいね♪ <input type="text" name="test" size="30"> ↑のタグの場合のフォーム（入力欄） <input type="button" value=" OK "> ちなみに見慣れた標準です(*ﾉωﾉ) ｲﾔﾝ さてそれぞれの属性の説明です♪ typeはフォームの種類を変える部分です♪ textなら入力欄、 buttonなら文字通りボタンになります♪ nameは入力欄ごとの名前を指定する部分です♪ size
[N] 問い合わせフォームがつくれる「The Form Assembly」
Make your own web formsというエントリーより。 Not only can you build your own web forms, but there’s also 130 form templates you can play around with, as well as eight different stylesheets. Lifehackerで、無料で問い合わせフォームを作ることができる「The Form Assembly」というサービスが紹介されていました。130ものテンプレートも利用できるそうです。 PerlやPHPなどで探せばフリーのプログラムがいくらでも見つかると思いますが、ASPで利用できるとなると手軽で良いです。早速、試してみました。 ちなみに料金プランを見ると無料版、有料版があります。 50登録まで、100登録まで、という方法と、毎月いくら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting
http://www.designwalker.com/2009/11/html5.html
文字を切り貼りした脅迫状みたいなものを作成するジェネレーター集
Sleipnirの薦め Hawkeye - 笑むなＡｉｋｏの『お玉杓子は飲み物です』
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
