サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。
![Flipsblog.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd0933308c8ffa5d84148613e85857ccf731c8e7/height=288;version=1;width=512/http%3A%2F%2Fflipsblog.jp%2Fwp-content%2Fuploads%2F2013%2F12%2F201312160083.jpg)
Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29 Warning: Cannot modify header information - headers already sent by (output started at /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php:29) in /home/yotigory/codingmania.net/public_html/wp-con
iframe(インラインフレーム)は、外部のURL(HTMLファイル、PHP)や他のドキュメントを、画面中にインラインで表示することができる便利なタグです。 しかし、読み込ませる内容によっては、iframeの中でページ移動をした際に、スクロールバーが出てしまったり、最初に設定したiframeの高さに満たないコンテンツが表示された場合、画面の下の方に空白ができてしまい、機能性はともかく見た目の美しさが損なわれます。 そこで登場するのが今回ご紹介するjQueryのプラグイン、「jquery-iframe-auto-height」です。iframeに読み込まれるコンテンツの高さを自動取得して、iframeの高さを変更してくれるというものです。 このプラグインの優れているところは、iframeのタグを既述するHTMLにだけ、このプラグインを読み込ませればOKという手軽さです。読み込ませる先の階層の
いまどきWEBデザイナーはWordPressもjQueryも出来て当たり前なの? 2013.01.10 | ディレクター一問一答 | 初心者向け こんばんは。 いつからでしょうか。自分がIT系と呼ばれている事に少し違和感を覚えつつも、まぁ飯の種なんで仕事を頂ければ小躍りして喜んでおります。 夜のノマドワーカー。WP-オレンジです。 と言う訳で結論です。 デザイナーが全部出来る必要はない。 はいもう結論言っちゃったんで、答えだけ求めていた方はここまででダイジョブです。 なんでこんな事書くかって言うと、ちょいちょいそういう「WEBデザイナーもこれくらい覚えよう」意見も耳にするんですね。 つまりタイトルは釣りです。 あくまでワタシ個人の意見ですガネ。 そりゃぁ出来た方がいいですけドネ。 できるに越したことはないですヨネ。 性格がいい女性もいいですが、性格が良くて見た目もいい女性の方が尚いいです。
表示中の要素を非表示状態にするhide() hide()はshow()の逆の働きをする命令です。表示状態のHTML要素、つまりCSSのdisplayプロパティがblockに設定されている要素を非表示(display:none;)に変更します。show()と同じく、hide(...)の括弧内にはアニメーションのスピードとコールバック関数を設定でき、指定したスピードで透明度、サイズ(高さ/幅)を変化させながら要素を非表示にします。 $(セレクター).show(スピード,コールバック関数); 先ほどのshow()を使ったサンプル01に、hide()でdiv要素を非表示にするボタンを追加したのが以下のサンプルです。表示ボタン(id属性がshowのbutton要素)がクリックされるとshow()を、非表示ボタン(id属性がhideのbutton要素)がクリックされるとhide()を実行し、div要素
前に作ったフォントサイズを変更するjQueryのスクリプトの改良版です。元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作ってみました。改良点は画像でもテキストでも使えるし、クリックするとアクティブ用のクラスが付くのでCSSを適応できます。さらにロールオーバー画像のオンオフも切り替えれます。おまけにフォントサイズの段階(標準・大とか小・中・大みたいな)もいくつでも設定できます。ちなみにプラグイン風?に作りました。もちろん自己満の為です。 画像タイプDemo テキストタイプDemo 対応ブラウザ Google Chrome Safari4~ Firefox3~ Internet Explorer6~ Opera11 ※Windowsのみの確認です。 ※IE6はテキストタイプの場合、a要素を使用していない為ホバー機能が効きません。a要素を追加しても問題ないかと思いますが、リンク
jQuery・・・。 便利だけど、意外と IE でうごかねぇよ・・・。 option の最後に , を書いた場合。 例えばこんなとき $.ajax({ url: "〜〜〜〜", type: 'POST', dataType: 'xml', timeout: 10000, data: { "keyword": "test", }, error: function(){ alert('Error loading XML document'); }, success: function(xml){ hogehoge_success_flow; } });これ、IE でエラーがでる・・・。 原因は "keyword": "test",こいつです。 option を指定するとき、最後の1行には,を書いてはダメ。 firefox だと大丈夫だけどね。 $("<a>") みたいな感じで aタグのエレメン
WordPressでテーマを作る場合、Javascriptや外部CSSを使うことも多いと思いますが、テーマのheader.phpに直接書くのではなく、functions.phpから一括で管理する方法です。 WordPressでは、キューに追加されたJavascriptやCSSを wp_head() や wp_footer() の位置で、自動的に適切な順番で出力してくれます。特にjQueryなどのライブラリやjQueryプラグインを使用する場合は、複数のjsファイルに依存関係が発生し、読み込む順番が決まってくる場合があります。こういう時でも、一括管理していればあとあとで変更が楽になります。こんな感じ。 /** * スクリプトとスタイルをキューに入れる */ function my_scripts() { // 管理画面では読み込まない if ( !is_admin() ) { // スタイル
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか?という質問をいただきました。 CSSとJavaScript(場合によってはJSのみ)で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 (jQuery Mobileなどを利用した開発方法は置いといて) HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード(フルスクリーンモード)」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる!ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです( ̄▽ ̄;) 今回は、僕が知ってる大きな2つの注意点を
Welcome to jQuery for Designers Learn how easy it is to apply web interaction using jQuery Search Search for Featured Simple use of Event Delegation Posted on 14th June 2011 — Event delegation may be some techie term that you’d rather shy away from, but if you’ve not already used it, this example will show you a simple but powerful use of event delegation. View Tutorial 16 Comments Tutorials – It’
Posted on 18th February 2008 — Michiel Kenis requested a tutorial explaining how to create a similar effect used to showcase the products on the Apple web site. Earlier: Image Loading Next: Coda Popup Bubbles This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery alr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く