HTML5のcanvas内の複数の画像をドラッグ＆ドロップさせてみる - Qiita
概説 「HTML5のcanvas内に複数の画像を任意の順序で表示する」で描画したcanvas内の画像をドラッグ＆ドロップしたい欲が湧いたので、コードを書いてみました。 ドラッグ＆ドロップは通常のDOMであれば、HTML5のDrag & Drop APIを利用することで簡単に対応可能です。 しかし、canvasに一度描いてしまったオブジェクトは、DOMとして操作することができないため、座標を考慮した地味な実装が必要になります。 以下のようなサイトを参考にしながら、画像の重なり順と当たり判定を考えてやってみたところ、自分が「いかに座標に弱いか」ということがよく分かりました。。。 A Gentle Introduction to Making HTML5 Canvas Interactive dragging and resizing an image on html5 canvas 「Kine
Markdownから楽してフォーマット変換する方法 - Qiita
O'Reilly Atlasの簡易版みたいな仕組みで製品マニュアルを作って欲しいと言われました。 マニュアル作成にはAsciidoctorを使いたいのでAsciiDoc形式で記述することが決まったのですが、Markdown形式のほうが慣れてて楽とのことだったので、Markdown形式からAsciiDoc形式へ変換しなければならなくなりました。 pandocを使えば余裕!と思っていたのですが、意図した通りの変換ができませんでした。 調べたこと pandocを使うならHaskellを勉強して直せばいいんだろうけども、時間がないのでPythonのMarkdownパーサーライブラリ使って変換プログラム作れないかな?と思って調べてみました。 表でまとめると以下の通り。 評価項目 Python-Markdown Misaka Mistune
無料のホームページ テンプレート｜WEBテンプレート・ファクトリー
全部無料で利用可能！商用利用が可能なのでどなたでもご利用いただけます。 テンプレートは毎月新規デザイン追加予定！プロのWEBデザイナーが作るテンプレート是非ご利用ください。 2016.06.02 5月末頃より、上位レジストラの不具合が原因で、一時サイトが見れない状態にありました。現在は復旧しております。ご迷惑をおかけし申し訳ございませんでした。 2014.10.10 製造業などに使えるテンプレートをアップしました！→→詳細はこちら 2014.02.12 整骨院などの医療・病院に使えるテンプレートをアップしました！→詳細はこちら 2014.01.15 明けましておめでとうございます！今年はより多くのテンプレートを提供していきますので、どうぞ宜しくお願い申し上げます！ 2013.11.11 中華料理店・居酒屋などの飲食店に使えるテンプレートをアップしました！→詳細はこちら 2013.10.11
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
【gulp】htmlテンプレート「gulp-jade」についてメモメモ（１）～導入 | バシャログ。
みなさま、こんにちは。昨年は、『ちはやふる』や『めぞん一刻』、そして『孤独のグルメ』などにハマり続け、夫婦で聖地めぐりをしていた kouraku です。とりあえず、『ちはやふる』の聖地巡り（分倍河原：東京、近江神宮：滋賀、芦原温泉：福井）はコンプリートしました。 さて、昨年はhtmlテンプレートとして「gulp-html-extend」を紹介してきましたが、簡単で分かりやすい反面、かゆいところに全く手が届かない場面などに多々遭遇します。 「あぁ、ここで条件文が使えれば余計なレイアウトなんて作らなくて良いのに・・・」 とか、 「変数が多くなると見辛いし設定しづらいな・・・」 とか。 こうした悩みを解決すべく、ここ最近（自分が）あまり使わなくなってしまった「jade」をおさらいしようと思いました。ということで、そのおさらい内容をメモメモ。 まずは構成から・・・ 今回の構成は、下図のとおりです。
完全に単一のHTMLファイルで動作するMarkdownエディタ作った - Qiita
概要 完全に単一のHTMLファイルで動作するMarkdownエディタ「かんたんMarkdown」を作ったというお話。 お断り 一応簡単に動作検証はしていますが、とんでもないバグが潜んでいるかもしれません。 かんたんMarkdownを利用して大切な文章がなくなってしまったり、その他損害が生じても責任は取れませんm_ _m 経緯 前回の記事(そろそろExcelで資料作るのやめたい)で、 単一ファイルで動くMarkdown 画像をbase64で埋め込んでしまう というアイデアに可能性を感じて下さった方が多いようです1。 しかしながら、 エディタとプレビューアが別なのが面倒 base64に変換するのが面倒 といった意見も多く聞かれました。 そこで思ったのです。ならばエディタを作ってしまえと。 かんたんMarkdown かんたんMarkdownは完全に単一のhtmlファイルで動作するMarkdown
Python pandas + folium + Jupyter でリーフレット / コロプレス図を描きたい - StatsFragments
引き続き、 R の可視化を Python に持ってくるシリーズ。R には以下のようなパッケージがあり、地図上へのリーフレット配置やコロプレス図の描画がカンタンにできる。それぞれの概要はリンク先を。 {leaflet}: リーフレット配置 Leaflet for R - Introduction (英語) {choroplethr}: コロプレス図の描画 choroplethrで大阪市のコロプレス図を描く - Technically, technophobic. これを Python でやりたい。調べてみると folium というパッケージが上記 両方をサポートしているようなので使ってみる。 github.com インストール pip で。 pip install folium 準備 以降の操作は Jupyter Notebook から行う。まずはパッケージをロードする。 import nu
setTimeout() vs ハッカー、仁義なき戦い - 株式会社CFlatの明後日スタイルのブログ
早速ですが、以下のHTMLを見て下さい……。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>サンプル1</title> <style> #counter { font-size: 3em; font-family: monospace; color: blue; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> (function(){ $(document).ready(function() { $('#start').on('click', function(){ var counter = 0; $
HTMLパーサーメモ - Qiita
HTMLのテキスト部分だけを抜き出したいとか、特定タグの内容を抽出したいとかいうことを実現するものは、HTMLパーサーと呼ぶらしい。 ライセンス含めて使えそうなのを参考からピックアップする。 検討結果 2014-07-31時点で jsoup が良いんじゃないかと思った。 MITライセンスなのと、パーサー機能、使い方も悪くなさそう。最終更新日も割と最近。 参考 Comparison of HTML parsers テーブルでの比較 Javaで実装されたHTMLパーサの性能や使い勝手を比べてみるよん | 世界はどこまでもシンプルである たくさんのライブラリへのリンク 2007/08/23 日記: Javaで実装された HTML Parser (HTMLパーサ) を調べてみました テーブル形式でライセンスまで掲載 JavaのHTMLパーサー色々 - ドナドナごとごと サンプル付きでリンク紹介（j
「Webスクレイピング」に関する参考記事へのリンクを我武者らにまとめてみた。リンク31個+スライド5個。 - おしブロ from STONEWEB
そろそろ本気で「Webスクレイピング」に取り組まなければならない気がする今日この頃、Webスクレイピングに関してググって見つけた参考記事へのリンクをシンプルに羅列してまとめてみました。 ちなみに「Webスクレイピング」については、以前書いた記事「Webスクレイピングとは何ぞや？という疑問が浮かんできたので調べてみた」を参照してみて下さい。 参考記事リンク31個まとめ （PHPでのスクレイピングとか） 初めてのスクレイピング - しぶてぃーぶろぐ » PHP初心者がやってみた！スクレイピング入門｜inimoni PHPでphpQueryを使ってWebスクレイピングしてみる - omiya6048's blog 誰でもスクレイピング！DOM要素を引っこ抜くSimple HTML Dom-ITかあさん ウェブ上の必要なデータを抽出する方法-スクレイピング- | PHPサンプル実験室 PHPでのス
【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
[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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek
説明は初心者向け、学ぶ知識はプロで通用するレベル、HTML5とCSS3が身につく良書 -いちばんやさしいHTML5&CSS3の教本
タイトル・見出しに使えるデザインまとめ - DesignWalker
CSSで見出しデザインサンプル（H1タグなど） - ウェブデザイン便利サイト集 - Yahoo!ブログ