HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
HTML Editor
Click here to start using the HTML editor online Please try out the WYSIWYG HTML editor features found in the kitchen sink above to edit and format your text and images You’ll see the content created in the WYSIWYG-HTML editor in source code format on the right. What is HTML editor The HTML editor is an exceptionally simple to use and a very stable editor that you can use for your coding needs dir
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
HTML の q タグが日本語のサイトではカギ括弧を出すようになってた
HTML に q という要素がありますね。 Quotation の Q ですか。 <q> について 文書内で引用をしたいとき、 ブロック要素を含むような場合には <blockquote> ですが 一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。 q 自体がデフォルトでインライン要素だしね。 こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q> で括った部分が ダブルクォーテーションで挟まれて表示されます。 上記の例だとこう。 “ここは引用ですよー。” カギ括弧になってた 「表示されます」って書いたんだけど、 本当は「と思ってました」でした。 こないだふと気づいたら、 日本語のページではこれがこうなってました。 「ここは引用ですよー。」 クォーテーションマークじゃなくてカギ括弧になってる。 知らんかった。いつの間に。 <q> を初めて使
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
【レビュー】IE6、IE7、IE8、IE9をクラッシュさせる方法 | エンタープライズ | マイコミジャーナル
Taranfx.com - Your Gateway to Technology, Redefined. ブラウザは特定のHTMLやCSS、JavaScriptのコードを読み込むとクラッシュしたりフリーズすることが知られている。しかもそれは複雑怪奇なコードではなく、とても短いコードでも起こることがわかっている。特にIEをクラッシュさせたりフリーズさせるためのコードの多くがスニペットとして公開されている。 そうした情報のひとつにTaranfxで公開されているHow to Crash Internet Explorer IE6, IE7, IE8, IE9がある。IE6、IE7、IE8、IE9をクラッシュさせたりフリーズさせることができるコードを紹介するという内容になっている。記事の目的はIEがクラッシュするコードを使ってほかのブラウザへユーザの目を向けさせようというもの。同様の取り組みはすで
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
今年ありがとうを言いたい「html5の本」5+1選
連載企画「今年ありがとうを言いたい○○」 2010年も残り僅かとなりましたが、いかがお過ごしでしょうか。 デザイナーズブログでは今年を振り返って、 それぞれが「ありがとうを言いたいもの」を紹介する連載企画をはじめます。 第一弾は「今年ありがとうと言いたい『html5の本』」です。 それでは続きからどうぞ！ 徹底解説HTML5マークアップガイドブック タグが一つ一つ解説されています。 html5を勉強するならまず最初に読んでおくべき。 常に手元に置いておきたい1冊です。 HTML5&API入門 html5で何ができるようになったのかが広くまとめられています。 Google API Expertが解説するHTML5ガイドブック HTML5のAPIについての詳細な解説。 応用的な使い方も。 2冊目、3冊目に読んでおきたい本です。 HTML5＋CSS3で作る 魅せるiPhoneサイト 最近発売され
?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clockmaker+%28ClockMaker+Blog%29
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleはiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl
Google Slides: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
複数ブラウザに対応したWeb開発支援ツール·Pirka'r MOONGIFT
Pirka'rはWindows/Mac OSX/Linux向けのフリーウェア（ソースコードは公開されている）。ここ数年でブラウザのシェアは大きく変わってきている。それまでIEが主流だったのがFirefoxが大きくシェアを取り、さらにSafariやGoogle Chromeといったブラウザが続いている。特にCSSやJavaScriptの互換性の問題もあってIE系ブラウザが嫌われる状況になっている。 検証もできる ユーザにとって選択肢が増えるのは良いことだが、開発者やデザイナーにとっては辛い。JavaScriptの動作やレンダリング結果にブラウザによる差異があるとなっては確認作業も大変になる。その手助けをしてくれるツールがPirka'r（ピリカル）だ。 Pirka'rはEclipseベースの開発支援ソフトウェアで、HTMLファイルやJavaScript、CSSファイルのメンテナンスを行うことが
ごく簡単なHTMLの説明
HTMLは本来簡単で便利なものです。「30分間HTML入門」で基本は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基本がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 （スライドのHTML版） 何のためのHTML？ HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正
シンプルなテキスト・HTMLエディタ Crescent Eve (フリーソフト)
Crescent Eve はシンプルなエディタです。 こだわりの基本機能とHTML編集機能を持っています。 【雑談】 ある日のふとした疑問 ～ HTMLを書く道具 ～ ある日、メモ帳等のテキストエディタでHTML書いている人が意外に多いことに気がつきました。 「多機能で優秀なHTMLエディタは沢山あるのに、なぜかな」 「もしかして、軽くてシンプルなSDI形式のHTMLエディタが求められているのだろうか」 「よし、作ってみよう！」 「あくまでシンプルに、テキストエディタとしても使えるようにして、タグはキーボードから自然に入力補完できるようにしよう」 「手作業でタグを打ち込んだら間違いが出るから、文法チェック機能をつけよう」 「文字コードの自動認識は、絶対失敗しないようにしよう」 ・・・というような考えから Crescent Eveを開発することにしました。 その後 公開以来、多くの方に好評を
サイト構築に役立つWEB講座 SmartSmart(スマートスマート)
フロントエンドのウェブ制作を学ぶ HTML5やCSS３、JavaScriptなどの言語、それにAtomといったツール、 言語を覚えるための勉強方法などを紹介。
スタイルシートでマルチカラム・デザインを実現する方法
スタイルシートでマルチカラム・デザインを実現する方法 TABLE要素の弊害 Webページで、左に見出しがあってその横に本文があるようなデザイン(ここでは「マルチカラム・デザイン」と呼ぶことにします。下図参照)を実現しようとすると、現在最も一般的に行われている方法はTABLE要素を用いることです。数あるWebページやHTMLエディタの中には、すべてのデザインをTABLE要素を用いて行うものもあります。 図: マルチカラム・デザインの例 しかし、TABLE要素は本来「表」のためのもので、レイアウトのための要素ではありません。また、レイアウトにTABLE要素を用いると以下のような弊害が生まれます: ページが表示されるまでに時間がかかる TABLEに対応していないブラウザでは何も表示されない 複雑なレイアウトを実現できず、画像を用いてその点を補完することになり、制作とメンテナンスにかかる手間と時間
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集