フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
testemで任意のHTMLでテストを動かす方法とJavaScriptデバッガ連携
Test Runnerのtestemを使ったテストについてメモ testem自体については以下などを見るといい気がします。 JavaScriptのテストツール「testem」が素晴らしいぞ | Mach3.laBlog Testem 0.1.0 Released and Screencasts testem の仕組み的には、テストを実行するためのHTMLページを用意して、 testem のローカルサーバ上でそれを表示してテストを実行しています。 testem自体は特にmatcher等は持ってなくて、adapter を書いて、jasmineやBuster.JS、QUnit等の構文を使ったテストを走らせた結果を得られるようにしてます。 Example Projects で紹介されてますが、この辺が充実してるのがtestemのいいところでもあります。 カスタムHTML testem/views
インターネット エクスプローラーで HTML ページに間違った文字セットが使用される - Browsers
警告 廃止され、サポート対象外となった Internet Explorer 11 デスクトップ アプリケーションは、特定のバージョンの Windows 10 で Microsoft Edge の更新プログラムを通じて完全に無効になります。 詳細については、「Internet Explorer 11 デスクトップ アプリの廃止に関する FAQ」をご覧ください。 この記事では、不正な文字セットを使用してインターネットエクスプローラー HTML ページがレンダリングされる問題を解決するためのメソッドについて説明します。 元の製品バージョン:インターネット エクスプローラー 元の KB 番号: 928847 現象 Microsoft Internet エクスプローラーが HTML ページをレンダリングすると、間違った文字セットが使用されます。 正しい文字セットが HTML ページのタグで指定されて
HTMLファイルのエンコードを『内容から判別する』にしない方法 - [Eclipse/開発環境 ツール類] ぺんたん info
EclipseでHTMLファイルやJSPファイルを開くと、文字化けしてしまうことがあります。 プロジェクト全体で文字コードを指定しても、この種類のファイルのみ指定が効きません。 プロジェクトごとに変更するには、プロジェクトのプロパティよりエンコードを設定します。 ファイル個別にエンコードを指定するには、ファイルのプロパティから『テキスト・ファイルのエンコード』で文字コードを変更します。 ただファイル数が多いときにいちいち指定しなおすのは面倒です。 一般には[設定]→[一般]→[コンテンツ・タイプ]の[テキスト]→[HTML]のデフォルトエンコードをUTF-8にするということで解決します。 これでも解決しないとき、つまり『テキスト・ファイルのエンコード』の標準が「デフォルト（内容から判別する）」になっているときは、HTMLファイルをPHPファイルに関連付けると解消されます。 [設定]→[一般
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
About - CLEditor
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.
-float(フロート)を解除する3つの方法-Whisper | Diary
フロートによる回り込みを解除する フロートを利用してボックスを配置すると、意図しない要素が回り込みしてしまうことがあります。 フロートとは、『フロートを適応した指定された要素を通常の流れから取り除き、左または右に寄せて配置するをさせる機能』のことです。 また通常の流れから取り除くということは、親要素が高さを持っていない場合、 子の高さ(height)によって高さを維持していた親の高さ(height)は失われます。 つまり子に対してフロートを適応すると親の高さが０になり、 よく問題として挙げられる『背景がなくなる』といったことが起こるわけです。 その為、フロートを適応したら、解除の設定をする必要があります。 ここでは３タイプの解除の方法を載せてみます。 ■ 元の状態 floatを適用する前の状態です。 - XHTML - ■ contentsにfloatを適応する div id="conte
テキストファイルからHTML5のプレゼンテーションを生成する·KeyDown MOONGIFT
KeyDownはMarkdown記法を使ってテキストファイルからHTML5のプレゼンテーションを生成する。 KeyDownはRuby製のオープンソース・ソフトウェア。個人のエンジニア、デザイナーが集まる勉強会ではあまり凝ったプレゼンを見る事が少ない。むしろHTMLやKeyNoteなどを使ってカジュアルに作られる方が多いのではないだろうか。 スライド テキストファイルで作成したプレゼンテーションは検索も容易でWebとの親和性も高い。配布して見てもらうのに特別なソフトウェアも無用と言う事なしだ。とは言え作成にHTMLを使ったりしたくない、という人はKeyDownを使ってみよう。 KeyDownはプレゼンテーションファイルの記法にMarkdownを使えるソフトウェアだ。keydownコマンドを使って（オプションはgenerate）プレゼンテーションのベースを作成する。!SLIDEというのがスライ
display:inline-blockがけっこう便利。だけど…
小さいブロック要素とかを横並びにさせたいときとか、inline-block使うと便利なんですよね。幅も高さも指定できてしまう要素にみせることができるinline要素になるというのがとても便利。わざわざblock要素にして、floatさせて横並びにさせる、そして並ぶ要素を終わらせたあとはclearをして…なんてことをしていると、指定が多くなってしまうんですよね。ですが、inline-blockを使うと、そんなことしなくても簡単に並べちゃうってのはいいですよね。 しかし、そのinline-blockは、IEやFirefox2などのオールドブラウザだとうまく動作しないことの方が多い。今では使えるようになっているブラウザが多いのですが、IEや以前のブラウザを気にすると、使いどころが少なかったりもする。 inline-blockのオールドブラウザやIEについての動作は、参考としているサイトを見てもら
Basic HTML data types (ja)
上記の通り、色指定の値「#800080」と「Purple」とは、どちらも紫色を表す。 6.5.1 色を用いる際の注意 カラー化によって、文書はより多くの情報を表すようになり、また読みやすくもなるだろう。しかし、カラー化については以下の指針を考慮に入れられたい。 HTMLの要素や属性によって色指定を行うことは 推奨しない。その代わりにスタイルシートを用いるよう勧める。 色盲の人を困らせるような配色には様々なパターンがあり、どの組み合わせにおいても慎むこと。 背景画像や背景色の指定を行う場合は、テキスト類への色指定も行うこと。 BODY要素や FONT要素、そして表のbgcolorによる色指定は、環境が違うと見え方も異なる。 (例えば、ワークステーション、マック、ウインドウズの違いや、液晶表示とCRT表示の違い。)従って、ある特定機種での見栄えに完全に依存するべきではない。 ただし将来的には、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
