Skeleton: Responsive CSS Boilerplate
Is Skeleton for you? You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).
[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア
Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。
![[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア](https://cdn-ak-scissors.b.st-hatena.com/image/square/756f0468957ea28ca57928b50217267f6ec350ab/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016101105-01.png)
レスポンシブWEBデザインに対応させるtableレイアウトCSS
表組みはレスポンシブWEBデザインでは難しい ホームページの制作でよく使われる表組み。価格表やお問い合わせフォームなど、表を使って配置したほうが見やすく、わかりやすいレイアウトにできる場面はよくありますよね？私もホームページを作っているときに表組みは便利なのでよく使います。 でも表の横幅をある程度取れないと、一つのブロックが狭くなってしまうので一行が短くなってしまいます。その影響で逆に見づらくなる、なんてことはありませんか？ 特に横幅の決まらないスマートフォン専用ページやレスポンシブWEBデザインで作られたページの場合、対応がなかなか難しく、悩まされるポイントです。 でも大丈夫です！CSSを使ってレイアウトを可変させることで、きちんと対応できる場合がほとんどです！！ これから表組みの作り方についてご紹介します。 表組みのHTMLはこんな具合に作られますよね。 th・td要素の中身が増えるほ
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
CSS 初学者だった頃に知りたかったこと | rakuishi.com
この記事では、自分が CSS 初学者だった頃に知りたかったことをまとめています。 Normalize.css Chrome, Safari, Firefox, IE などといったブラウザには、各々、デフォルトスタイルが当てられています。これにより、同じ要素なのに、余白や文字の大きさが微妙に異なる、といったことが起こります。 そこで登場する Normalize.css は、各ブラウザの違いを吸収し、各要素の有用なデフォルトのスタイルを維持したものです。Normalize.css を使えば、どのブラウザで見た時にも同じスタイルが当てられます。 Normalize.css は、HTML の head 内で以下のように宣言して使います： <link rel="stylesheet" href="/css/normalize.css"> <link rel="stylesheet" href="/c
レスポンシブWebデザイン対応のサイトを1から作ってみた手順と感想 | RCBlog
「とりあえずJavaScriptとレスポンシブWebデザインは使えるようになった方がいい」なと思い、レスポンシブWebデザインに対応した架空のサイトを1から制作してみました。その時の作業メモ＋作りながら思ったことを、記事として残しておきたいと思います。 作ったサイト 札幌すずき整形外科（実在しない病院です） とある病院（整形外科）から『出先でも見られるようにスマートフォンに対応したサイトを制作して欲しい』という依頼を受けたという設定で作ることにしました。 構成を考える 患者さんが出先で検索した時＝病院にかかりたい時だと想定して、「診療時間・曜日」「住所」が一番に知りたい場所だと考え、それらの情報を極力上の方にまとめる事にしました。 PCで見た時もそれらの情報は優先して見せたいと考え、それぞれの端末で見た時のワイヤーフレームを作ります。レイアウトはスマートフォン・PCの2パターンで考えていき
【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
スクリーンサイズに合わせてフォントサイズを変更 | Web Design Leaves
<section> <h1 class="title">Media Queries</h1> <p class="main-text">Animi sint corrupti ipsum sunt...</p> <section> <h2 class="title">Break Point</h2> <p class="main-text">Vitae, nam, aperiam pariatur dicta officia...</p> <p class="main-text">Possimus, error, a id totam cumque fugiat ...</p> </section> <section> <h2 class="title">Grid System</h2> <p class="main-text">Sapiente dolorum impedit commo
Foundation for Emails | A Responsive Email Framework from ZURB
Foundation for Emails 2 Quickly create responsive HTML emails that work. Even on Outlook. Get Started (Formerly Ink) 5.3k GitHub stars @ZURBfoundation Making Emails Suck Less We know building HTML emails is hard, especially responsive emails. That's why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Use Foundation for Emails to spend less time coding
超初心者でもBootstrapでレスポンシブなウェブサイトを作りたい！①
前回導入したBootstrapを利用して、レスポンシブなウェブサイトを作っていきたいと思います。 ちなみに私のウェブサイト作成能力は、中学生の頃（10年くらい前）密かに流行っていたホームページ作成で少しHTMLをいじったくらいで、他には全く経験がないレベルです（あの頃、学校の全パソコンに入っていたホームページビルダーってまだあるんでしょうか……）。戦闘力は3といったところです。 とまあ、こんなレベルの超初心者ですので、みなさんと一緒に学んでいきたいなーと思っています！ まずはレイアウトの基礎から初めていきます。 グリッドとカラムを利用する Bootstrapで使えるグリッドシステムは横幅940px、12カラムに分割されています。 最初にcontainerクラスを宣言します。このクラスにより、中身が中央揃えになってくれます。次にrowクラスで囲い、そのなかにspanのクラスを合計12になるよ
第1回 今どきのWebサイト制作にはBootstrapがおすすめ！ | gihyo.jp
本連載では、HTML5やCSSの基礎を理解している方へ向けて、Bootstrapの特徴や実際の使い方を解説していきます。レスポンシブデザインは聞いたことがあるけれども「実務採用したことがない」「仕方がわからない！」という方。そんな「あなた」が1つ上のステージへ進むためのパスポートです。Bootstrapを使うことで簡単にレスポンシブサイトを制作できるようになります。 「スマホ専用サイトは使いづらい！予算が掛かる」は古い 昨年頃からスマホ専用サイトの「必要説」が揺らいでいます。その背景には、従来のPCサイト用のデータから必要最低限のデータを抽出した形で、全く別サイトとしてスマホ専用サイトが設計されているため、「UIが変わりすぎてわからない」「情報量が少ないなどの欠点が目立ちユーザーに受け入れらない」といった状況があるからです。 参考資料： 8割以上が「スマートフォン専用サイト不要」と回
レスポンシブなウェブサイトを簡単に構築できるCSSフレームワーク『Bootstrap』
『Bootstrap』というCSSフレームワークをご存知でしょうか？ このBootstrapはウェブデザイン初心者でも簡単にクールなサイトが作成できるとして、にわかに注目されています。 Bootstrapについて、数回に分けて見ていきます。今回はBootstrapがどのようなものかについてと、導入方法です。 Bootstrapって？ BootstrapはTwitter社が提供しているCSSフレームワークと呼ばれるものです。これを利用すると、Twitter風のクールなウェブサイトを作成することができます。 Bootstrapには大きく3つの特徴があります。 1. ウェブデザインの初心者でもかっこよくウェブサイトが作れる しつこいようですが、一番の特徴です。 用意されているCSSやJavaScriptを呼び出し、組み合わせるだけでOK。 グリッドレイアウト、カラムレイアウト、フォーム、ポップ
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
Yumemi 狐 | とある大学生のWebポートフォリオ
こちらは、とある情報系大学生によるWebポートフォリオになります。個人または学校の授業で制作したデジタル作品、徒然なるままに思いついたことを綴るブログなどを順次掲載していきます。このサイトについて こちらは、とある情報系大学生によるWebポートフォリオになります。個人または学校の授業で制作したデジタル作品、徒然なるままに思いついたことを綴るブログなどを順次掲載していきます。 私について デザインやプログラミングを中心に勉強しています。好きな食べ物は、プレーンヨーグルト、漬け物、ラーメン、つけ麺などなど。カフェでのんびりするのが嗜好。 勉強中のスキル HTML5 / CSS3 / jQuery / JavaScript / PHP / WordPress / Photoshop CC / Illustrator CC / Flash CC / Dreamweaver CC / Coda
Strikingly - あなただけのウェブサイトを制作するための、最高のウェブビルダー
数分でウェブサイトを制作する ブランドを確立。世界を制覇。 コードはなし 、デザインのスキルも必要ありません。
レスポンシブWebデザインにおけるコーダーの役割 World of granshe.
先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン（以下、RWD）の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
レスポンシブwebデザインの作り方とSEOとUXを考察
2013年は更に レスポンシブ は流行ではなく 一つのデザイン定義として定着する年なのではないかと。 その定着する新しい手法のデザインの作り方と SEO 、 UX の観点から考察していきたい。 レスポンシブwebデザインの基本 レスポンシブwebデザイン とは 1ファイルでどんなデバイスでも柔軟に対応する事が出来る手法です。 この手法が編み出される前は、端末別等で違うCSSファイルを呼び出し、デザインを変えていたかと思いますが、このやり方だとデザインを変更する時に端末別に分けた分のデザインを変更しなくてはなりません。 レスポンシブwebデザイン もそうゆう意味では変えなくてはならないのですが 横幅の計算でデザインしていきますので変更点が少なくなります。 初めは リキッドデザイン と似ていると感じると思いますが、違いはこちら ■リキッドデザイン これで レスポンシブwebデザイン とはなんぞ
Responsive Design Testing
Responsive Web Design Testing Tool This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page. Unfortunately, with the way browser security works, you are unable to navigate your site through the frames that your website
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ダウンロードページ
gumbyframework.com
