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要素の中身が増えるほ
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
超初心者でも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は最近
ニュースやブログはどんどんレスポンシブデザインに移行すべき。無計画なレスポンシブデザインは氏ね！（作る方からの意見 - eupho
最近、レスポンシブデザインの案件をちょこちょこやるようになりました。時代はレスポンシブ！って感じですが、それは本当に正しいのか？という場面もしばしばあります。この件についてはいろんなサイト・ブログで語られていますが、今日は私の考えについて書いてみます。 結論 告知系サイトやブログ、SNSで拡散するのが前提のサイトは、レスポンシブにするのが良いと思います。でも、コーポレートサイトやポートフォリオサイトは無理して対応しなくてもいい気がします。 そもそもレスポンシブデザインとは レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。 今までは、ガラケーに対応させようと思ったら携帯用のサイトを作らなければなりませんでした。でもレスポンシブは、ページは1枚で良
AIR Note！
NEW！！ ・ 最新バージョンでは、「 背景色の設定 」が可能です。 透明感がある背景の色合いを自分で選んでください！！ [ AIR Note！ ]動作時のプリントスクリーン 綺麗な壁紙をご利用していただければ、シンプルなAIRですが、カッコよくなります。 最新バージョン１．９．６より、アプリの背景色をお好みで選択いただけるように機能を追加しました！！ [スケジュール機能] 個人のスケジュール管理等に使用してください。 機能： ・アラート表示⇒ TODO登録時間の「5分前にタスクバーのアイコンが点滅」して教えてくれます。他の操作をしてても気づきます。 ・新規登録、更新、削除⇒直感的に操作が可能。 ・初期表示時は、全データの50件を表示(降順)。 ・日付を選択⇒選択した日付のスケジュールのみ表示。 ・「今月のTODOを見る」ボタンで、今月のTODOを一覧表示 ※先
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gumbyframework.com