CLEditor is an open source jQuery plug-in which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site. Live Demo Go ahead, take it for a test drive. Highlight some text and click some buttons. The following demos are a great source for code samples and examples of how to use plug-ins.

「プレビュー」ボタンを押すと、表示内容と表示方法を確認できます。 問題なく表示されたら、「コードを取得」ボタンを押してください。Javascriptのコードが表示されます。 あとはそれを表示させたい場所へコピペしてください。 URL RSS FeedのURLを入力してください。 サイト情報の表示 サイトの情報を表示するか選択してください。 タイトルと概要を表示する タイトルのみ表示する 表示しない 表示する記事の件数 表示する記事の数を決定してください。(0にすると、最高20件までの記事を表示します。) 表示する記事の文字数 表示する記事の文字数を決定してください。(0 = 全文を表示しない　n≧1 = 始めからn文字目ぐらいまで表示する) 例）日本語50文字なら100と入力。 アイテムの表示エントリアイテム（画像など）の表示を選択します。 画像を含むすべてを表示 テ

構造と見た目の分離の必要性 HTML は Markup (意味付け)する Language (言語)です。例えば文脈のなかで、「ここは見出しですよ」「ここは段落ですよ」などという感じに「意味付け」を行い、文書構造を記述するための言語です。 ところが HTML は Web ページのレイアウト目的に使う仕様が多数盛り込まれ、その簡便さ、習得のしやすさと柔軟性から、本来の「意味付け」以外のレイアウトや見栄えに関する要素が多く使われていました。 それでは本来の HTML の目的に反するということで、「見た目」の部分を担当する CSS が策定されました。 建築物に置き換えるならば、きれいな骨組みの建物(HTML)に壁の色を塗ったり窓の形を変えたり(CSS)という感じでしょうか。いくらきれいな色を使っていても設計ミスの建物では使い物になりません。文書でも同じことが言えるもので、プレーンに理解しやすい文

HTML/XHTMLマークアップ・CSSコーディングサービス - ciqlie（シクリエ）では、コーディングガイドラインに基づいたHTML/XHTMLマークアップ・CSSコーディングを行います。このページではコーディングガイドラインの一部を掲載しております。 案件によってはガイドラインと一部異なる設計・実装を行う可能性がございますのであらかじめご了承ください。 ディレクトリ構成 命名規則 HTMLマークアップ CSSコーディング アクセシビリティ ディレクトリ構成 html ├common/ │ ├css/ │ │ ├import.css [各CSSファイル読み込み] │ │ ├common.css [各ブラウザスタイル調整定義] │ │ ├structure.css [サイト構造定義] │ │ ├editorial.css [サイト構成定義] │ │ ├component.css [サイ

1：coliss （1）「coliss」とは？ 「coliss（コリス）」さんは、Web制作に役立つ情報を提供する有名なサイトのひとつです。 とくに海外のWeb制作情報を翻訳、紹介する記事が多く、非常に多岐にわたる情報を提供していらっしゃいます。 （2）おすすめの記事 例えば、CSSについては、おもしろいテクニックや、ブラウザ間の差異をうめるような方法、最近であれば CSS3関連のネタなどですね。 『CSS3で何ができるの？という時にみておきたいサイト集』 『上級者向け、スタイルシートのテクニック集』 『クロスブラウザのためのHTML/CSSのテクニック集』 『いろいろな問題を解決する1行のスタイルシート集』 人気のブログツール「WordPress」の情報も、充実しています。（大半は、プラグインの紹介などが多いのかな） 『WordPressの設置後、すぐにやっておきたい10の作業』 『使用

PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"

CSS Nite in FUKUI, Vol.3のミニセッションで、「これからWebデザインをはじめたい人向けの学習プラットフォームについて」と題し、短大での実践と地元のコミュニティについてお話させていただきました。 その中で、短大での授業で採用させていただいているProgressionについても紹介させていただきました。 （10月31日に参加させていただいたWCAN mini ActionScript Vol.13「名古屋でProgression！」では、本発表の一部（短大での実践部分）を拡充し「Webデザイン・ビギナー向けプラットフォームとしてのProgression」というタイトルで発表させていただきました。） Continue reading YouTubeのアノテーション機能を使って、コンポーネントスタイルでのビデオチュートリアルを作ってみました。 ビデオチュートリアルの制作手順

Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. I stumbled upon the notion that PNG images show up correctly in a VML fill element while working on DD_roundies. Thereafter, some Googling revealed that a few people had already known about this. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript fi

日本のWebデザインってあまりトレンド というのは無いような気がします。なんと言うか 見易さとか実用性メインでデザインは結構 シンプルだったりしますし、日本人に合ってる のかもしれないですね。そんな訳で日本人の 感性で作られた商用利用もOKの国内の Web素材配布サイトをまとめてメモしておきます。 僕自身がいいと思ったサイトを厳選してご紹介します。順不同。 サイトごとに利用規約が若干違うので重要な部分はメモしますが、ご利用の際は必ずご自身の目で利用規約ページをご確認下さい。問題が起きても当方は責任負いかねます。利用規約ページがある場合はそのページにもリンクを貼っておきます。 デザイン素材.com アイコンがメインでファイルはPNG。ネットショップ素材が中心で使いやすいデザインが沢山あります。 加工、商用OK、印刷物、ソフトウェアでも可能、Webデザイナーも利用可能。再配布、２次配布は不可。

cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か

先日、SyntaxHighlighterを導入し、そのあと一部を修正しました。当ブログ（FC2ブログ）にそれとは別のjavascriptを導入しようとしたのですが、 どうしても動かずしばらく悩みました。 いろいろと試した結果、テンプレートhtmlの<head>・・・</head>内に<script>タグを記述するわけですが、後から記述したjavascriptのみが動くようです。 それで、調べてみるとSyntaxHighlighterのコアjs（shCore.js）と導入しようとした別のjavascriptのソースに「window.onload」 の記述があったのが原因だったようです。 参考：to-R - 複数のjsライブラリを利用する際にonloadを書き換える方法 to-Rさんのサイトを参考にさせて頂き何とか2つのjavascriptを動かすことが出来たのでその方法を御紹介致

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 タブ・メニュー作ってみました。使いまわしを考慮してパッケージ化に挑戦。JavaScriptを切っているときは、ページ内リンクとなります。 HTML <ul id="tab"> <li class="present"><a href="#page1">Page_1</a></li> <li><a href="#page2">Page_2</a></li> <li><a href="#page3">Page_3</a></li> <li><a href="#page4">Page_4</a></li> <li><a href="#page5">Page_5</a></li

IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。

サイトマップなどによさそうな、1ピクセルの背景画像を使用してリストの構造をビジュアル化するスタイルシートをCSS-Tricksから紹介します。 Style a List with One Pixel demo 構造化は入れ子のリストにも対応しており、上記デモでは三階層分のリストとなっています。 構造化を明示する罫線は1x1ピクセルのグレーの画像で、横線と縦線は背景を繰り返して配置しています。

webdesigner depotで、商用でも無料で使えるベクターアイコンが紹介されています。 The icons are completely free for personal and commercial use and they’re being released exclusively to all our readers. とのことで、個人利用・商用利用ともに無料になっています。 AIファイルも入っているので、使いやすいのではないでしょうか？ 矢印やノートやカレンダー、パソコンといったオフィス系アイコン、カートや配送車などのEC系アイコンがたくさん入っています。 ぜひダウンロードしてみてください♪ » 200+ Free Exclusive Vector Icons: ‘Primo’ 気が向いたのでCSSを整えて、inputとtextareaにborderを指定しました。pad