Toggles is a lightweight jQuery plugin that creates easily-styleable toggle buttons.
トグル処理はON/OFF交互に入れ替わるような処理のことです。 jQueryの「toggle() :表示/非表示」を使用すればすごく簡単に実装できます。 例えば #buttonの要素をクリックするたびに #textの要素を表示/非表示させたい場合。 <p id="button">これは#buttonの内容です。</p> ←ここをクリック <p id="text">これは#textの内容です。</p> ←これを表示/非表示させたい 上記のHTMLを用意したら、 「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。 $(function(){ $("#button").click(function(){ $("#text").toggle(); }); }); たったこれだけ。 以下がサンプルです。 これは#buttonの内容です。 ←ここをクリック これは#tex
スマートフォン対応コーディング 急速に需要の高まるiPhoneをはじめとする「スマートフォン」や「タブレット端末」向けのコーディングにも対応しております。 シームレスにエンドユーザーに正しく情報を届けるためには、最適なコーディング技術が必要となります。 スマートフォンならではの最適なサイト設計・デザインもお気軽にご相談ください。 スマートフォン対応についてのお問い合わせ▶ HTML5への対応 今話題のHTML5とはいったい何でしょうか。大きく分けると2つあります。 検索エンジンの機能が高度化し、特にGoogleが提唱する地球規模の情報アーカイブ化という方向性を実現するには、それぞれのウェブサイトが標準化されてデータベースのレコードとして機能している必要があります。 SEO(検索エンジン最適化)の現場では、サイト構造を標準化することによって検索結果の表示順位が高くなることが常識となっています
HTML5学習のまとめ【HTML5勉強用ページ-学習記事、お薦めリンク集、お薦め書籍まとめ-】はこちら 現状、HTML5でのコーディングはPC向けよりもスマートフォン向けが主なのではないかと思います。 対応していないブラウザのことまで考えないといけないPCに比べて、スマートフォンはHTML5に対応した新しいブラウザが搭載されているからです。 ということで今回は、スマートフォン向けのコーディングについて概要だけではありますがまとめます。外部へのリンクばかりですが。 今回と次回の2回に渡ってスマートフォン向けコーディングの話を書いて以降、videoやaudioといったHTML5の注目新要素を学習していく予定です。 PC/スマートフォンサイトの切り替え モバイル:iPhone 3G発表記念! iPhoneにおける次世代モバイルブラウジングの波|gihyo.jp … 技術評論社で、スタイルシートを
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; を適宜指定する。 フォ
作成:2013/06/24 更新:2016/06/30 Webデザイン > ECサイトなどでは、デザインがクリーンすぎたり、余白が多いと成約率が下がることもあるので、フラットデザインをクライアントさんに中々提案できずにいます。(フラットデザインについてはこちら) とはいえ、画像が少ないからロードは早いし、なによりコーディングの時短も大きいですよね。そろそろ、フラットデザインに慣れてきたユーザーも多くなってきたし、Webサービスなんかでは積極的に使いたいところです。 今回は、WPテーマにテンプレート、必須ツールやCSSなどフラットデザイン絡みの情報を整理。まとめサイトをさらにまとめてあるので、大体は揃うと思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.オンラインツール 2.WordPressテーマ 3.Bootstrap テンプレート 4.アイコ
web制作でお世話になっている便利サイト 今回は画像もなしに一覧にしてしまおうと思います。使うときにパッと一覧するような実用性を考えているので、詰めてあった方がいいですよね。 webcre8がwebサイトの制作をしているとき頻繁にアクセスするサイトリストです。これらは大半、webcre8がこれまで「*役に立つ」タグをつけてブクマ管理していたものですが、他にも漏れがあったり他のタグに入っていたり、何故か毎回検索して使っていたサイトも多いので今回ひとまとめにしてついでにシェアしてみようかなって感じです★要はリンク集ですね。 これらのサイトをぐるぐる回っているうちにみるみるwebサイトが…出来てくると良いですねw 素材サイト まずはよくある素材サイト集。当然全てフリーで商用可です。webcre8は写真をバナーや商用サイトに使う事が多いので、有料素材が用意出来る場合を除き普段からクレジット不要のこ
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない!」などの問題が回避できるかもしれません。 ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhone&Androidサイト制作ガイド ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhone&Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
はじめてスマートフォン向けサイトを制作したときに調べたことのまとめ。 (※スマートフォン専用サイトでiPhoneとAndroidに対応させる場合) 基本的にリキッドデザインにする 画面サイズの目安は、縦のとき:幅320px×高さ480px 横のとき:幅480×高さ320px。 iPhoneの場合は上記サイズで問題ないけど、AndroidのXperiaでは長いページのときにスクロールバーが表示され(初期のモデルSO-01Bで確認したので最新のは違うかも)320pxよりせまくなるっぽい。 あと、横に向けたときにいい感じに伸びてほしいと言われる(可能性がある)ので、スマートフォン専用のサイトならばリキッドデザインにしておいた方が無難。 (2013/10/23追記) Xperiaの初期モデルSO-01BのAndroid 1.6のとき(バージョンアップした場合は分かりません)の縦表示時の有効幅は31
以前から気になって気になって…もう夜はぐっすり眠って朝起きて考えたあげく、11インチこそ MacBook Air!ということで Mac を買い換えました。 普段は Cinema Display に繋げて使うので、モニタの小ささはさほど問題ではありません。iPad くらいの大きさの MacBook Air は魅力たっぷりだし、気になっていたフラッシュストレージもなかなかいい感じに爆速です。 フラッシュストレージの容量はどうしたって足りないので、「MacBook Air をメインマシンにしてクラウド環境をデザインしてみよう!」これが今回のテーマです。 あらゆるデータを Mac/iPhone/iPad で同期したり閲覧できることに加えて、Webブラウザからもそのデータを取り出せること、このあたりが自分にとってクラウドの魅力なので、Mac/iPhone/iPad/Web で同期や閲覧ができることを
どうもー!!最近2011年春モデルのMacbook Proが重量的な意味で重すぎて、もうぼちぼちAirにしたいセナです。 まー、もしAir買ったらまたどうせアプリ入れ直すだろうし、必要な物だけチョイスして整理して入れたいし「あのアプリは必要だ、あのアプリは要らない」とか、たぶんそんな試行錯誤だけで1日以上を費やすかもしれない… オマケに、どうせ近い未来また新しい機種なり何なりが出て、同じ事を繰り返すことになるのは目に見えて居る… 僕、面倒くさいの大嫌いなので、これはなんとかして時間節約出来んもんかと思ったわけです。 と、いうわけで。今日は2013/08時点で「いや、これは自分的に天地がひっくり返ってもとりあえず必要でしょ。」ってアプリを全部一箇所にまとめておくことにしました。 まぁ、必要になるかはさっぱり分かりませんが、こんな記事でもとりあえず書いておけば将来の僕が「ビバ俺!」ってなってる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く