CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
地域の魅力を広げるデザイン事務所｜ローカルデザインなら包むデザイン
地域には『何もない』に思えて実はたくさんの良きところがあります。良き点は日常に埋もれてしまい、その地域の人以外の人が知って初めて「へーすごいんだ！」なんて気づく事があります。 厳かなお祭りや絶景の大自然といってイベントだけではなく、よく通っているお店や毎年続いている地域のイベントなども良きところになりえます。 そんな地域の良きところをデザインやホームページ制作を通してスポットを当てる力なることを信念としています。
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
レスポンシブWebデザインで成功するUI／UXのポイント5つ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。 UI／UXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。 テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心に
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17（ソースファイル付き） | co-jin
レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではないでしょうか。 自分でメニューをレスポンシブ対応にさせるのもいいですが、レスポンシブ対応のメニューも類型化されてきていますので、ユーザーとしても一般的なメニューのほうが使いやすいですよね。 そこで今回は、そんな類型化されたレスポンシブWEBデザイン対応メニューの詳しいチュートリアルとソースファイルがついているサイトをご紹介します。 チュートリアルを使って学ぶもよし、ソースファイルを利用してプロジェクトに活かすものよし。 いずれにしてもとっても役だつサイトばかりです。 これからレスポンシブWEBデザインに取り組もうという方も、ぜひ見てみてくださいね。 Creating a CSS3 Responsive Menu アイコン付きのメニュー。 4段階のブレークポイントで、モバイルではメニューボタン
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
レスポンシブWebデザインの基礎を習得したい人に絶対役立つスライド
レスポンシブ・ウェブデザイン -Responsi... / レスポンシブ・ウェブデザイン基礎 / ADC OnAir 第5回 『レスポンシブ We...他...全6件
WordBench 東京勉強会 in KDDI でプレゼンしたこと Reloaded
麹町にある KDDI ウェブコミュニケーションズさんの会場をお借りして、WordBench 東京勉強会を開催しました。コーディネートは星野さんや大曲さん、micc さんにおまかせだったのですが、セッションのトップバッターで「一番いいのを頼む」とのことだったので、『Twenty Eleven でレスポンシブサイトをつくろう、そうしよう』というタイトルでもってお話させていただきました。 このエントリーは、そのときのスライドを用いながら、セッションを再構成したものになります。直に動画も公開されると思いますので、あわせてご活動いただけたら幸いです。 というわけで自己紹介をしました。質問があったのでここで答えますが、実はサラリーマンのレベルは毎年1つずつあがっています。サラリーマン10年目なので今はレベル10、来年は11になる予定です。←非常にどうでもいい話。 で、言わずもがななのですが、8bitO
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
http://www.cmmntr.com/m/54
レスポンシブ対応のjQueryスライドショープラグイン総まとめ
レスポンシブWebデザインを学びたい人が読むと参考になるスライド