レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
Quick Start
Getting StartedQuick StartAjaxAPIClassContextDomEventsModuleOptionsServiceThemingModulesAlertBreadcrumbBreakpointButtonColorDropdownFormGridHelpersLabelLayoutMixinsModifiersNavbarOffcanvasPagerSpaceStickyTableTabsToggleTypographyServicesAppAnimateLangMessageModalModalFormModalElementProgressResponseUtilsAddonsAutocompleteCheckComboboxDatepickerEditableMagicQueryNumberSelectorSliderUploadValidateVi
Topcoat
CSS for clean and fast web apps. Soooo Fast!Performance is our #1 goal. Every component we design is benchmarked for performance. You can see our results. Components GaloreWe have the building blocks to get you up and running fast. Our growing set of components were born from CSS. ThemeableIs that even a word? It should be! We love our theme, but we don’t want to hit your brand over the head with
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
ウェブデザイナーの勉強にいい！デザインの基本原則からPhotoshopの実践的なテクニックまで学べる無料のeBook -Pixel Perfect Precision 3
デザイナーさん・ディレクターさんをはじめ、ウェブデザインに携わる全ての人に必携です！ デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べるeBookを紹介します。無料なのに市販の書籍に負けない、いや人によってはそれ以上の価値ある内容がぎっしり詰まってます。 Pixel Perfect Precision 当ブログでもお馴染みのPixel Perfect Precisionの第3版が、昨日リリースされました（パチパチパチパチ） 内容も大きくバージョンアップし、ページ数も165ページから214ページへと大増量。 デザインにおける、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の
あのフォントがWebフォントに？！有名フォントにそっくりなWebフォントを見つけたよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ぺちこです。 何か気のきいたオープニングトークをしようと思いましたが、びっくりするほど何も思いつかなかったので割愛します。 突然ですが、「あのフォントをWebフォントとして使いたい。でも、それにはライセンスの壁が・・・。」という悩ましいとき、ありますよね。 欧文フォントに関しては数も多いので代替のWebフォントを探すかと思いますが、これがまた時間がかかる。探している間に素敵なフォントに出会うこともありますが、短縮できるものはなるべく短縮したい！ というわけで、「Google Fonts」と「Font Squirrel」から有名なフォントにそっくりなフォントを探してみました。 比較するときの基準 探したとき、主に重視した部分は以下です。画像で比較しているアルファベットだけが似ていても仕方ないので、ある程度の基準を設けています。 「a」「b」「c」「d」「o」の丸み 「a」「g」の
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
ミケネコの htaccess リファレンス
はじめに .htaccess ファイルの使い方 .htaccess ファイルの使い方を説明します。 アクセス・コンフィグレーション クライアントのリソースへのアクセスを、条件によって制限します。 ホスト/IP 制限 ホストまたは IP アドレスを用いて、リソースへのアクセスを制限します。 ユーザ認証 パスワードを用いて、リソースへのアクセスを制限します。 リソース・コンフィグレーション リソースに対する、何らかの制御を行います。 ブロック コンフィグレーションの範囲を、特定のファイルだけに制限します。 ディレクトリ制御 ディレクトリに対する制御を行います。 HTTP ヘッダー HTTP ヘッダーにまつわる制御を行います。 MIME/ハンドラ タイプ MIME タイプやハンドラタイプに、特別の意味をもたせます。 コンテンツネゴシエーション クライアントに返送するデータを、条件によって選択して
杉浦康仁とホームページ製作〜ＵＲＬを書き換えろ！「.htaccessに書く場合の注意」
このように便利な Rewrite 機能は、個別ディレクトリに設置された .htaccess にも指定することができる。しかし、.htaccess に書けるのは RewriteEngine, RewriteBase, RewriteCond, RewriteRule だけで、ロギングに関する指定子などは書けないし、色々と注意すべきハマリ点がある。ここではそれらを一気に解説しようと思う。これは管理者になれない（＝httpd.confを編集できない）一般ユーザにとっては重要な情報になるだろうね。 .htaccess は個別の公開ディレクトリに設置されて、細かい制御を出来るもので、よく個別ディレクトリにアクセス制限を入れたりするのに使う。しかし、いくつかの Apache 指定子は、ここにも書けるし、幸いなことに Rewrite機能（正確には mod_rewrite.so）は、この .htacces
人知れず生息を続ける太古のウェブサイト23選
阿部寛のホームページで驚いてちゃいけない... AltaVistaってまだ生きてたんですね...Yahoo!に吸収されたけどドメインもインターフェイスも昔のまんま動いてます。 ライコス犬もHotBotもWebCrawlerも。 誰が使っているんでしょうね...。今もこの画面からワンクリックのところでHTML 2.0、フレーム、gifアニメ、ヒットカウンター、ウェルカムページが躍動を続けていると考えると万感迫るものが。 90年代の栄華のまま時がとまったウェブを23個まとめて、どうぞ。 ザ・ロストワールド（The Lost World） ワーナー・ブラザーズには｢You've got Mail｣、｢Space Jam classic｣、｢Wild Wild West｣など保存状態のいい映画プロモサイトが若干残ってます。僕が好きなのは｢ジュラシックパーク：ザ・ロストワールド｣かな...映画で重要
livedoorの開発体制 - livedoor ディレクター Blog
こんにちは、livedoorの櫛井です。今回は、livedoor の開発体制についてお話したいと思います。前回の「モバイルサイトのスピード構築術」という記事ではモバイルサイトの構築を行う際の開発体制について触れましたが、今回はパソコン向けサイトについてのお話となります。 ■担当する案件の数 よくいろいろな会社の方に驚かれるのですが、基本的に livedoor の案件には、ディレクター、プログラマー、デザイナー、マークアップエンジニアの各担当者が、ひとりずつ就くことになります。職種を問わず、ひとりあたり運用サイトをふたつ、新規サイトをひとつほど、常時担当しているのが平均的です。 とはいえ、大規模なサイトや OJT を兼ねる場合は、ひとつのサイトに各職種がふたり就く場合もあります。ひとりあたりの担当する範囲が広くて大変な部分もありますが、少数精鋭なぶん効率が良くなり、いわゆる「待ち状態」が少な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://phpunit.de/manual/3.8/ja/index.html
Speed and Performance Optimization
ページ高速化のため .htaccess でキャッシュ設定を絶対やっておこう！
SoftBank Developers Support Site