[B! CSS] nanasenanaのブックマーク

2/3 レスポンシブWebデザインの簡単な作り方 [ホームページ作成] All About

描画領域の横幅によって適用スタイルを分ける方法レスポンシブWebデザインは、閲覧者が利用している端末の画面サイズに応じて適用スタイルを変化させることで実現します。変化させるのはCSSだけなので、HTMLは共通です。そのため、端末の種類別にページを分割する必要はなく、単一のページだけであらゆる端末向けのデザインを提供できます。上図の左側のように描画領域の横幅が広い場合には、段組を作るスタイルを適用することで広い横幅を有効に活用します。上図の右側のように閲覧領域の横幅が狭い場合には、段組を解除するスタイルを適用することで狭い横幅でも見やすさが維持できるようにします。 CSS3のメディアクエリでレスポンシブWebデザインを作るレスポンシブWebデザインは、CSS3で追加されたメディアクエリ(Media Queries)という仕組みを利用して作ります。このメディアクエリを使うと、指定した条件

nanasenana 2018/03/15

CSS

リンク

ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選｜All About（オールアバウト）

ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選閲覧者の画面サイズに応じて適用するCSSを分ける方法が、レスポンシブ・ウェブデザインです。ウェブサイトは1つだけでありながら、閲覧者の環境に適したデザインに表示分けができます。ウェブページをレスポンシブ化する解説記事を12本まとめました。

nanasenana 2018/03/15

リンク

CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法 - Naifix

CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。画像編集ツールで加工してもよいのですが、CSS で表現すると画像の上に表示されているテキストを検索エンジンが認識してくれるので SEO 効果が期待できる、というメリットがありますね。それでは position:relative と position:absolute の使い方を見ていきましょう。 position プロパティの使い方基本 positon プロパティで聞いたことがあるのは「相対配置」と「絶対配置」という言葉だと思います。何となくイメージはできるものの、検索して解説を読んでもイマイチわからず…という状態ではないでしょうか。 position プロパティで使える値をおさらいしておきましょう。 static

nanasenana 2018/03/15

CSS
absolute

リンク

あなたはどれにする？CSSの文字サイズ指定「px、em、%」 - デザインメモ

CSS（スタイルシート）でfont-sizeを指定するとき、pxを使わない方がいいと聞いたことがあります。ですが、pxで指定しないとなると、今度はemと%が出てきて、どれがいいんだ？といつもよくわからないまま使っていました。なので、どれがいいのか？そもそもこの単位たちは何なのか？復習も兼ねて調べてみました！目次・なぜ「px」で指定しない方がいいと言われているの？・font-sizeにおけるpx、em、%の簡単な用語説明 ※一部修正・削除（2016年12月11日）・px、em、%の違いは、絶対？相対？・IEライクなfont-sizeの指定方法・古いIEを気にしない、スマホサイトは「rem」がおすすめ ※追記（2014年10月1日）なぜ「px」で指定しない方がいいと言われているの？むかしむかし「IE」で文字の拡大ができない問題ブラウザには今見ているWebサイトを拡大できる

nanasenana 2018/03/15

リンク

CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分 - Qiita

CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分HTML CSS HTML5CSS3 ーーーーーーーーー追記 2020年10/15 この歳になるとこういう記事のアプトプット怖いですね。。とりあえず周り見てると、こうやってる人多いです html,body{ font-size:62.5%; } って書いてあげて　そうすると 1.0rem が 10pxになるみたい。そんで例えば24pxにしたい場合は2.4remって指定してあげるみたい。以上。ーーーーーーーーーいまだにレスポンシブ怖い、、、、。なぜなら%とかemとかremのフォントサイズ指定があるから。。。これらをなんとなくでしてる人。途中で引き継いだ案件とかでpx以外が指定されててビビってしまった僕とあなたへ捧げます。 😭 大前提 CSSのフォントサイズ指定方法は次の2つ

nanasenana 2018/03/15

リンク

現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）

2. プロフィール • 竹内真 / TAKEUCHI SHIN #singtacks – 創業企業＆所属 • 株式会社レイハウオリ代表取締役社長（W3Cメンバー） • 株式会社ビズリーチ取締役CTO • 株式会社ルクサ CTO – 主な運営サービス • • • • • 2 ビズリーチ http://www.bizreach.jp/ ルクサ http://luxa.jp/ RegionUp http://www.regionup.com/ codebreak; http://www.codebreak.com/ CareerTrek http://www.careertrek.com/ #singtacks supported by

nanasenana 2018/03/15

CSS
HTML

リンク

【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法 - ディレイマニア

ul,olのリストを横並びにするとき、floatを使う人も多いと思いますが、僕はdisplay: inline-block;を使って横並びにする方法が好きで良く使ってます。先日初心者向けのHTML,CSSのマークアップ勉強会にて、このプロパティを知らない方が多くて驚きました。おそらくこの方法を知らない人がまだまだいると思われますのでご紹介します。

nanasenana 2018/03/15

リンク

SEOに重要なタグ12個の正しい使い方

SEOにおいてタグはとても重要な意味を持つ。正しく使えば、検索エンジンにウェブページの主要テーマを正しく伝える事が出来るからだ。事実、タグの使い方を改善しただけで、検索順位がアップした経験を何度もしている。タグの中には、titleやh1のようにSEO順位に直接影響する重要なタグもあれば、そうではないものもある。だからと言って、重要ではないタグを軽視しても良いという事でない。重要度の低いタグであっても、いい加減に使えば、HTML文書の意味合いが変わってしまい、ウェブページの主要テーマが検索エンジンに正確に伝わらない。結果として、検索順位に影響する。大切な事は、どんなタグであっても適切に使用し、正しいHTML文書構造を作り、検索エンジンにウェブページの主要テーマを正確に伝える事だ。そこで、今回はタグの重要度だけでなく、正しい使い方も紹介する。最重要 1. titleタグ titleは

nanasenana 2018/03/15

リンク

[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法

CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介デモページは、下記のように設定されています。スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど）背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード背景色がグリーン IE6 背景色がブルー下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a