HTML ソースやテキストからURLを抽出してリンク リスト化するWeb アプリケーション。: ULCAMTCVSMPS
何らかのウェブサイトのページのソース内やテキスト内に記載されている多数のURLを抽出してリスト化する事が出来るWeb アプリケーションをJavaScriptにて作成致しましたので掲載致します。 URL及びリンクを抽出するウェブ サーヴィスは余り見掛けないので自作致しました。リンクを収集する必要があるときにはとても便利だと思います。 上側のテキスト入力欄にURLを含むテキストをコピー & ペーストしてから、 " Make " ボタンを押すと、下側のテキスト欄にURLのリストが出ます。 オプションで、自動的にHTMLのタグを付けてハイパーリンク化する事も出来ます。 また、連続して全く同じURLがあった場合には1つだけを残します。 " http:// " の先頭の " h " が消されていて、 " ttp:// " から始まるURLの場合には自動的に " http:// " に置き換えます。 但
三点リーダー(…)を真ん中に表示する方法-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
こんにちは、ひらたです。わたしは「…」を多用するのが好きなのですが、そのせいか、なんの前触れもなく、三点リーダーについての話題を振られてしまったので、ちょっととまどいつつも書いてみたいと思います... そもそも「…」は日本語では三点リーダーと呼ばれたりします。もともと日本語にはなかった表現なのですが、欧文からの翻訳のなかで日本にも定着していった(Wikipedia調べ)ようですね... で、なぜ三点リーダーが話題になったかというと、Movable Type関連情報が数多く紹介されているブログ「小粋空間」に「三点リーダが真ん中に表示されない理由」というエントリーがあがったからのようです。日本語では、ちょうどフォント高の真ん中にあってほしい「…」が、ブラウザ上では「…」のように、ベースラインの上に表示されてしまうようです。なるほど... エントリーでも解説されているのですが、こちらは欧文フォン
ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」
登録フォームと言えば通常は必要事項を一方的に入力していくものですが、キャラクターとの会話形式にして、まるでチャットを行っているように情報を入力できるのが「ダイアログフォーム」です。人とチャットしているときはタイピングが苦じゃない、というアイデアを元に作られた登録フォームで、コードのダウンロードも無料で行えます。 ダイアログフォーム - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/watilde/form 実際にどんな感じでフォームが表示されるのか試してみます。まずはページ右側にある再生ボタンをクリック。 すると、「会員登録ふぉーむ」という文字の下で自動的にWindows Azure 公認キャラクタークラウディア・窓辺が会話を始めます。 「ユーザーIDを入力してください」とクラウディアに言われるので、フォームに自分のIDを
「コピペできない文章」がコピペできなかった理由 - てっく煮ブログ
html5先日公開した 絶対にコピペできない文章を作ったったwwww はおかげさまで好評だったようで嬉しい限りです。「不思議！」「どういう仕組みなんだ？」という声も多かったので裏側を紹介します。コピペできない訳ではないタイトルは「コピペできない」としていいますが、実際にはコピペはできます。正確に表現すると「コピーすると違う文字になる」という状態になっています。 ではなぜ違う文字になるのでしょうか。結論をいってしまうと「そこにある文字が、人間の目に見える文字とは違う」からです。といっても、これでは分からないですね。今回のために作成された独自フォントトリックの肝は「フォント」です。フォントといえば、文字の見た目を変えるために利用するものです。たとえば、「ほ」という文字を「メイリオ」フォントで表示するとこうなります。フォントを変えて「HG創英角ポップ体」フォントで表示すると、ポップな雰囲気になり
「htmlすら知らなかった私が2週間でWordPressの新テーマを作成するまでにやったこと」と参考にした記事まとめ
どうも、@OZPA です。 先月、当ブログのテーマをWordPressにて自作した私。 しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。 今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。 ひとりじゃ出来なかった 今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。 だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。 そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。 WordPressのテーマ作成の手順 さて、WordPressのテーマを作成するためには、 0.WordPressをローカルに
Google がまだ Flash を使っているサービスでみる脱 Flash の難しさ - てっく煮ブログ
Flash, HTML5スマートフォンの普及が進む中、iPhone には Flash が搭載されず、Android 版 Flash は開発停止になるなど、遅かれ早かれ Web 上から Flash が消えていき、リッチな表現は HTML5 に置き換わっていくことは確実となりました。「これからは HTML5 だ」という印象を世間に強く与えたのが、2009 年の Google I/O でした。Google I/O 2009 レポート グーグルが賭けるHTML 5の未来 − ＠ITGoogle はそれ以降、多くのサービスに HTML5 を取り入れてきました。しかし、いまだに Flash を利用しているサービスがいくつかあります。この記事では HTML5 化していない、または、できていない 5 つの Google のサービスを通してどのこで Flash が使われているのかなぜ Flash が使われて
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー？」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by：fweez まずはじめに とりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
たった一人でwebサービスを作るための、６つの技術と４つの知識
ふとワクワクするようなアイディアが浮かんだ時、もし自分でwebサービスを作れたらなーって思う方も多いんじゃないでしょーか。 実際、twitterやfacebookを徘徊してても、結構頻繁に「webサービス作ってみたい☆」みたいな投稿をみかけますが、中には「何から手を付け始めれば良いか分からない！」的な迷える子羊達もちらほら。 そんなワケで、ささやかながら今まで当ブログでもいくつかの自作webサービスを公開してきて、企画からデザイン・コーディング・プログラミング・宣伝に至るまで、若輩ながら全て一人で担ってきた私の知見をご紹介したいと思います。 だいじょーぶ、やりゃーできる！ webサービスを作るための技術と知識 技術に関する最大のポイントは「全てを知る必要はあるが、全てに精通する必要は無い」、つまり「広く浅く」で良いというコト。 その中でどこかに自分の強みが持てると尚良しですが、手始めであれ
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」:phpspot開発日誌
HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
ブラウザだけでここまで！ HTML5で作られた「スーパーマリオブラザーズ」がスゴい
ブラウザゲームの可能性が一気に広がりそうです 次世代のWebフォーマットとして注目され、徐々にいろんなところで使われはじめている「HTML5」。そんなHTML5で作られた「スーパーマリオブラザーズ」が公開され、話題となっています。 従来のHTMLに比べ、マルチメディア機能が大幅に強化されたHTML5では、今までのようにFlashなどの外部プラグインに頼らなくても、単体で複雑なゲームなどを動かすことが可能と言われています。今回紹介する「Infinite Mario Bros」も、ベースはあくまでJavascriptで、HTML5の高いポテンシャルを感じさせてくれるものとなっています。当然ながら、ブラウザがHTML5に対応していないと遊べませんので、古いブラウザを使っている人はご注意を。 パッと見はよくあるFlashゲームですが、もちろんFlashは一切使っていません 操作は方向キーで左右移動
もしも10分の1の行数でHTMLが書けたら
Zen-Codingとは 1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLやCSSのマークアップを効率的に行えます。 Zen-Codingはさまざまなテキストエディタに対応したプラグインとして提供されています。プラグインには、公式対応しているものと、サードパーティの開発者が作成したものがあります。 それぞれのプラグインによって、実装機能が異なる場合があります。これらのプラグインの詳細はZen-Codingの公式サイトから確認できます。 基本的な使い方 ここからはZen-Codingの基本的な使い方を解説します。Zen-Codingをテキストエリアで利用できるサンプルを用いて、実際に試しながら読み進めてください。テキストエ
いいから聞け！ 俺が文字コードについて教えてやるよ その１（前提知識編） - 谷本 心 in せろ部屋
ちょっと久々のJavaネタですが、 前から書き溜めていた、文字コードやエンコードについてのノウハウを書きます。 今回は、詳細な説明に入る前に、前提になる知識や用語について説明しておきます。 文字コードとエンコードって違うの？ 新人くん「では、HTMLの文字コードはUTF-8でお願いします」 先輩社員「文字コードじゃなくてエンコーディングでしょ？」 新人くん「えっ。あぁ、はい、それで」 文字コードとエンコード（エンコーディング）を混同して使ったりすると、 ちょっと原理主義的な人に怒られたりするんですけど、 大まかに言えば、「文字コード」は文字に割り当てられた「数字」のことで、 「エンコード」は文字と数字をマッピングする「方式」のことだと捉えていれば、大きくは外れません。 ただ、「文字コード」という言葉は、「数字」「方式」の両方で使われるほか、 文字一覧を示す「Charset」という意味で使わ
2130703450443574201?keyword=HTML5
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
矢印・特殊文字・記号一覧｜コピペ・標準フォントで使用可能 | 初代編集長ブログ―安田英久
創造力と遊び心がくすぐられるHTML5でつくられたウェブサイトのまとめ
not found