たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
著作権放棄のレスポンシブ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を持っている。 あなたのコンテンツはこれまでになく多くのデバイスとブラウザで閲覧されており、デザイナーはそのこ
スタイルシートによる崩れない 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.
実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
見出しデザインの参考にしたい 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ピクセルに設定します。 続い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
bayashi.jp
ここが違う！サンプルで見るHTML5：CodeZine