Flipsblog.jpサイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。
jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別してURLをリダイレクトする方法｜BLACKFLAG
最近のWebサイト制作では、通常のPCサイトを制作するだけでなく iPhoneやAndroidのスマートフォンや、iPadなどタブレット向けにそれぞれサイトを用意し、 デバイス毎にアクセスさせるURLを分けることも増えてきました。 その様な場合のデバイス制御に使える（であろう） iPhone、iPad、AndroidでPC向けサイトへアクセスした際など、 jQuery（JavaScript）を使って簡単に別のURLへリダイレクトさせる方法を紹介してみます。 jQuery(JavaScript)でiPhone,iPad,Android(アンドロイド)を判別してリダイレクト 例として、サイト構成が以下の様なURLとします。 ——————————————————- 【PC向けサイト】 ｈｔｔｐ：//black-flag.net/sample/pc/ 【スマートフォン向けサイト】 ｈｔｔｐ：//b
wordpressで記事を順番によってデザインを変更する方法
奇数、偶数で背景色を変えたり、はじめの記事だけデザインを変更したりする方法です。 まずは基本のWordpressのループタグから 詳細>> <?php if(have_posts()): ?> <?php while(have_posts()): the_post();?> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <div><p><?php the_content(); ?></p> <p><?php the_category(); ?></p></div> <?php endwhile; ?> <?php else: ?> <p>投稿されたものがありません。</p> <?php endif; ?> これに、投稿記事の表示が何回目かわかるように変数と数える関数をいれます。 <?php i
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
Photoshop初心者は絶対に覚えてほしい!!画像を劣化させずに調整できるPSDデータの作り方
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。 Adobeのソフト一個だけあげるよと言われたら、迷わずPhotoshopを選びます。井畑です。 そんなPhotoshopラブの僕ですが、昔は正直苦手でした。 なぜなら、PhotoshopはIllustratorと違って、調整しているうちにデータが劣化(どんどん汚く)なってしまうと思っていたからです。 正しく言うと、データが劣化しない方法を知らなかっただけなんですけどね、当時は大変でした。 画像も一回小さくしてしまうと、次に大きくした時に荒れてまいますし、トーンカーブ等の画像補正も一回かけると二度と修正できませんでした。何回もトーンカーブかけてるとどんどん画像が汚くなっていくし… よく、サイズを間違えてて2,3時間の作業を一からやり直しして
最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman（ジョナサン・コールマン）氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
SSLページでブラウザにセキュリティ警告メッセージを出させないコツ « DRYOUT プログラマー社員のブログ
URL が https:// から始まる SSL ページを閲覧すると、希にこんなエラーが表示されてしまう場合や、ブラウザのアドレス バーに鍵マークが表示されない場合があります。 ブラウザ別の警告メッセージ一覧: IE: このページには、安全な HTTPS 接続を使用しないで配信されるコンテンツが含まれており、Wen ページ全体のセキュリティを損なうおそれがあります。 Opera: への接続は保護されていないため、重要な情報を送受信しないでください。サーバーはセキュリティ保護を適用しようとしましたが失敗しました。 Firefox: この Web サイトとの通信は一部しか暗号化されておらず、第三者に盗み見られないようにはなっていません。 これは、警告メッセージからも分かるとおり、SSLページなのにページ内に「非SSLコンテンツ (http://)」が混在していること（逆のパターンもある）が原因
Chromeで超簡単にUser Agentを変える方法 :: 5509
@hokaccha に言われて便利すぎて脳みそ飛び出るかと思った途中から嘘です 以下、見たことのある内容が続きます 全然気がつかなかった・・・いつからだろう・・・ ＞ 17からだそうです Chromeにビルトインされてるのですぐ使えます。 ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目あるのは確認してます。 通常はもちろんユーザーエージェントはChromeですが、Cmd+Option+I などでインスペクタを開くと 右下にギアアイコンがあって、そこからインスペクタのSettingが開けます すると Override User Agent という項目があるので チェックすると、よく使いそうな User Agent 一覧がプルダウンで開きます 試しに iPh
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
地味に使えるCSS小技のメモ&サンプル集 - かちびと.net
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。
みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます！ 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン（人件費） ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい！ なんでどんどん情報をシェアしたいですね！ もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
2010年総まとめ：CSSの実用的なテクニック集
CSS3で何ができるの？ という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
公海555000kk线路检测—首页（欢迎您）
お盆期間中に一気読みしたい、Web制作者におすすめのスライド
https://design-spice.com/2012/06/13/responsive-web-design-image/