[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック
hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo
HTML5の「Web Workers API」を，別ファイルを使わずページ単体で利用するサンプル （createObjectURLがあれば，1ファイルでマルチスレッドのJSコーディングが可能） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ HTML5の「Web Workers API」（非同期処理の仕組み）を，外部スクリプトを使わずに，１ファイルだけで実行するサンプルコード。 ワンライナーで（たった１行で）Workerスレッドを起動できる。 簡単に書くとこんな感じ。 // スレッド内容を別ファイルに分離しなくてよい new Worker( window.URL.createObjectURL( new Blob([ elem.innerHTML ],{type:"text/javascript"}) ) ); 以下は解説。 Web Workers APIは，JavaScriptでマルチスレッド・プログラミングをするための仕組み。 正確に言えば，UIとは別に裏側で，重い処理を非同期で実行してくれるAPI。 Workerというオブジェクトに「外部スクリプト・ファイルのURL」を渡せば
今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ 今から３分で，HTML5の JavaScript API の使い方を２つ覚えよう。 １：ドラッグ＆ドロップAPI 画面上の要素を。 画面外から。 ２：File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで，これらの実装の方法を素早く学習する。 ※サンプルは，IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では，ここから３分の時間のカウントを開始。集中して読もう。 （0：00〜前半の１分半） 画面内でのドラッグ・ドロップ （後半の1：30〜3：00） 画面外からのドラッグ・ドロップ 参考資料 （0：00〜前半の１分半）画面内でのドラッグ・ドロップ まず，動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル１ ht
少し凝った見出し（左揃え） - スタイルシート・サンプル
緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 使い方：→ ページ全体に適用 → 別ファイルから適用 → 左枠を表示 H1 { color: #000099; /* 文字の色 */ border-left-color: #cc6666; /* 左枠の色 */ padding: 5px 0px 0px 10px; /* 余白の幅 */ border-style: solid; /* 枠の種類 */ border-width: 0px 0px 0px 20px; /* 枠の幅 */ } H2 { color: #000099; /* 文字の色 */ border-left-color: #cc6666; /* 左枠の色 */ padding
Overview
Overview Overview API Support Tutorials Changelog About Nokogiri¶ Nokogiri (鋸) makes it easy and painless to work with XML and HTML from Ruby. It provides a sensible, easy-to-understand API for reading, writing, modifying, and querying documents. It is fast and standards-compliant by relying on native parsers like libxml2, libgumbo, and xerces. Guiding Principles¶ Some guiding principles Nokogiri
XHTML namespace
XHTML namespace The namespace name http://www.w3.org/1999/xhtml is intended for use in various specifications such as: Recommendations: HTML 5: A vocabulary and associated APIs for HTML and XHTML XHTML™ 1.0: The Extensible HyperText Markup Language XHTML Modularization XHTML 1.1 XHTML Basic XHTML Print XHTML+RDFa Other Documents: HTML 5.1 HTML 5.2 The charters of the following W3C Working Groups i
デバッグしやすいHTMLのテストの書き方 - 2012-01-18 - ククログ
注意: 長いです。 一言まとめ: withinとtest-unit-capybaraを使ってHTMLのテストを書くと問題を見つけやすくなる。あわせて読みたい: デバッグしやすいassert_equalの書き方 HTMLに対するテストに限らず、開発を進めていく中でテストが失敗する状況になることは日常的にあることです。HTMLの場合は、入力フォームのラベルを変更したり、項目を追加したら既存のテストが失敗するようになるでしょう。そのとき、どのようにテストを書いていれば原因を素早く見つけられるのかを説明します。ポイントは「注目しているノードを明示すること」です。 HTMLテストのライブラリ さて、Rubyで処理結果のHTMLをテストするときにはどんなライブラリを使っていますか？The Ruby ToolboxにあるBrowser testingカテゴリを見てみると、Capybaraが最も使われてい
ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】
検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力
Web開発周りのVimの設定
HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType html :compiler tidy autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\" tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。 HTMLファイルのインデントをやり直す gg=G ノーマルモードではggでファイ
Webページを速く見せるための5つのちょっとした工夫（1/3） - ＠IT
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/4/30 ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部） 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。 CSSはソースコードの上部に記述する JavaScriptはソースコードの下部に記述する CSSとJavaScriptを書く順番 JavaScriptを圧縮して読み込みを速くする 読み込みが遅いブログパーツには要注意 【1】CSSはソースコードの上部に記述する 連載第1回では、「CSSは
はてなブログ | 無料ブログを作成しよう
うめぇヨーグルトソースでもいかがですか。個人差にもよりますが。もしよろしければ。 お久しぶりです。 最近うんめぇ〜と思ってるヨーグルトソースがあるので、書いていこうと思います。 ヨーグルトとハーブ類をもりもり使うので、そういうのが食べられない方にはうんめぇソースではないです。ごめんなさい…。もしよろしければお茶だけも…旦~ 【用意する…
Webアプリケーションを作る前に知るべき10の脆弱性 ― ＠IT
Webアプリケーションが攻撃者に付け込まれる脆弱性の多くは、設計者や開発者のレベルで排除することができます。実装に忙しい方も、最近よく狙われる脆弱性のトップ10を知ることで手っ取り早く概要を知り、開発の際にその存在を意識してセキュアなWebアプリケーションにしていただければ幸いです。 Webの世界を脅かす脆弱性を順位付け OWASP（Open Web Application Security Project）は、主にWebアプリケーションのセキュリティ向上を目的としたコミュニティで、そこでの調査や開発の成果物を誰でも利用できるように公開しています。 その中の「OWASP Top Ten Project」というプロジェクトでは、年に1回Webアプリケーションの脆弱性トップ10を掲載しています。2004年版は日本語を含む各国語版が提供されていますが、2007年版は現在のところ英語版のみが提供さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
