HTMLのタグちゃんと使おう
初めに Team DELTA の三浦です。 昨年のアドベントカレンダーでweb 制作から開発領域に足を踏み出している話を書きました。 React で書かれたスマートクリニックシステムの UI 調整をメインでやっています。 アドベントカレンダー以降も Team DELTA として情報発信していくぞ！ということで、今週は、自分が UI 調整をする中で気づいた、マークアップで気をつけたいことの記事を書きました。 どんな人に読んでほしいか まずは自分（戒めも込めて） そして、どちらかというとサーバー側をメインで書いていて、あまりマークアップに触れてこなかったという方にも、参考になる部分があれば幸いです。 どんな内容か なるべく適切なタグを使おうというテーマです。WAI-ARIA のようなアクセシビリティには細かく踏み込んでいません。 誤っている内容があれば、（優しめに）ご指摘いただきたいです！ H
HTMLカラーコード
HTMLカラーピッカー 縦のスライドを動かしてカラーを選択し、左のマスをクリックして好きなカラーキャストのHTML カラーコードを入手します。 HTMLカラーコードの決まり 「この文字と数字の奇妙な組み合わせには何か意味があるのかな。」とお思いかもしれません。その通りです。このように決まっています。 HTMLコードのフォーマット 各HTMLコードには、「#」の記号と6つの文字や数字が含まれています。これらの数字は、16進法で表されています。例えば、16進法の「FF」は、10進法の255を表しています。 記号の意味 HTMLカラーコードにある最初の2つの記号は、赤色の濃さを表しています。00が最も薄く、FFが最も濃くなっています。3番目と4番目は緑色の濃さを、そして5番目と6番目は青色の濃さを表しています。ですから、赤、緑、青の濃さの組み合わせで、自分の望み通りの色をほぼ何でも作ることができ
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、 Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、 HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、 HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だ
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
モバイルアプリ用UIコンポーネントのHTML/CSSソースコードを生成してくれる「Onsen CSS Components」、アシアルが公開
モバイルアプリ用UIコンポーネントのHTML/CSSソースコードを生成してくれる「Onsen CSS Components」、アシアルが公開 モバイルアプリケーションの開発でもっとも手間がかかるのが、ユーザーインターフェイスの構築です。例えばHTML5でモバイルアプリケーションを開発する場合、適切なUIコンポーネントを美しい外観と美しいレイアウトで実現するために、HTMLとCSSを駆使し、何度も試行錯誤しつつ開発を進めていくことになるでしょう。 そうした手間を軽減できるサービスが公開されました。アシアルの「Onsen CSS Components」です。あらかじめ一般的なモバイルアプリケーションのUIパターンやUIコンポーネントが用意されており、HTMLとCSSのソースコードをダウンロードできるようになっています。 上記は一般的なUIのさまざまなパターンが用意された画面で、このパターンに対
Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ - 聴く耳を持たない(片方しか)
このエントリーはGraphical Web Advent Calendar 2013 への参加記事です。 今日は12月3日、ということで Advent Calendar の3日目は私id:rikuoが担当します。今回はSVG画像ファイルを1バイトでも削るためのコードゴルフのTipsを紹介していきます。 コードゴルフって？ まずコードゴルフとはなにか？の説明から。 コードゴルフとは任意のソースコードを出来るだけ短く書くことを目的にしたものです。そのコードの動作を損なわなず、かつ可能な限り短縮して記述する手法を試行錯誤していく様子が、ゴルフのように少ない打法で競うところに似ていることからこのように呼ばれています。 またそれを競技としたコンテストも催されていますね。 画像のファイルサイズ低減策 JPEG、GIF、PNGといったビットマップ画像であればファイルサイズを低減する方法やソフトウェア・ツ
HTML5技術者の能力を測る「HTML5プロフェッショナル認定試験」、2014年スタート
「Steave JobsはITからクリエイティブに、映画監督のJames CameronはクリエイティブからITに進出し、ITとクリティティブが融合する時代になった」LPI-Japan理事長 成井弦氏 HTML5は次世代のWeb標準プラットフォームとして注目されており、今後はHTML5で記述されたゲームや、モバイルアプリケーションが急速に普及すると予想される。しかし今までは、HTML5を扱う能力を測る基準がなく、技術力をアピールしたい技術者、評価したい企業、双方にとって問題だった。 そこで登場したのが、HTML5技術者のデザイン、設計、構築に関する体系だった知識とスキルを、中立的な立場で認定する本試験だ。試験プログラムは、HTML5活用を推進する企業やHTML5コミュニティの協力を得て、オープンコミュニティの枠組みで開発されたという。 試験は、静的なWebコンテンツをデザイン・作成するスキ
float段組の基本
簡単なfloatの段組練習です。慣れて来たら、いろいろ応用してみて下さい。 注）floatを指定する場合はwidth指定で幅を指定するように心掛けましょう！ ボックスを並べる boxAとboxBを左右に並べます。形式上boxの幅と高さを指定しています。（本来の段組では、高さを指定する事はあまりありません。） パターン１ float:left;を指定してboxBを回り込ませます。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;height:100px;float:left; } パターン２ boxAにfloat:left;を指定、boxBにfloat:right;を指定。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;
Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用
複雑なCSSを自分で書かなくてもHTMLのマークアップで簡単に美しい比率のグリッドレイアウトを構成でき、分かりやすいボタン、パンくずリスト、メニューなどのWebページを記述できるCSSフレームワーク、「Bootstrap」の最新版「Bootstrap 3」が公開されました。 Bootstrap 3ではモバイルファーストを意識したデザインとなり、ボタンやメニューなどはフラットデザインを採用。 公開されのは現地時間8月19日で、Bootstrapの2周年にあたる日でした。 Bootstrap 3のテンプレート例 下記はBootstrap 3ではさまざまなテンプレートがの用意されていますが、下記もそのテンプレートの1つ。
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
大規模サイトにおける本当は怖いCSSの話
7. 確認する <p class=”btn check”> チェックボックス✓ <input type=”checkbox” class=”check”> 段落です p span{color:blue; margin:20px} <p class=”btn”> <span>ボタン</span></p> ボタン 定義済みのid,class名をつけた 要素の再定義で崩れた 9. 共通ボタン 例外ボタン共通ボタン デバイスの向きを変えられる ユーザはいつでも、さまざまな理由でiOSデバイスの向きを変えることができます。たとえば、実行 する操作が縦長の向きのほうが自然に感じられる場合もあれば、横長のほうがより多くの情報を表示 できると感じられる場合もあります。デバイスの向きを変える理由が何であれ、アプリケーションの 主要な機能が見やすいままであることをユーザは期待します。 ユーザはホーム(Home
WebPlatform Docs
WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free. This tool helps to make and review comments inline. How to Use insert instructions, with images, here Welcome to Web Platform Docs Web Platform Docs is a new community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. Even though Web Platf
Mozilla、初心者が容易にWebサイトを作成したりHTMLを学べるWebアプリ「Thimble」をリリース | OSDN Magazine
Mozillaは6月18日、Webページ作成ツール「Thimble」を発表した。HTMLなどのWeb技術を知らない初心者でも、容易にWebページやWebサイトを作成できるというWebアプリケーションだ。 ThimbleはWebブラウザ上で動作するWebページ作成ツール。あらかじめ用意されたテンプレート（「Project」と呼ばれている）をベースにWebページを作成することも、自分で一からWebページを作成することもできる。 Thimbleでは画面左側にHTMLコードを編集できるコードエディタ、画面右側にプレビュー画面が表示されており、コードを書くとリアルタイムでプレビューが表示される。エディタではタグ部分にキャレットを合わせることでヒントが表示され、またHTMLに不整合があるとその個所と問題となる理由がリアルタイムで表示される。作成したHTMLは「Publish」ボタンをクリックすることで
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
HTMLをDBみたいに使えるスゴイライブラリ『htmlSql』を CakePHPで使う - h2ospace - builder by ZDNet Japan
APIやRSSなどを提供しているサイトは、情報を簡単に扱うことができますが、例えば Yahoo!の検索結果とか、mixiのニュースとか、あるサイトの一部を取り出したいことってよくあります。（とはいえ、著作権違反には注意 そんな時、PHPのライブラリである「htmlSql」を利用すると便利。このライブラリに、ファイルでもURLでも文字列でも、HTMLで作られたものなら何でも与えると、解析して取り出しやすくしてくれます。しかも、その取り出し方はSQL！ 例えば、「id属性が’test’の p要素の内容を取り出したい」という場合には、次のようなSQLを使います。 SELECT text FROM p WHERE $id=="test" 超パワフル。ということで、これを CakePHPで利用するためのテクニック。 まずは、ダウンロードしたファイルの中から次のファイルを「app/vendors」フォ
市販ソフト顔負けの機能を備えるHTMLエディタ「KompoZer」 | OSDN Magazine
ブログやCMSの普及によって、Webサイトの制作時にHTMLを書く機会は減った。しかし、ちょっとしたデザインの変更や内容の手直しには、やはりHTMLを直接編集するのが一番だ。そこで役に立つのがHTMLエディタ・Webオーサリングツールである。今回紹介するのはフリーでありながら豊富な機能を備えるHTMLエディタ・Webオーサリングツール「KompoZer」だ。 KompoZerは、FirefoxやThunderbirdなどで知られるMozillaプロジェクトが開発していたHTMLエディタ「Composer」の後を継いで開発された「Nvu」の派生版で、実質的な後継ツールとなる。その特徴は「IBM ホームページビルダー」や「Adobe Dreamweaver」といった市販ソフト顔負けの高機能ぶりにある。WYSIWYG編集が可能であり、HTMLタグの知識がなくてもワープロソフトを使う感覚でHTML
KHTML - Wikipedia
KHTML（ケーエイチティーエムエル）は、 KDEプロジェクトにより開発されているHTMLレンダリングエンジンである。KDEのウェブブラウザであるKonquerorのために開発された。 KPartフレームワークのもとで開発され、C++で実装されている。HTML 4.01、CSSレベル1およびレベル2、DOMレベル1およびレベル2、レベル3の一部、ECMAScriptをサポートする。CSSに関してはAcid2テストをクリアする実装が施されている。ウェブ標準をサポートするように開発されているほか、できる限り多くのページをレンダリングできるよう、マイクロソフトによるInternet Explorerのいくつかの非標準な機能をサポートしている。 KHTMLはソフトウェアの構成要素として単独利用することが可能であり、後にAppleが自社のmacOSに搭載するために作ったウェブブラウザSafariでは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちいさな Web ブラウザを作ってみよう
