Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the <output> element! In this article, we’ll show you <output> and some related JavaScript tricks. Let’s get cracking. The Definition # The <output>
If you’ve used definition lists (<dl>) you’re aware of the problem. By default, <dt>s and <dd>s have display:block. In order to turn them into what we want in most cases (each pair of term and definition on one line) we usually employ a number of different techniques: Using a different <dl> for each pair: Style dictating markup, which is bad Floats: Not flexible display: run-in; on the <dt>: Brows
Symbols like the snowman (☃) bring a fun and seasonal touch to text, often used in winter or holiday-themed messages and designs. Another interesting symbol is the atom (⚛), which is commonly used to represent science, technology, or atomic energy. It symbolizes the fundamental nature of matter and is popular in educational and scientific contexts. These symbols offer a wide range of creative poss
boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。 Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。 HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。 2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。 HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある
ImageMapster makes HTML image maps useful. ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids. Note: ImageMapster used to be distributed as a ZIP archive. You can still download the full package including e
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価:2,808円 (本体2,600円)/形態:B5変 (240ページ) ISBN:978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に(勝手に)リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い
将来、何かの役に立つかもしれないので、メモとしてエントリー。 IEなんかの古いブラウザに対応するための CSS ハック方法は古くから知られていますが、CSS3 への過渡期の現在、(本当は使いたくない)ベンダー・プレフィックスや Modernizr なんかを使って新しいデザインにチャレンジしている人も多いことでしょう。 それでもなお、特定ブラウザの、特定バージョンで思った通りのデザインにならないことがあれば、やはり何かしらのハックに頼らざるを得ない状況は、今も昔も変わらないのかもしれません。 そんな場合のハックを An HTML5 boilerplate addon for CSS browser nitpicks から紹介です。紹介されているテクニックは、従来型の CSS 解釈時バグや CSS 属性のアリ/ナシといった特徴や機能ベースではなく、そのものズバリ、ユーザーエージェントによるブラ
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
先日の勉強会での発表内容に関して、ke-tai.orgさんのところで入力モードについて突っ込まれたので、せっかくだし書きかけの記事をきちんとまとめてみることにしました。 元々、wideの%MobileStudyで入力モードの話が出た際、意外と情報が間違って知られていたりすることが多いようだったので、特にはまりやすいあたりを中心に、入力モード指定についてざっくりと書いておこうと思って、まとめたかけでそのまま放置していたwものがあったんですが、それがベースです。 そんなわけで、記憶頼りが中心であんまり検証しないで書いてるので、間違いが含まれてたらごめんなさい。 では本題。 入力モードとは まず、入力モード指定って何のことかという話からすると、みんな携帯をいじる時に「全角かな」とか「数字」とか「英小文字」とかいろいろ端末の文字入力を切り替えると思うんですが、あれのことです。 サイトを作る時にin
このサイトの文書型を XHTML 1.0 から HTML 4.01 に変更しました。 その理由を説明するために、まずはそもそも XHTML だった理由から振り返ってみます。結論から言ってしまえば、まあその、「とりあえず」、ですね。僕が Web デザインの勉強を始めたのが 2006 年初頭で、そのときに参考書として選んだのが 2005 年 7 月に初版が発行された『Web 標準の教科書 — XHTML と CSSでつくる “正しい” Web サイト』。なんとなく雰囲気が伝わるといいんですけど、いわゆる「Web 標準の時代」とでも言うべき時代に僕はこの世界に入ったわけです。当時の空気としては「これからは HTML よか XHTML ですよ」という流れがほとんど不可逆的なものとして捉えられていたと思います。以来 3 年間、僕は個人でも仕事でもいくつものドキュメントをマークアップしてきましたが、「
Creative Nerdsで、PSDからXHTML+CSSを作っていくチュートリアルが紹介されています。 ざっといくつかご紹介。 » Create a clean modern website design 架空のデザインスタジオのモックアップを作る » Build a Sleek Portfolio Site from Scratch かっこいいポートフォリオサイトを作るチュートリアル » Converting a photoshop mock up コーポレートサイトをWordPressで作ったレイアウト。PSDをダウンロード可 » Web Design Layout #9 (PSD) hv-designsチームによるデザインチュートリアル » Design a Beautiful Website From Scratch ワイヤーフレームからデザインを起こしていく過程がわかるチュー
流行ってるらしいので。本当は、シングル・カラムに変更したかったり、エントリのタイトル等をh1にしたかったり、検索ボックスの位置を変えたかったり、marginのとり方の変えたかったり等色々やりたいことがあったので、ついでにHTML 4.01 strictにしてやったというところ。確認が面倒だった。想像していた以上に。それはもう。 作業は80%くらいは適当なPerlスクリプトでやった。スクリプトを動かし始めてからHTML Tidyを使えば良かったとかいう考えがよぎったけど、そのことは忘れた。残りの20%は目視で確認しながら手作業で直してた。途中で嫌になりそうになったけど、なんとかやり遂げた。達成感だけはある。 以下は変更したところのメモ。 s/ \/>/>/g 置換してから元に戻すのが大変なことに気づいた。やらなくても良かったかなーとも思う。 シングル・カラムに変更し、サイドバーを撤廃 さすが
devSnippetsで、リストをデザインするためのCSSプラクティスが紹介されています。 ざっといくつかご紹介。 » Elastic Calendar Styling with CSS CSSでデザインしたカレンダー。↑のキャプチャはこちら » Simulating a Table Using an Unordered List ul,liでテーブルレイアウトを作る » How to Create a Block Hover Effect for a List of Links リンクのリストにブロックのhoverエフェクトをつける » Turning a list into a navigation bar リストをナビゲーションバーに » FORM elements design using CSS and list (ul and dl) ulとdlを使ってフォームを作成 » Pr
version 1.5 (2009.05.03) 90 KB downloads: current 16760 / total 19917 download TextMate HTML Bundle 1.5 Version History v.1.5 release info v.1.0 release info Description This HTML Bundle and my CSS Bundle should significantly streamline your front end development workflow. It does for me anyway… This HTML bundle keeps all the functionality of the original bundle, and you should definitely familiar
フォーム送信などするときに使うボタンはinputとbuttonがあります。 ボタン要素にもnameとvalueをつければ、ほかのフォームエレメントと同じように値を送信することが出来ます。 buttonタグだと、ボタン要素そのものにつける値とボタンに表示するラベルを違うものに出来るので、 送信ボタンとか作るときには便利なんですが、IEだけ挙動が違うので注意が必要です。 <input type="submit" name="test" value="send" /> <button type="submit" name="test" value="send">submit</button> 前のソースで送信すると、どちらの場合もPHPの場合$_POST[“test”]で値は”send”になるはずが、 IEだとbutton要素につけたvalueは無視されて、値がラベルになります。 つまり上のソー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く