Facebookページの作成 第3回『Static HTML Iframe Tabアプリケーションを使ってページ作成』 | HTML5でサイトをつくろう
『Static HTML Iframe Tab』アプリ Facebookページの作成方法で最後に紹介するのが、『Static HTML Iframe Tab』アプリケーションです。Facebookページを作るアプリは他にもいくつかありますが、当ブログのページを作る時に使用したのがこのアプリです。このアプリで制作したページは『https』で接続した場合でも問題なくページを表示してくれます。 Step01 まずは『Static HTML Iframe Tab』をインストールします。 http://www.facebook.com/search.php?q=Static%20HTML%20Iframe%20Tab#!/iframehost ここで気をつけたいのは、メニューに表示させたいアイコンによってインストールボタンが異なる部分です。下の画像を参考に表示させたいアイコンを決めてからインストール
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
たった5年で激変したITエンジニアの基礎スキル
iPhoneもGmailもなかった2000年頃、たとえばメールであれば、一般ユーザーはOutlook Express、ハイエンドユーザーはBecky!を使う、といった習慣があった。Outlook Expressはデフォルトのメッセージ形式がHTMLメールだったので「Outlook Expressにはセキュリティ上の問題があるため、必ずテキスト形式に設定を変更してから使いましょう」というのが雑誌の定番解説だった。MB単位のファイルを添付して送ったら瞬時に送り先から電話がかかってきて、激怒されたこともある。瞬時に届いているのに。 当時HTMLメールを毛嫌いしていた人はいつごろWebメールを受け入れたのだろうか。いまではGmailのようなWebメールは、テキスト形式で送られてきたメールでもHTMLで表示するし、iPhoneの3G回線でMB単位の添付PDFファイルを普通に客先で表示している。どうや
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場
Ajaxを使うためにはページ内リンク (hash fragment=URLの#以降) を使うのが一般的*1 hash fragmentはサーバに送信されないから、JavaScript非対応のブラウザだと動作しない 特にサーチエンジンのクローラ等で問題になる*2 そこで Google は、#! が含まれる URL を hash を含まないものに読み替える仕組みを提唱している。例えば「www.example.com/ajax.html#!key=value」のサーチエンジン用URLは「www.example.com/ajax.html?_escaped_fragment_=key=value」になる。 TwitterやFacebookはこの仕様に従うことで、Ajax な UI と SEO を同時に実現している、というわけ。ということを調べたなう。 参照: Getting Started |
ウェブ制作者のためのベストエントリ33【2010年7月版】
というわけで、しばらくまとめていなかったまとめ記事を再開し、私は元気ですとアピールしたい。 7月にあつめたブックマークのまとめです。 7月度必須ブクマベスト HTML5 Canvas Cheat Sheet 悩んだけど一応ベストへ。 HTML5 Canvas tagのチートシート。日常的に使うものでもないし、開発者向けになってしまうけど念のため。 OSを選ばないウェブデザイナーのための使えるウェブアプリ15*ホームページを作る人のネタ帳 7月に書いたけどついこの間のようだと思ったら、あんまり記事かいてないからそう思うんだきっと。 ついでにこちらも7月でした。 今日から現場で使えるjQueryのフォーム関連プラグイン15選 iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた スマホアプリ開発者ならブクマしておきたい一品です。 Googl
相対URLと絶対URLはどちらがSEOに強いのか？ | 海外SEO情報ブログ・メルマガ
HTMLのコードを書いているときに誰もが一度は悩んだ経験があるはずなのが、aタグで指定するリンク先URLの記述形式です。 何に悩むかというと、http://を入れたURLにするか、それともディレクトリ名・ファイル名だけにするか、です。 <a href=http://www.suzukikenichi.com/abc.html> <a href=abc.html> あなたはどちらの形式で記述しますか？ 僕たちが絶えず取り組んでいる「SEO」という視点から見た場合、どちらが有利なのでしょうか？ Web担の連載コーナーで以前にピックアップしましたが、WebmasterWorldでつい最近また同じような質問の投稿があり、疑問に感じるサイト管理者は多いのだろうと思って僕のブログでも取り上げることにします。 まず用語の定義をしておきます。 http://付きのURLか、http://の付いていないUR
【レポート】src=""とhref=""で無駄リクエストが発生する問題、ブラウザ対応状況 | エンタープライズ | マイコミジャーナル
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. HTMLのimgタグおよびscriptタグで「src=""」が指定されている場合、またはlinkタグで「href=""」が指定されている場合、リクエストが発生してページの取得が実施される振る舞いをするブラウザがあることをNicholas C. Zakas氏が指摘している。しかも空URL指定で取得されるコンテンツは何にも使われることなくそのまま消えていくという、まさに通信帯域だけを消費するという無駄な動きになっているという。 こうした動作の違
「Webを支える技術」。Webアーキテクチャを知り、Webサービスを設計するための一冊
日本にREST（Representational State Transfer）と呼ばれるWebのアーキテクチャスタイルを広めた山本陽平氏から、「本を出版するので送りたい」という連絡をいただいたのが約1カ月前。送られてきたのがこの本「Webを支える技術」でした。 山本氏のブログを拝見すると、約1年ほどはこの本の執筆に取り組んでいたご様子。中味を読んでみればそれも納得です。 本書はWebを支える3つの技術、HTTP、URI、HTMLを中心にWebのアーキテクチャを詳しく解説することから始まり、Webのアーキテクチャに沿ってWebアプリケーションや（広義の）Webサービスをどう適切に設計していくべきなのか、という、Webアプリケーションを開発するときに必ず考慮しなければならない課題を解決する道筋を教えてくれます。 Webアプリケーションをどう設計するべきか、大事なことなのに、これまでこれほど十
リッチ スニペットの導入について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
EPUB - Wikipedia
EPUB（イーパブ）は、国際電子出版フォーラム（英語版）（International Digital Publishing Forum, IDPF）が策定した、オープンフォーマットの電子書籍ファイルフォーマット規格である。「EPUB」は"Electronic PUBlication"（電子出版）の意味を持ち「epub」「ePub」などと表記される場合もある。 EPUBはXML、XHTML、CSSおよびZIPに基づいた規格であり、対応するハードウェアやアプリケーションソフトウェアは多く、電子書籍ファイルの標準となっている。 2020年2月19日にはISOより国際規格"ISO/IEC 23736" として刊行された。 概要[編集] EPUBは、XHTMLのサブセット的なファイル・フォーマット規格であり、HTMLやウェブブラウザのオープン性を保持しつつ、インターネット接続が切断された状態の携帯情
img（画像）には文字色を指定しよう（そう、文字の色を） | 初代編集長ブログ―安田英久
今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、imgタグの「文字の色」をCSSで指定しておきましょう。画像に文字色？ と思ったあなた、ちゃんと理由があるのです。 なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。 念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。 しか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
手打ちコーディング初心者におくるメンテナンス性の高いHTML+CSSコーディングを行うための15のTips
たのしいXML: XML/XHTML入門ページです
自分でWEBサービスを作りたいと思っている人へ
携帯サイトを検索エンジンに認識させる記述「handheld」実装の効果検証 - entry
NameBright - Coming Soon