パンダ、ペンギン・・・次はシマウマかな?と予想する Latin です。 英語だからゼブラアップデートって所でしょうか? さて今回ですが、最近のコーディング周りで使う機会の多い OGP や js 系のソースのスニペット化についてです。 今回はヘッダー周り限定なので、コピペすりゃすぐ解決しそうな気もしますが、スニペット化すればいろんな応用ができますよという意味も含めてお届けしたいと思います。 →Dreamweaver のスニペット登録についての記事はこちら 今回の前提条件ですが HTML5、CSS3、modernizr.jsを使う前提のフォーマットです。 記述やファイルの階層などは独自のモノですので、自分の環境に合うように改変してください。 目次 [Dreamweaver]最近の head 周りでよく使うコードスニペット html 要素に modernizr.js 向け記述とソーシャル向け x
--[ html ]----------------------- <div id="radius">Radius Border</div> <div id="radius_img">Radius Image</div> --[ CSS ]------------------------ #radius { background: #69c; border: solid 1px #036; padding: 10px 30px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } #radius_img { width:100px; background:url("../img/button.png") no-repeat; -webkit-border-radius: 5px; -mo
Webコーディングをするときによく使うタグやスタイルシートの読み方についてあまり気にしたことはなかったんですが、誰かに教える立場になったときに、ちゃんとした読み方で教えたいと思ったので、正しい読み方を調べてみました。 HTML – HyperText Markup Language p – Paragraph [読み方]ピー / パラグラフ [意味]段落を示す pre – PREformatted text [読み方]プリ / プリフォーマッティッドテキスト [意味]整形済みテキストを示す ul – Unordered List [読み方]ユーエル / アンオーダードリスト [意味]順序のないリストを示す li – List Item [読み方]エルアイ / リストアイテム [意味]リストの項目を示す ol – Ordered List [読み方]オーエル / オーダードリスト [意味]順
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは? 「Ajax」(エイジャックス)は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML(以下、特に断りのない場合はHTMLと書きます)ファイルを取得し、取得したHTMLを解釈して描画(レンダリング)します。通常
それではサーバー上のテキストファイルを読み込みページ上に表示してみます。テキストファイルはopen()メソッドで最初の引数に"GET"を指定し、二番目の引数に読み込むファイル名を指定します。三番目の引数は同期、非同期を示すフラグです。trueを指定するか省略すると非同期通信、falseを指定すると同期通信になります。データの読み込みが完了したらresponseTextプロパティの値を表示すれば文字が表示されます。 ところが、日本語を含むテキストファイルの場合には問題が発生します。以下のスクリプトを、いろいろな環境で実行すると分かりますが、BOM (Bye Order Mark : 文字コードを認識するための先頭情報) 付きのUTF-8以外は、うまく表示されません。(実行結果をキャプチャーしたデータを用意してあります。また、高橋登史朗さんのページに文字コード調査の結果がありますので参考にして
少し前にCSS-TricksにあったTipsを 見たんですが、利用している外部の サイトがあまり信頼性があると思え ないので代替案をいくつか書いてみ ようと思います。 この記事を見たんですが、 Favicons Next To External Links getFaviconっていうサービスを利用して短いコードでファビコンを取得する、っていう方法ですが、このサイトのサーバーが落ちたり、サービスが終了したら何も表示されません。GAE(Google App Engine)を使ってるみたいですけど、GAEはある程度無料だからどう、とかそういう意味ではなくてリスクの話。規模の大きな企業のサービスなら信頼できるんですけど・・海外サイトならgetFavicon.orgのほうがまだ信頼性はありそうですね。クライアントワークでは不安で使えない。と思った方も多いかと思います。 正直getFaviconって
Just after the HTML5 language introduction,it has become the best choice of web developers and today it is one of the most must-follow trends among web developers.HTML5 development is a fast growing field and its popularity exceeded Flash.You can create more interactive websites with great animations and visual effects. In today’s post we are featuring HTML5 powered one page websites.One page webs
<CSS表記> .table_01 { width:100%;margin:0px 0px 10px 0px;padding:0px; border-collapse:collapse; border-top:1px dotted #999999; } .table_01 th { width:25%;padding:4px 2px 2px 4px; text-align:left;vertical-align:top;color:#666666; background-color:#EEEEEE; border-bottom:1px dotted #999999;border-left:5px solid #FF9900; } .table_01 td { padding:4px 2px 2px 4px; border-bottom:1px dotted #999999;border-l
visible Firefoxでは領域をはみ出して表示しますが、IEとOperaでは領域を広げて表示してしまいます。ただし、表示モードが標準モードの場合には、IE(7以上)とOperaでも領域をはみ出して表示します。(領域をはみ出して表示するのが正しい解釈となります) hidden 上記の全てのブラウザで同じように表示されます。(はみ出た部分を表示しません) scroll 上記の全てのブラウザで同じように表示されます。(縦横のスクロールバーが表示されます) auto 上記の全てのブラウザで同じように表示されます。(縦のスクロールバーだけが表示されます) 使用例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
Coda 2 が5月24日の0時に発売され、「本日限り半額(App Storeで ¥4,300)」ということで、発売直後から Twitter でだいぶ盛り上がってましたね。 私もせっかくなので、半額のうちに買いました。 最近はスクールの準備でちょっと忙しいし、レビューは後日でもいいかなーと思ってたところ Webクリエイターボックス の Mana さんに下記のように脅されたため、泣きながらこの記事を書きました。 @stocker_jp 皆がCoda2のレビュー書かないのは、本日中にナツキさんがうpするレビュー記事を見てから購入予定だからですよ :) ホレホレ…ン? — Manaさん (@chibimana) 5月 24, 2012 結論から言うと、Coda 2 はかなり気に入りました。 これは、特に CSS 書くのが速くなるのではないでしょうか。 実は私は Coda は体験版しか使ったことが
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください! ↑私が10年以上利用している会計ソフト! 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
パネル右:グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く