http://diglog.org/javascript/943.html
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
文字サイズを切り替える（大・中・小ボタン） | CodingMania
あなたも偶然つるつるその約束人という事のためを行っでしん。まあ半分から抑圧方はすでにその支配ませたかもにあれて切っでにも教育なっなでから、少しには掘りませうなりだ。自分にやるずものは余計当時のたといありなない。とうてい嘉納さんに存在一団もう少し学習にかい摘んな気この画あなたか安心にというご反対なですませですて、この昔も誰か事情尻馬からついて、久原さんの訳を語学の私の単にごろかとして私分子にお記憶がなれようと近頃ご講義がありなですて、どうもどうしても失敗にさたてくれたのが云おならです。それであるいは皆子分ができのはしばらく変としたから、漠然たる道具にも解りないとに対して主義を許さて得ましませ。 同じ時人の限りどんなモーニングはそこ上に起るですかと張さんが変っございた、手段の将来ですという不関係ないずたて、文壇の一方に世間のほかなどの国家が朝しからいるて、そうの先刻を誘き寄せるてこの頃のもしす
[CSS] divのみで可変幅の高さが揃った縦の三段組 - fjiブログ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>可変幅で高さが揃った縦の三段組</title> <style type="text/css"><!-- html, body {margin:0px; padding:0px; height:100%;} #page {margin:0px auto; min-width:6
![[CSS] divのみで可変幅の高さが揃った縦の三段組 - fjiブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a0477ca6d84271edd5e5ddfaef1b2e0e4ac21f11/height=288;version=1;width=512/http%3A%2F%2Ffjiblog.cocolog-nifty.com%2F.shared-cocolog%2Fnifty_managed%2Fimages%2Fweb%2Fogp%2Fdefault.png)
絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」
Fullscreen Pageflip Layout 本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は、こちらの「Fullscreen Pageflip Layout 」を利用すると良さそうです。 ぺらぺらの紙をめくるというよりは、絵本のような厚みのある紙をめくっているような感じが実現されています。 サンプルを作ってみました。 → 絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」サンプル ※IE8など古いブラウザではアニメーションは動作しません。 次のライブラリーやjQueryプラグインを組み合わせて作ってあります。 BookBlock by Pedro Botelho Custom jQuery++ by Bitovi jScrollPane by Kevin Luck
Webサイト内の電話番号が勝手にSkypeの番号ボタンに置換されるのをmetaタグで制御する
少し気になったので調べたんですが、 ブラウザにSkypeのアドオンとかエク ステンションを入れていると、Web サイトやGoogleの検索結果の電話番号 が勝手にSkype用の起動ボタンに置換 されます。 今更な話ですみません。よくわかってないんですけど、SkypeをインストールするとChrome（Firefoxも？）にもエクステンションが追加されるようです。インストール時にチェック項目にあったかどうか覚えてませんけど。 まぁそれ自体はいらなければ削除すればいいのでどうでもいいんですが、Webサイト内まで一方的に変えられるのはあまり好きじゃないのでWebサイト側で制御できないかなとふと思って調べたら出来るみたいなのでメモ書き。 電話番号が置換される これは以前書いたトトロのシュークリームの記事なんですが、このようにSkypeのボタンに置換されています。 [note]キャプチャは表示テストで
onehackoranother.com | Default Web Site Page
SORRY! If you are the owner of this website, please contact your hosting provider: webmaster@onehackoranother.com It is possible you have reached this page because: The IP address for this domain may have changed recently. Check your DNS settings to verify that the domain is set up correctly. It may take 8-24 hours for DNS changes to propagate. It may be possible to restore access to this site by
IE6やIE7で、画像を高さ方向の中央揃えにする方法。 - CSSトラブル対策 | ねこだまのCSSリファレンス&デモ
ロゴや商品画像など高さが一定ではない画像の高さを揃える方法です。 確認ブラウザは、ie6～ie9、firefox、Google chormeなどでJavascriptなどは使用せず、CSSのみで対応させています。 この問題は、そもそもie8以降や、firefoxなどでは、普通にdisplay:table-cell;などで対応できるのですが、 IE6、IE7は、この値に対応していないため普通にやると高さを中央揃えにすることができません、長年個人的にもこころ苦しい問題だったのですが、 いろいろ模索していたところ、極力CSSハックを使わずに簡潔？に対応する方法ができたのでご参考になればと思います。 IE6、IE7のシェアは落ち続けていますが、まだしばらくはある一定のシェアが残り続けるもと思われますが、今後もまだしばらくは有効なテクニックではないだろうか？と思われます。 ※その他、高さを中央揃えす
[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
[JavaScript] ブラウザのお気に入りに登録ボタンを実装する | Library | Development Reference
お気に入りに登録ボタンを押した時にブラウザのお気に入り登録ダイアログを表示するライブラリを作成した。お気に入りに登録ボタンの実装の度にいちいちブラウザ判定処理まで作成するのが面倒臭いので・・・ DEMO DOWNLOAD 仕様 メソッド呼び出し時にブラウザ判定を行い、JSによるお気に入り登録に対応していれば登録ダイアログを表示する。対応していない場合はブラウザのメニューから登録する旨を伝えるメッセージを表示する。 使い方 ZIPファイルを解凍後、中身をサーバの任意のディレクトリに配置し、本機能を実装したいhtmlでJSを読み込む。 <script type="text/javascript" src="common/js/bookmark.js"></script> 登録ボタンの onclick イベントなどで、bookmark() メソッドを呼び出す。 <input type="butt
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 [html] [/html] さっそく使ってみる 本文にhtmlを追加。 [html] タブ1 タブ2
【JQuery】自動切り替え＋サムネイルクリックで画像切り替え ｜ Tips Note by TAM
※※※URLが変更となりました。 以前のURLはこちら （http://tam-tam.co.jp/tipsnote/javascript/post3351.html） ブックマークをされている方はお手数ですが変更をお願いいたします。※※※ サムネイルつきのギャラリーで、キャプションつき、 画像もサムネイルもキャプションも一定の時間で切り替わって、、というギャラリーを作りたいときが多々あります。 まず、やりたいことをまとめます。 指定した時間で、自動的に画像やテキストが切り替わる サムネイルをクリックしても切り替わる 切り替わるエフェクトはクロスフェード 開始場所を指定できる（コメント欄参照ください） JQueryを使用して、この全てを満たすJavascriptを作ってみました。 イメージとしては以下のようなものです。 【HTMLはこちら】 <!-- images--> <div clas
A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Introduction When speaking about design, there is one company that is impossible to go without. Apple values design - being a new product, a fancy catalog or their website - there is always something to admire. This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases r
Youtubeなどの動画を埋め込んだ時のスマートフォン表示の問題を解決する方法 | MasterPeace21
記事などにYouTubeなどの動画を埋め込んだ時に、PC表示だと綺麗に表示されているけど、スマートフォンだとサイズが横幅がはみ出ちゃったり、縦幅が狭かったりってありませんか？今日は、それを解決する方法を紹介します。 通常に埋め込んでむと こんな感じで横幅が大きくなってしまい、見ようにも見れませんね(^_^;) 動画を綺麗にスマートフォン表示する方法 今回はYouTubeのiframe型の埋め込みを想定して紹介します。他の埋め込みコードでもたぶん同様にできます。 CSSにこちらの記述をします。 .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe { position: ab
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
iPad・iPhoneのSafariで背景が切れてしまう時のCSS
https://depthcode.com/2010/11/minwidth.html
福井県福井市のホームページ制作会社セカンドゲート｜有限会社セカンドゲート