RGBとカラーコードの変換ツール : 数値が何色か調べることもできます
ツールの使い方 WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツールです。 カラーコードをRGB値に変換したい場合は上の欄にカラーコードを入力してください。 RGB値をカラーコードに変換したい場合は下の欄にRGB値を入力してください。 このツールはカラーコード・RGB値どちらか一方のパラメータを編集すると、その内容にあわせて反対側のパラメータが自動的に書き換えられる仕組みとなっておりますので、即座に変換結果を求めることができます。 上側の入力欄がカラーコード。6桁もしくは3桁の16進数を入力します。 下側の入力欄はRGB値の入力欄です。0から255まで10進数の数字が入ります。 Rが赤色、Gが緑色、Bが青色を表しています。 RGB値は、入力欄の横にあるスクロールバーで調整することもできます。 そして、一番下にあるボックスに現
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
Tips/WebPage/class と id の違いとは？ - outsider reflex
意味の違い CSS では class セレクタも id セレクタも似たような使い方で利用できますが、そのせいか、 class と id を全く同じ意味だと思って混同していたり、「文字数が少なくて済む」からと id だけに統一している人がたまにいます。しかし、 class と id は全くの別物です。 class はその要素の分類を、 id はその要素の固有の名前を意味します。あなたの家で飼っている犬を、より細かな分類で雑種犬と呼ぶか、唯一無二の名前でポチと呼ぶか、そういう違いなのです。 使い分け id 属性は、「その要素に固有の名前を付ける」場合に使います。例えば、日記では以下のように使うことができるでしょう。 <ul> <li id="date20010819">2001/8/19 (Sun) 今日はお休み。</li> <li id="date20010820">2001/8/20 (M
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
Thimble by Mozilla - An online code editor for learners & educators.
Thimble was a code editor for people who love the web. Looking for Thimble projects? Users migrated their projects to the Glitch platform in 2019. If you’re looking for a similar experience, go check them out! Learn more about Thimble and the transition to Glitch below. Mozilla loves the web and people like you who make it. Find out how we can celebrate and protect it together! HistoryThimble was
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
HTMLの特殊文字 ： IT用語辞典
▼ ご意見やご指摘、追加希望用語などはこちらからお送りください (個別にお返事はできかねますのであらかじめご了承ください) 当サイト「IT用語辞典 e-Wordsイーワーズ」はIT（Information Technology：情報技術）用語のオンライン辞典です。コンピュータ・情報・通信などを中心とする各分野の用語について、キーワード検索や五十音索引から調べることができます。用語の意味や定義、概要や要約、略語や別表記、英語表記や綴り、フルスペル、読み方や発音、仕組みや役割、歴史や由来、語源、構造や構成、要素、特徴、機能や性能、諸元、規格や仕様、標準、原因や要因、手法や方法、方式、種類や分類、利点やメリット、欠点やデメリット、問題点、対義語や類義語との違い、用例や事例、具体例、画像や図表、関連用語、外部資料や別の辞典による解説へのリンクなどを掲載しています。 当サイトは株式会社インセプトが制
HTML5の要素を条件付きコメントなしでIEで使う - 徒書
今更ながら、ここもHTML5にしてみようかなという気持ちが湧いてきています。以前は、一旦公開した文書の形式を無闇に変えるのはよくないという思いが強かったのですが、個人のページなのだし色々と実験的なことをもっと試してもいいのでは、と思うようになったので。 さて、HTML5導入にあたり一番気にしていたのが、IEでHTML5の新しい要素を使う方法のことでした。今だと html5shiv を使って以下のようなコメントを入れるのが一般的になっているようです。 <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> しかしながら、HTML文書というのは様々な環境で利用されるための文書形式だと自分は考えているので、その中に(コメントとは言え)特定のブラウザのた
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
正しいコメントを書こう
HTML文書の中で、ソースを読みやすくするため、コメントをセクションの区切りとして用いている人は少なくないでしょう。しかし、コメントの書式は正しく理解されていないことが多く、誤った用法を頻繁に見かけます。実際に支障が出ることは少ないのですが、厳密なブラウザでは内容が読めなくなってしまうこともあり、注意が必要です。 コメントのきちんとした定義はHTMLのバージョンによって微妙に異なりますが、基本的には コメントは <!-- 注釈の文 --> という形式で、これ以上余計なハイフンを使っちゃだめ と理解しておくのがよいでしょう。（2016現在ではHTMLなら少し緩和されることになりそうです） HTML 2.0で定義されていたコメント HTML 2.0の場合、RFC 1866の"3.2.5. Comments"において次のように定義されていました： To include comments in a
GETとPOSTの使い分け - フォームデータの送信 -- ごく簡単なHTMLの説明
ブラウザからのデータデータは、特別な形式でエンコードされて送信されることになっています。画面に表示されるフォームのコントロールで入力する以外にも、隠されたデータの情報を送ったり、フォームを使わずに送信するなど、いくつかの方法があります。 目次： 作者の設定したデータを送る データ送信とURLエンコード フォームから直接メール送信 エンコードのタイプとファイル送信 GETメソッドとPOSTメソッド GETを使って直接データを送る 作者の設定したデータを送る input要素などで用意する「コントロール」はユーザーがそれを操作してデータを入力するためのものです。しかし、場合によってはHTMLの制作者が指定したデータをプログラムに送信したい場合もあるでしょう。このようなデータはユーザーが操作する必要はなく、ユーザーの目に触れないほうが都合がよいものです。そのために、input要素のタイプの一つとし
classとidの使い分けについて考えてみる | Blog hamashun.com
CSS Nite Vol.18の懇親会で行われたiwaimさんのプレゼンで、headerの部分は本当にidでいいの？という問いかけがありました。 多分、多くの人が行っているclassとidの使い分けは、複数回登場するかしないかだと思うんですけど、それはどうやら間違った基準なようです。 仕様書は？ そもそも、仕様書の定義としては、二つの違いはどうなっているのでしょうか。 id = name [CS] この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 class = cdata-list [CS] この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。 The global structure of a
シンプルなテキスト・HTMLエディタ Crescent Eve (フリーソフト)
Crescent Eve はシンプルなエディタです。 こだわりの基本機能とHTML編集機能を持っています。 【雑談】 ある日のふとした疑問 ～ HTMLを書く道具 ～ ある日、メモ帳等のテキストエディタでHTML書いている人が意外に多いことに気がつきました。 「多機能で優秀なHTMLエディタは沢山あるのに、なぜかな」 「もしかして、軽くてシンプルなSDI形式のHTMLエディタが求められているのだろうか」 「よし、作ってみよう！」 「あくまでシンプルに、テキストエディタとしても使えるようにして、タグはキーボードから自然に入力補完できるようにしよう」 「手作業でタグを打ち込んだら間違いが出るから、文法チェック機能をつけよう」 「文字コードの自動認識は、絶対失敗しないようにしよう」 ・・・というような考えから Crescent Eveを開発することにしました。 その後 公開以来、多くの方に好評を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Special Characters
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
The W3C Markup Validation Service
HTML4 で使える文字実体参照
TechCrunch
HTMLタグリファレンス（ABC順）