hr要素を文字で入れ替える
HTML5になってhr要素はセクション内での区切りに使うものなどと役割が割りとはっきりと決められました。今までもそんな感じで使ってた人が多いですけど。ただhr要素のCSSによる装飾はなかなか難しいところがあります。そこを擬似要素を利用してゴニョゴニョすることにより、あまり罫線々々してない区切りを作って頑張ろうとかそういうお話です。 Demo: Swap HR Element with Character(s) 単純に元のスタイルを消して背景を透明にし、そこに擬似要素を重ねてやるという最近良く使われるテクニックです。 hr { margin: 2em auto; border: none; position: relative; clear: both; width: 100%; height: 48px; background-color: transparent; box-sizing:
Canvasに描画したコンテキストのドラッグとクリック - jsdo.it - Share JavaScript, HTML5 and CSS
var ctxt; var itemList = new Array(); var totalNum = 15; var mouseX; var mouseY; var offset; var targNum; var canv; var resetBtn; var btnList = new Array(); var dragFlag = false; var test = new Array(); $(function(){ canv = $("#canvasArea"); ctxt = $('canvas')[0].getContext('2d'); offset = canv.offset(); /*--各アイテムの情報設定--*/ for(var i = 0; i < totalNum; i++) { //オブジェクト var obj = new Box(i); obj.init
CSS 3Dの練習 - jsdo.it - Share JavaScript, HTML5 and CSS
初めての3次元の世界。 珍遊記のガンスを思い出す。 perspectiveがいまいちつかめない。 webkitのみ。 var $world = $("#world"), $target = $("#me"), $inputP = $("#inputP"), $outputP = $("#outputP"), $inputX = $("#inputX"), $outputX = $("#outputX"), $inputY = $("#inputY"), $outputY = $("#outputY"), $inputZ = $("#inputZ"), $outputZ = $("#outputZ"); function update(){ var P = $inputP.val(), X = $inputX.val(), Y = $inputY.val(), Z = $inputZ.val
inputへのコピペ禁止 - jsdo.it - Share JavaScript, HTML5 and CSS
jQuery(function($){ $( "#dont_copy" ).bind( "copy", function (e){ e.preventDefault(); alert( "コピーはダメよ☆" ) }) .bind( "paste", function (e){ alert( "そう、こっちはペーストしていいの☆おりこうね" ) }); $( "#dont_past" ).bind( "paste", function (e){ e.preventDefault(); alert( "ペーストはダメったら☆ でもコピーはいいのよ♥" ) }); }); <div> <input id="dont_copy" type="text" value="これからコピーしてみる?" /><br/> <input id="dont_past" type="text" value="ここに
iOS5でwindow.print() - jsdo.it - Share JavaScript, HTML5 and CSS
document.querySelector('input').addEventListener('click',function(){ window.print(); },false); <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>window.print()</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="form
Android 開発入門
このサイトでは Android 端末上で実行できるアプリケーションを開発するために、プログラミングを初めて学習する人向けのサイトです。 ただし Android の開発に必要な Java 言語の基礎的な項目については Java 入門 を参考にしてください。 ここでは Java はわかっているものとして、アンドロイド開発に特化した部分を中心に解説しています。 Android 開発ニュース タブレット出荷台数わずかに回復 2018年2月19日、MM総研が発表した2017年の日本国内のタブレット出荷台数によれば 863万台の前年比1.4%増。 市場を牽引したのは携帯電話キャリアの Android セルラータブレットで、メーカー毎のシェアは Huawei、LG、富士通と続く。 一方、Wifi のみのタブレットは 4 年連続前年比減。尚、2017 年のスマホ出荷台数は 3199 万台 (前年比 8.7
アイディア次第で使い道色々。フリック入力対応のギャラリーライブラリ·flickGal MOONGIFT
flickGalはiOSのフリック操作に対応したギャラリーライブラリです。デスクトップ向けWebブラウザでも表示できます。 Webサイトにフリック操作で画像を切り替えられるギャラリー機能を追加したいと思ったらflickGalを使ってみましょう。jQueryプラグインで手軽に導入できます。 フリック操作なので主にiOS向けです。でもSafariやGoogle ChromeなどのデスクトップWebブラウザも問題なく利用できます。 写真の切り替えはタブをクリックする他、フリック操作でも大丈夫です。 フリック操作でアニメーションしながら写真が切り替わります。 大きな画像を表示している場合です。prev/nextのリンクでも写真を切り替えられるようになっています。 Yahoo! Japanのトップページにあるのに似た表示形式です。写真だけではなくアイコンを並べて機能を選択するといった使い方も考えられ
[JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free
ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix free via: PrefixFree: Break Free From CSS Prefix Hell [ad#ad-2] Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。 .download { background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3
サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」:phpspot開発日誌
サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」 2011年10月14日- jQuery Joyride Feature Tour Plugin - ZURB Playground - ZURB.com サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」 サイトを最初に訪れた人に、どういうふうに操作するかという部分をサイトをそのまま使って説明することができます。 使い方が超簡単で、<ol>リストにチュートリアルをリスト形式で列挙していき初期化します。 <li data-id="****">のdata-idの部分にポップアップを表示させたい要素のIDを指定します するとリストの順にポップアップがどんどん出て、「Next」ボタンを押せば次の要素にアニメーショ
全画面のプレゼンを実装できるjQueryプラグイン「Jquery.ascensor.js」:phpspot開発日誌
Jquery.ascensor.js 全画面のプレゼンを実装できるjQueryプラグイン「Jquery.ascensor.js」 全画面でスライドが切り替わりつつ２次元のスライド移動が可能な機能を実装できるjQueryプラグインです。 各スライドはDIVで記述するので簡単です。 スライド画面右下にスライドのマップのようなものが表示され、これをクリックすることでも移動することが可能です。 単なる横方向のプレゼンではなくて、なかなかオシャレで目を引くプレゼンが作れそうです スライド切り替えはアニメーションされます。 個人的にも、いつものPowerPointをやめてこういうのでやりたいですね 関連エントリ JavaScriptでプレゼンテーションを作る際に使えそうなjQueryプラグイン「Fathom.js」 WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward
Android ProgressDialogの使い方 | TechBooster
ProgressDialog.setButton ProgressDialogのボタンにはポジティブボタンとネガティブボタンの２種類があります。 それぞれのボタンの設定は、上記表で記したProgressDialogクラスのsetButtonで設定することができます。 具体的には、イカのようにします。 progressDialog.setButton(DialogInterface.BUTTON_POSITIVE, "OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO 自動生成されたメソッド・スタブ Log.d("test", "BUTTON_POSITIVE clicked"); } }); progre
blog.alumican.net » Blog Archive » FlashPlayer11のサウンド新機能を試してみる
ブログを書くのが久しぶり過ぎて、世の中ではすでにFlashPlayer11の話題で持ちきりのようで。 アップデートの目玉であるStage3Dに関してはいろんな人が取り上げているので、ちょっと地味なSoundの新機能をちょちょいと試してます。Sound.LoadPCMFromByteArrayを使えば、ByteArrayに格納されたPCMデータからSoundインスタンスを生成できるようになります。ごにょごにょ加工したByteArrayをSoundインスタンスに変換しておくことで、SampleDataEventでサウンドを動的に生成し続けなくても、同じ音であれば低コストで繰り返し再生できるようになりますね。 以下、SoundインスタンスからByteArrayにデータを抽出して、再びSoundインスタンスに変換し直しただけのサンプルです。クリックで再生します。音量注意。 » サンプル（要Flas
CSS3D Ball - jsdo.it - Share JavaScript, HTML5 and CSS
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div id="ground"> <div class="move"> <div class="ball type2"> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> </div> </div> </div> </body> </html>
JavaScriptなし!! CSSだけで実現する3Dアニメーション | HTML5GOGO
CSS3のアニメーションサンプルで、立方体を扱ったものは数あれど、それ以上の多面体のサンプルが見当たらなかったので、倍の12面体を作りました。 イメージ 概要 今回はそのサンプルを題材に、CSS3で新たに追加されたアニメーション系のプロパティをご紹介します。 ※今回ご紹介するプロパティは、執筆時点では全て要ベンダープレフィックスです。 ※対応ブラウザ：Chrome 12～, Safari 5～ Mozillaは「現時点では Z 軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D 変換はサポートされていません。」だそうです。 MDN – CSS transforms の利用 ※グラフィックボードが3Dの表現に対応している必要があります。 ※動作にはCPUパワーが少々必要になります。 HTMLサンプル ※各面はリンクになっています。 回転方向を指定できるコントローラー付きのサン
Flash Proで作れる！iPhoneのセンサ類を使うアプリ
Flash Proで作れる！iPhoneのセンサ類を使うアプリ：Flashでできる！ iOSアプリ制作入門（3）（1/3 ページ） コピペで作れるFlash CS5.5製iPhoneアプリ 2011年5月に発売された「Flash Professional CS5.5」では多くの新機能が追加されています。自動保存とリカバリ、オートステージサイズ、スマートフォン用アプリ書き出し（パブリッシュ）、USB接続でのモバイル（Android）のテスト、といろいろありますが全体的にはスマートフォンに関するアップデートがたくさんありました。 今回は、その中でも今までのFlash Proで使えなかったスマホアプリ開発向けの「デバイスカメラ」「加速度センサ」「GPS」の3つについて、コピペ（コピー＆ペースト）で使える簡単なActionScriptのサンプルコードを交えて、Adobe AIR／Flashベースの
Another HTML Lint 5
Another HTML-lint 5 is a free checker tool for HTML syntax. You may freely reuse and repost this as long as it is for non-profits. Please make sure to link to this website and specify explicitly your (website manager's) location and contact details. Advertising or any service associated with advertising is forbidden. Note: This is currently Beta version. Please contact us at the following e-mail i
Dreamweaverと3つのビュー：HTML5時代の活用方法 | デベロッパーセンター
HTML5／CSS／JavaScript／SVGなど、現在のWeb開発者が扱う技術は多岐にわたります。Dreamweaverには「コードビュー」「デザインビュー」「ライブビュー」の3つのビューがあり、各ビューの特徴に合わせて活用することで、こうした技術を用いた開発をよりスムーズに行うことができるでしょう。本記事では、Dreamweaver CS5.5における3つのビューの活用方法を紹介します。 ※本記事は、2011年8月に開催されたイベント「ADC MEETUP ROUND 02 HTML5 Camp」にて筆者が行った講演をまとめたものです。 コードビュー コードビューはソースコードの編集を行うためのビューです。HTML5が主流となりつつある現在、開発者はコードビューをメインに使うことで、様々なWebページやWebアプリケーションなどの開発が可能となります。特にDreamweaver C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mobile Safariでoverflowがスクロール可能なボックス - jsdo.it - Share JavaScript, HTML5 and CSS
どうなるECMAScript どうするActionScript | とんぶろ