ソーシャルメディアへの対応 | 第1回 ツイートボタンの実装
ソーシャルメディアへの対応 第1回 ツイートボタンの実装 この記事ではさまざまなソーシャルメディアのウィジェットのうち、ツイートボタンの実装の詳細を解説します。外部のサービスを利用するのですから、仕様やAPIに対する理解を深める必要があります。 はじめに このシリーズでは、Twitterのツイートボタンや、Facebookのいいねボタンなど、各種ソーシャルメディアが用意するウィジェット、OGPの設定などについて、実装方法や概要をまとめてみます。 このシリーズで紹介するサンプルは次のリポジトリにまとめてあります。併せて、参照してください。 ソーシャルメディアへの対応リポジトリ GitHub - codegrid/2015-socials なお、本シリーズの内容は、2015年1月時点のものです。各サービスの仕様は、随時アップデートされる可能性があるため、新しい機能や、すでに使えない機能がこの解
inline layoutを使いこなす | 第1回 画像の余白 1
inline layoutを使いこなす 第1回 画像の余白 1 vertical-align: topの指定で、画像の余白はなぜ消えるのでしょう？ 要素がどのようにレイアウトされていくのかinline layoutの仕様を理解すると、なぜそうなるのかがきちんと説明できるようになります。 はじめに 本シリーズでは、なんとなく使っているけれど、実はあまりよく知らないという人も多いであろうinline layoutについて解説します。 このシリーズで言うinline layoutとは、簡単に言うと、行やdisplayプロパティがinlineやinline-blockである要素、またそれに隣接するテキストなど、block box内に配置されるコンテンツが、どのようにレイアウトされ、ブラウザに表示されるかを示した仕様のことを指します。Web上で参照できるW3Cの仕様としては、以下に概ねまとめられてい
CreateJSでHTML5 Canvasを操る | 第1回 CreateJSとは
CreateJSでHTML5 Canvasを操る 第1回 CreateJSとは 第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。 現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。 これまで、ウェブの動的コ
意外と知らないHTML5 API | 第1回 Drag & Drop APIとは
これらのイベントを使用してドラッグ＆ドロップを実装していきます。まずは最低限の機能を備えたサンプルを見てみます。 実装の最小構成 赤いボックスを下のエリアにドラッグ＆ドロップしてみてください。ドラッグしている要素がエリアに入ると、テキストがonDragOverとなり、ドロップされるとonDropになるのが確認できます。 ソースコード*は次のようになっています。 *注：JavaScriptのソースコード ソースコードの見通しをよくするためにjQueryを使用しています。 ... <div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div> ... ... $('#box').on('dragstart', onDragStart); $('#dropzone').on('dragover
現場で使えるGrunt入門 | 第1回 Gruntを試そう
現場で使えるGrunt入門 第1回 Gruntを試そう シリーズ第1回目はGruntの概要、インストール方法、簡単なタスクの実行方法までを解説しつつ、Gruntを使うための開発環境を整えます。Gruntのちょっとややこしい仕組みや、なぜそのような仕組みが必要なのかについても解説します。 はじめに このシリーズでは、JavaScriptで書かれたタスクランナー、Gruntについて、基本的な部分を解説します。なお、この記事は、Grunt version 0.4.0 の時点で書かれたものです。全3回で構成されています。 サンプル集 本シリーズで使うサンプルは、以下よりダウンロードできます。 pxgrid/codegrid-grunt · GitHub 第1回目では、Gruntの概要、インストール方法、簡単なタスクの実行方法までを解説します。 Gruntってなに？ みなさんは、jQueryを使う時
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
