HTMLに関するtakanakahikoのブックマーク (18)

  • 動画制作・映像制作 ・撮影・マーケティングのLOCUS国内最大級の動画制作実績 | 東京都

    幅広い業界の企業から学校、官公庁・自治体など累計約2,000社以上のビジネスの課題を動画で解決してまいりました。 累計20,000以上の映像制作や動画の活用コンサルティングの実績がございますのでお気軽にご相談ください。 YouTubeチャンネルコンサルティング 企業や団体が運営するYouTubeチャンネルの戦略設計から開設・運用代行、映像制作、動画広告の運用などのYouTubeにまつわるコンサルティングをご提供。 もっと見る テレビCM制作サービス FAST CM テレビCMをもっと手軽に。映像制作のプロが、テレビCMの制作から配信、効果分析、改善提案までをワンストップでご提供。 もっと見る 調剤薬局デジタルサイネージ シニアード 調剤薬局の来局者は約55%が60歳以上となるため、シニアを対象とした商品・サービスの認知拡大など動画を活用したマーケティングに最適なメディアです。 もっと見る

    動画制作・映像制作 ・撮影・マーケティングのLOCUS国内最大級の動画制作実績 | 東京都
  • GoogleスプレッドシートをJSONPで利用する(前編) - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 以前Yahoo! pipesで似たような事をやりましたが、 どうやらGoogleスプレッドシートそのものがJSON出力に対応していたので、 それをJSから利用してみようという試みです。 URLの取得 「リスト」と「セル」 JSONPしてみる どんな時に使えそうか デメリットなど 後半へ URLの取得 現在の「新しいスプレッドシート」では「公開データのリンクを取得」のUIがありませんが、APIは一応整備されていてJSONPでも利用できます。 URL: https://spreadsheets.google.com/feeds/list/[A]/[B]/public/basic?alt=json [A]にはスプレッドシートID、[B]にはワークシートIDが入ります。 まずは対象となるスプレッドシートをJSONで出力する事からスタート

    GoogleスプレッドシートをJSONPで利用する(前編) - Mach3.laBlog
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
  • フォームからPOSTし、googleスプレットシートを更新するサンプル

    ここを参考した、ありがとう御座いました。 つまり、googleスプレットシートをデータベースのように利用する。 ① まず、googleドキュメントでスプレットシートを新規作成、シート名を"DATA"に変更する ② ツール → Script Editorを開け、このサイトからスクリプトをコピペする ③ スクリプトのfunction名「doGet」を「doPost」に変更して、保存、プロジェクト名は任意 ④ 関数選択で「setUp」を選択し、実行、ポップアップした「Authorization required」にAuthorizeし、完了メッセージのページが表示される ⑤ もう一回「setUp」を実行、今回は何も表示しない ⑥ 「公開」→「サービスとして公開」、ポップアップ窓で、「Allow anyone to invoke this service」、「Allow anonymous acc

    フォームからPOSTし、googleスプレットシートを更新するサンプル
  • 超高速簡易データベース(Ver.1.15)

  • テキスト読込型のデータベース製作工程

    JavaScriptでデータベースを作ってみるサンプルです。製作過程を段階的に紹介しています。 JavaScriptのデータベースの利点と弱点 ★データを読み込んでしまうので動作が機敏。(データが大きくなると読み込みに時間がかかる) ★1つのHTML内で検索処理が完結するので技術面の安全性が高い。(CSVファイルは公開されてしまうので、個人情報は扱えない) ★CGIを設置する必要がなく、データだけを更新することもできる。(ブラウザからデータを更新できない) 製作の目的 ★JavaScriptでファイルの読込を行い、CGIを使わずにデータベースを運用できることを実証する ★プログラムとデータを分轄し、データはテキストファイル単独でメンテナンスを可能にする ★複数の検索機能や並び替えの機能を持ったデータベースの基構造を製作する ★製作の過程を表示することにより、シンプルなデータベースや他の目

    takanakahiko
    takanakahiko 2015/01/23
    えええなにこれ面白い
  • Twitter アカウント名を入れるだけでアイコン画像を表示してくれるURL

    @kasumiiです。こんにちは。 2012年に書いた「Twitterのユーザ名からアイコンを取得する方法」という記事が古くなり、もう使えなくなっている情報がほとんどになってしまったので、2014年5月現在の最新情報を調べてみました。 Twitterのスクリーンネーム(アカウント名)を入れるだけでプロフィールアイコン画像を取得できるサービスをいくつか実際に試して、正常に表示できたものだけ集めています。 以下のURLの {screen_name} の部分に好きなTwitterアカウント名を入れるだけでOKなのは、お手軽でありがたいですね!

    Twitter アカウント名を入れるだけでアイコン画像を表示してくれるURL
  • CSSセレクタ20個のおさらい

    CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

    CSSセレクタ20個のおさらい
  • オリジナル画像のツイートボタンを設置する方法 | design Edge

    Twitterのツイートボタンを設置する機会がありましたので、自作のオリジナル画像にする方法を備忘も兼ねてまとめておきます。 独自の画像を使用したボタンの設置は過去にも経験がありましたが、あまり機会がなくすっかり忘れていました…。今後のためにもここにメモしておきますので、デザイン重視でのWebサイトを作成など、ボタンをカスタマイズする際のご参考になれば幸いです。 基的な構造は以下ソースの通りです。 HTML <a href="http://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolb

    オリジナル画像のツイートボタンを設置する方法 | design Edge
  • 動くCSSのためのメモ。

    CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

    動くCSSのためのメモ。
  • info-architecture.jp

    This domain may be for sale!

    info-architecture.jp
  • PC/スマートフォンで背景画像を固定する - Cube Lilac

    Web ページで背景画像を固定する場合、オーソドックスな方法は background-attachment プロパティを fixed に指定する事らしいのですが、この方法だと(PC で閲覧する分には問題ないのですが)手元の iPhone (iOS 5.1.1) では固定されませんでした。 /* この方法だと、iPhone(スマートフォン)で閲覧した時に背景画像が固定されない */ body { background-color : #cccccc; background-image : url('images/background.jpg'); background-repeat : no-repeat; background-attachment : fixed; background-size : 100% auto; /* 画面の幅に合わせて拡大・縮小 */ } そこで少しググってみ

    PC/スマートフォンで背景画像を固定する - Cube Lilac
    takanakahiko
    takanakahiko 2015/01/21
    “fixed”
  • CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture

  • 【CSS】:hover疑似クラスで指定要素とは別の要素にスタイルを適用する - めめんと

    CSSの「:hover」疑似クラスを使えばマウスオーバー時にその要素に対して何らかのスタイルを適用させることが可能ですが、:hoverエフェクトを指定した要素以外の要素にスタイルを適用させたいときには隣接要素の場合は「+」、兄弟要素の場合は「>」として以下のようにします。 <style type="text/css"> <!-- #test:hover{ background-color: blue; } #test:hover + #target{ background-color: red; } #test:hover > #inner{ background-color: green; } #test:hover > #inner:hover{ opacity: 0.7; } --> </style> <div id="test"> <div id="inner"></div> </

    【CSS】:hover疑似クラスで指定要素とは別の要素にスタイルを適用する - めめんと
  • CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld

    実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ

    CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld
  • CSSで画像の横に文字を回り込ませる方法と解除する方法 | 9ineBB

    まずは文字を回り込ませる方法ですが imgにfloatを使うことで文字を回り込ませることが出来ます 例 画像にCSSでfloatを書けてやると、その後に来る文字を画像に回り込ませることが出来ます HTML コード <img src="img/000.jpg" class="left"> CSS コード .left {float: left;margin-right:10px;} といった具合になります、leftとrightで右側左側をそれぞれ入れ替えて使えばOKです これで文字の回り込みをさせることが出来るのですが 問題点があります、それは文字の量が画像を覆い尽くす量が無かった場合にレイアウト崩れを起こしてしまうことです 次のコンテンツが、飲み込まれてしまっています 画像の文字の回りこみを解除する方法 解除の仕方はCSSでclear:both;を次に来る要素のCSSにつけてやるだけなのです

    CSSで画像の横に文字を回り込ませる方法と解除する方法 | 9ineBB
    takanakahiko
    takanakahiko 2015/01/20
    けっこう忘れやすい
  • 分かりにくいCSS height のパーセント設定のまとめ - A Memorandum

    CSS にて、要素の height にパーセント値を指定した場合の表示について 分かりにくいので簡単にまとめておきます。 要素をウインドウ全体に表示したいけど上手くいかない 要素を画面全体に表示したい場合、「height: 100%;」と指定しても上手くいきません。 たとえば以下のHTMLで、div を画面全体に表示したい場合、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div class="main"> </div> </body> </html> div.main 要素を以下のように指定して、 div.main { height: 100%; } あれ、height

    分かりにくいCSS height のパーセント設定のまとめ - A Memorandum
  • margin-スタイルシートリファレンス

    マージンは領域間のスペース、パディングは領域内のスペースです。 尚、マージンには負の値を指定することもできます。 マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるため、注意が必要です。 ■使用例 スタイルシート部分は外部ファイル(sample.css)に記述。 p.sample1 {background-color: #f8dce0; margin: 10px;} p.sample2 {background-color: #f8dce0; margin: 10px; padding: 10px;} p.sample3 {background-color: #f8dce0; margin: 10px 20px;} p.sample4 {background-color: #f8dce0; margin: 10px 20

  • 1