たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
phiary
JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較と厳密に比較する方法の２通りがあります. あいまいな比較 == は等価演算子, 厳密な比較 === は厳密等価演算子と呼びます. JavaScript の比較における特徴はこちら 2つの文字列は、文字の順序が同一で、長さが等しく、かつ対応する位置の文字が等しいとき、厳密に等しくなります。 2つの数値は、数字的に等しいとき（数字の値が等しいとき）、厳密に等しくなります。NaNは、どんなものとも（Na
著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid
シンプルで良さそうだったのでメモ。 パブリックドメインのCSSフレームワ ークです。レスポンシブWebデザイン にも対応していますし、グリッドレイ アウトにも利用出来るのでなかなか 汎用性があるのでは無いかなと。 ライセンスはCC0(クリエイティブコモンズ版のパブリックドメイン)で、著作権は放棄されていますので、気軽に使えますね。 凄く特殊な性能をもったフレームワークという訳ではありませんが、個人的には余計な物が備わってない方がありがたいのでカスタマイズしやすいです。 グリッドレイアウトにも対応しています。 以下、サンプルです。 Sample css/* UNITS These divider classes are set on .ingrid container --------------------------------------------------------*/ .in
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
レスポンシブWebデザインで作られた10の美しすぎるサイト ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
PCにモバイル、スマートフォンにタブレット、そして今後はデジタルTVまでユーザーがデジタルコンテンツに多種多様なデバイスでアクセスし、消費する時代が本格化している最中。デバイス毎にウェブサイトをデザインしていてはキリがないとばかりに、最近注目されているのが「レスポンシブWebデザイン」という画面サイズやOSにデザインを柔軟に対応して表示させる手法。今回は、そんなレスポンシブWebデザインを実践しているサイトからThe Next Webが厳選した10の素敵なサイトを紹介します。 — SEO Japan 最近、皆が異なる方法でコンテンツを消費している。私の母はネットブックを持っているし、友人は27インチのiMacを持っていて、ガールフレンドと私はスマートフォンを持ち、彼女の母はiPadを持っている。 あなたのコンテンツはこれまでになく多くのデバイスとブラウザで閲覧されており、デザイナーはそのこ
DataSpiderにおけるコンポーネント間のインタラクションの設計と実装 : 小野和俊のブログ
先日、ソースコードのメンテナビリティについてのエントリを書きましたが、dankogaiさんから「で、具体的にどんなコード書いてるの？」という指摘がありました。 返信エントリでは、「DataSpiderはオープンソースではないのでソースコードをそのまま出すことはできない」と書いたのですが、よく考えたら、一部エッセンスを抜き出してサンプルコードとして紹介することはできるので、最近私が書いたコードの中で、メンテナビリティに関係するコードを紹介したいと思います。 ※ ソースコードの行数が正しく表示されない場合にはブラウザの幅を広げると正しく表示されます。なお、ソースコードの構成をシンプルにするため今回のサンプルではViewModelは使用していません。 目次 ・コンポーネント間のインタラクションの管理 ・最も原始的な実装方法: コンポーネントの相互参照 ・Mediatorパターン ・Role Ob
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
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.
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
Twitter で使われている綺麗な CSS3 ボタンの様なものを実装する CSS のコード
ちょっと綺麗なボタンを実装したいなと思っているのに中々簡単に実装できないことがあると思います。ジェネレーターを使ってもイマイチ作れなかったりする人もいると思います。 以下のコードを貼りつければ一瞬でこのような Twitter みたいなボタンを実装できます。社内ツールとか適当に作ってるサービスなどに組み込んでください。 form input[type=button], form input[type=submit] { color:#fff; text-align: center; background-color: #22AAFF; padding: 5px 10px; border-radius: 5px; /* CSS3 */ cursor: pointer; text-shadow: 0px 0px 2px #39d; background: -webkit-gradient(lin
実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
PHPで機種依存文字を含むメールを送信する方法
仕事でメール送信のシステムを作っていて、文字化けが起こっていたので対応しました。 備忘用に書いておきます。 半角カナとか機種依存文字を文字化けせずにメールに送る方法。 日本語のメールを送るときに、mb_send_mail()を使うと便利ですが、 この関数を使うと半角カナとか機種依存文字で文字化けします。 なので、より汎用的なmail()関数を使います。 次のようにメール用にテキストをエンコードしてください。 mb_convert_encoding($content , ‘SJIS-WIN’) 以下にサンプルを書いておきます。 よかったらどうぞ。 mb_language("japanese"); mb_internal_encoding('UTF-8'); $mail_header = "Content-Type: text/plain; charset=shift_jis\r\n"; $m
記憶に焼きつくメッセージはここが違う！ コンセプトに磨きをかける6つの方法
同じメッセージのプレゼンであっても、伝え方次第で聞き手の印象や記憶への定着度合いは異なります。『アイデアのちから』の著者であるハース兄弟は、記憶に焼きつくメッセージの特徴を、それぞれの6つの要素の頭文字をとって「SUCCESs」と表現しています。 「SUCCESsの法則」にかなったメッセージは、多くの人の気持ちを動かしたり、記憶に深く刻まれると言います。それは次のようなものです。 単純明快である（Simple） 意外性がある（Unexpected） 具体的である（Concrete） 信頼性がある（Credible） 感情に訴える（Emotional） 物語性（Story） この6つのポイントを使ってメッセージの改善前と改善後を比べてみると、よりイメージがつかめると思います。 1：単純明快で、誰でも覚えられるようにする とにかく、細かいことは置いておき、シンプルにすることです。複雑なことは記
Apacheで特定ホスト以外からのアクセスをメンテナンス画面にする方法 - 元RX-7乗りの適当な日々
Webサイトをメンテナンスする際に、一般ユーザからは「メンテナンス中」画面を、管理者・開発者からは通常のサイト画面を出すようにするApacheの設定は以下な感じ。 "mod_rewrite"(モジュール)がLoadされていることが前提です。 ErrorDocument 503 /503.html RewriteEngine On RewriteCond %{REQUEST_URI} !^/503\.html RewriteCond %{REMOTE_ADDR} !^192\.168\.0 RewriteRule ^(.*)$ - [R=503,L] 上記例では、"192.168.0."で始まるプライベートIPアドレス全てをアクセス許可にしていますが、必要に応じてアクセス元の対象を絞るようにしてください。 メンテナンス画面は、503のHTTPコードを返すことで、サーチエンジンにインデクシング
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
ieでhrにbackground-imageを設定して枠線を消す方法。というかそれに変わる記述: 夏かぜデジタル
これももしかしたら常識か、今更といわれるのかもしれないけど検索してもすぐに見つけられなかったので、まあ自分用メモ且つスマートなやり方じゃないのも承知の上で。 hr.example1 { background-image: url(https://blog.seesaa.jp/img/bg/white/side_title.gif); background-repeat: no-repeat; height: 27px; } こんな感じでスタイルを設定すると下のとおり、Firefoxでは画像がでていると思います。 ieで表示するとhrにセットの囲い線も表示されてしまいます。 これをどうにかしたかったので、以下の通りとなりました。 結局IE独自のfilterのAlphaImageLoaderで背景画像の前に、背景画像と同じファイルを設定します。 幅と高さをどちらも1ピクセルに設定します。 続い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
bayashi.jp
CSS 20 stunning examples of CSS 3D transforms
https://www.multyshades.com/2011/02/500-exceptionally-beautiful-photoshop-patterns-for-classy-designs/
ここが違う！サンプルで見るHTML5：CodeZine
