Twitter Cardsって効果どうなんでしょうね。って毎回思いながら、やっておくに越したことないので導入メモ。 - UPSET!!!!!!!!!!!!!!!!!
Twitter Cardsというのは、FacebookでいうOGP的なもの。 一部OGPで網羅してくれますが、基本Twitterの独自meta情報です。 導入するにはmeta情報を書いておくだけでなく、 Twitterに申請が必要なので、結構めんどくさい。 でも、こういうものはやっておくに越したことないので 何かのサイトがロンチされる度に申請しています。 今年の初めの頃は、たしか申請の許可がおりるまで 3〜4日かかっていたんだけど 最近は数分て許可のメールがきます。 もう申請の必要あるの？ってどうしても思ってしまう... 申請する理由はおそらく、 Twitter Cards用のクローラーがサイトに訪れるタイムラグを埋めるべく 先に情報登録させた情報をTwitter上に反映させている関係っぽい。 即時反映されるのはいいんだけど、、 meta情報として必須項目ではない部分が、 Validate
視差効果（パララックス）を簡単に導入できるJavaScript「skrollr」
twitter facebook hatena google pocket 昨今流行っている視差効果（パララックス）を導入してみたい人は多いのではないでしょうか。 Prinzhorn/skrollrを利用すれば比較的簡単に導入可能です。 sponsors 使用方法 Prinzhorn/skrollrからファイル一式をダウンロード。 <script type="text/javascript" src="skrollr.js"></script> <script type="text/javascript"> skrollr.init(); </script> <link href="skrollr.css" rel="stylesheet" type="text/css" /> あとはdivの中にdataで高さとエフェクトを指定していきます。 <div data-0="" //高さ0px
5分でできるPHPセキュリティ対策 - ぼくはまちちゃん！
こんにちはこんにちは！！ Webプログラミングしてますか！ よく「PHPはセキュリティがダメ」とか言われてるよね。 でもそれって、べつにPHPが悪いんじゃなくて、 たぶん、セキュリティとかが、まだよくわからない人が多いだけなんじゃないかな。 がんばって勉強しようと思っても、なんだか難しい理屈が並んでいたりするしね…。 なので今日は、セキュリティ対策について、 「これだけやっとけば、わりと安全になるよ」ってことを、初心者むけに、大雑把に書いてみます！ 理屈がわからなくても、最初はコピペでも、 なにもやらないより、やったほうがきっとマシになる！ 1. XSS対策 動的なものを表示するとき、全部エスケープすればokです！ (NG) あなたの名前は <?= $name ?> ですね！ ↓ (OK) あなたの名前は <?= htmlspecialchars($name, ENT_QUOTES) ?>
[JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox | コリス
Equalbox.js デモページ [ad#ad-2] Equalbox.jsの実装 HTML 各div要素はjQueryのセレクタで指定できるように、idなどを指定します。 <div id="box-container"> <div id="box1" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> </div> <div id="box2" class="box"> <p>dsfsdfsdfsdf</p> </div> <div id="box3" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdf
【Photoshop】Web用ボタン日本語チュートリアルを集めてみた - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
基本的なフォームの作り方 - パソコンＱ＆Ａ
フォームを作るときの基本は (1)入力画面 (2)確認画面 (3)受付完了画面 (1)から(2)に行くときに入力エラーなどがあれば表示させる。 たとえば上の(1)～(3)をinput1.php、input2.php、input3.phpのファイルにした場合 入力ミスなどのチェックをしてエラーであったとすると(2)で『エラーです』と表示させて、 ユーザーに(1)に戻ってもらう必要がある。 このようにするより1つのファイルの中ですべてを行うほうがユーザーにも親切だと思います。 ここで名前を登録するだけのフォームを作ってみます。 HTMLは次のようになります。 ページ(1) <html> <body> <form name="form" action="【次のページ】" method="post"> 名前<input type="text" name="onamae" /> <input typ
手軽になった！Google Maps API V3 (1/2)
Web上で地図を表示するツールの定番といえば「Googleマップ」。独自の地図を簡単に作れる「Google Maps API」を使って、会社案内のページに地図を埋め込んだり、地図と連動するネットサービスを運営している方も多いでしょう。 このGoogle Maps APIの新バージョン「Version 3」（以下V3と略）が5月27日に公開されました。今回は、V3を使って地図を表示する基本的な手順を紹介しましょう。 Google Maps API V3の主な変更点 Google Maps API V3では、以下の点が新しくなりました。 （1）API Keyが不要 V2まででは、Google Maps APIを使うためにはAPI Keyを取得する必要がありましたが、V3では不要になりました。 （2）iPhone／Androidへの対応 iPhoneやAndroidで地図を高速に表示できるように
Webデザイナーに最適。WordPress環境を解凍するだけで構築·WordPress Portable MOONGIFT
WordPress PortableはポータブルなWordPressです。WAMP環境をZipファイルで提供しています。 WordPress PortableはZipファイルを解凍するだけで使えるWordPress環境です。環境構築の手間なくすぐにWordPress関連の開発に入れます。 解凍したファイル一覧です。WP-Portable.exeを実行します。 MySQLのセキュリティ警告が出ます。 Apacheも出ます。 タスクトレイに常駐します。既にこれで立ち上がっている状態です。 Webブラウザからアクセスしました。localhostでApacheが立ち上がって、/wordpressにインストールされています。 管理画面にログインします。デフォルトはadmin/adminです。 管理画面に入りました。既に新しいバージョンが出ているようです。 オートアップデートも問題なく完了しました。
[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
乾燥肌と敏感肌の悩みに海外製のヒトプラセンタジェルを使ってみた結果
私は乾燥肌と敏感肌で悩んでいました。 小さい赤いニキビもできたりしていて色々な薬は使ってきたのですが、薬を塗れば改善するもののまたすぐに赤みが出てしまったりします。 化粧品も色々使いました。でも改善せず、サプリメントや食事の見直しもしましたがうまくいきませんでした。 そこで注目したのがプラセンタでした。 プラセンタには色々な効果が期待できます。 これはサプリメントで摂取しても肌につけても効果が期待できるものなので、より質の良いものを見つけたいと思って高濃度で配合しているものを探したところヒトプラセンタジェルというものを見つけました。 プラセンタジェルは馬由来や豚由来しか知らなかったので、ヒト由来のものが商品化されていることに驚きました。 ヒトプラセンタジェルは口コミで高評価 ヒトプラセンタジェルは海外製の商品なので大丈夫かなという不安もありましたが、口コミでは高評価で、医薬品となっているの
Pure CSS3 typing animation with steps() • Lea Verou
steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”: As you can see, the number of characters is hardcoded in the steps() function, but that’s the only place. Everything else is totally flexible. Apar
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
角丸がIE6〜8でも一部のCSS3が使える！「CSS3 PIE」の使い方 - [ホームページ作成] All About
IE6～8でも一部のCSS3が使える！「CSS3 PIE」の使い方IE6～8でも一部のCSS3プロパティが表示可能になる「CSS3 PIE」をご紹介。この「CSS3 PIE」を使えば、すべてのIE6～8ユーザに対して（一部の）CSS3プロパティを使ったデザインを見せることができます。ボックスの角を丸くしたり、ボックスに影を付けたり、背景色に透明度を付加したりするなど、CSS3で実現できるデザインを活用しているなら、それらを古いIEでも表示可能にしてみましょう。 Internet Explorer 10を含む最近のブラウザでは、どんどんCSS3への対応が進んでいます。今後は、より便利になったCSS3が広く活用されるようになるでしょう。しかし、IE6～8のような古いブラウザのユーザもまだたくさん居ます。そのために、CSS3で加わった新しいプロパティの活用を躊躇される方々も多いことでしょう(wo
![角丸がIE6〜8でも一部のCSS3が使える！「CSS3 PIE」の使い方 - [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
Showing Hyperlink Cues with CSS | Ask the CSS Guy
I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here’s how to do it in a way that’s supported in IE7, Firefox, and Safari. Download zip Images First, find some nice little icons (or better yet, create them yourself) in gif format that will be used as the cues. It might be easier for them a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sekailog.com
WEBディレクターの為のEXCEL術（1）作業スケジュール | designaholic -Creative Column-
http://www.seotemplate.biz/blog/wordpress-plug/883/
ネットブックにFedora 11を入れてみました。
jQuery試行錯誤｜日々の出来事
最近のWeb制作で必ず1度はお世話になる便利なジェネレーターまとめ5つ - W3Q
