どうも7noteです。レスポンシブで表示非表示を切り換える簡単な方法。 「スマホの時はこのブロックを非表示にして、違う場所にこのブロックを表示する」 「スマホの時は改行を非表示にする。」 など、レスポンシブサイトを作る際によくあるシチュエーションの対策方法についてまとめていきます。 インライン要素にも対応させますよ。 共通のCSSを作成し、出し分け専用のクラスを作る方法。 common.css /* PC専用 */ .pc{ display: block; } .sp{ display: none; } /* スマホ専用 */ @media screen and (max-width:820px) { .pc{ display: none; } .sp{ display: block; } } これだけだと、インライン要素に対応できなくなってしまうので・・・ 改common.css .pc{ display: block; } .sp{ display: none; } /* インライン要素の時 */ .pcinline{ display: inline; } .spinline{ display: none; } @media screen and (max-width:820px) { .pc{ display: none; } .sp{ display: block; } /* インライン要素の時 */ .pc{ display: none; } .sp{ display: inline; } } これで、出し分けたい要素にpcやspinlineのクラスを付けるだけで簡単に出し分けが可能になります。 CSSで出し分ける際は画面サイズによって切り分けています。 SEOに注意！！ 一般的にPCとスマホは同じ内容が記載されている定なので、あまりにも出し分けが多くなり、PCとスマホで全然異なる内容になってしまうとSEOに影響がでる可能性があるらしい・・・ デザイン上必要で使う分くらいは大丈夫だろうなと思いますが、必要最低限の使用回数で済むようにCSSで工夫して作れるところはCSSで頑張りたいところ。 他の方法は？ ・javascriptを使う方法 ・phpを使う方法 これらの方法はユーザーエージェント（訪問者のデバイスの種類）によって切り分ける方法になります。 開発環境（PC）で確認するには、ユーザーエージェントを切り換えられる拡張機能等が必要になるので注意！ まとめ。 これは本当によく使うので常にcommon.cssに入れてます。 ただ、displayがblockやinline以外の要素を出し分けしたい時にたまに困る。無理やり.hoge.pc { display: flex; }とか書けば別に問題はないのですが、なんとなく負けた気分になってしまう・・・。せっかく共通化したのに結局個別で指定しているのが腑に落ちない感じが。親要素を1つ追加するとか対策はいろいろあるんですけどね。 いい方法ご存知の方がいればぜひコメントなどで教えてください！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
「スマホの時はこのブロックを非表示にして、違う場所にこのブロックを表示する」 「スマホの時は改行を非表示にする。」
など、レスポンシブサイトを作る際によくあるシチュエーションの対策方法についてまとめていきます。 インライン要素にも対応させますよ。
/* PC専用 */ .pc{ display: block; } .sp{ display: none; } /* スマホ専用 */ @media screen and (max-width:820px) { .pc{ display: none; } .sp{ display: block; } }
これだけだと、インライン要素に対応できなくなってしまうので・・・
.pc{ display: block; } .sp{ display: none; } /* インライン要素の時 */ .pcinline{ display: inline; } .spinline{ display: none; } @media screen and (max-width:820px) { .pc{ display: none; } .sp{ display: block; } /* インライン要素の時 */ .pc{ display: none; } .sp{ display: inline; } }
これで、出し分けたい要素にpcやspinlineのクラスを付けるだけで簡単に出し分けが可能になります。 CSSで出し分ける際は画面サイズによって切り分けています。
pc
spinline
一般的にPCとスマホは同じ内容が記載されている定なので、あまりにも出し分けが多くなり、PCとスマホで全然異なる内容になってしまうとSEOに影響がでる可能性があるらしい・・・
デザイン上必要で使う分くらいは大丈夫だろうなと思いますが、必要最低限の使用回数で済むようにCSSで工夫して作れるところはCSSで頑張りたいところ。
・javascriptを使う方法
・phpを使う方法
これらの方法はユーザーエージェント（訪問者のデバイスの種類）によって切り分ける方法になります。 開発環境（PC）で確認するには、ユーザーエージェントを切り換えられる拡張機能等が必要になるので注意！
これは本当によく使うので常にcommon.cssに入れてます。
ただ、displayがblockやinline以外の要素を出し分けしたい時にたまに困る。無理やり.hoge.pc { display: flex; }とか書けば別に問題はないのですが、なんとなく負けた気分になってしまう・・・。せっかく共通化したのに結局個別で指定しているのが腑に落ちない感じが。親要素を1つ追加するとか対策はいろいろあるんですけどね。 いい方法ご存知の方がいればぜひコメントなどで教えてください！
.hoge.pc { display: flex; }
~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
はじめに 今回はUdemyの講座の1つである、【世界で30万人が受講】フルスタック・Webエンジニア講座（2019最新版）を受講してみる事にしました。 内容としては、以下を学習しながらウェブサイト・ウェブアプリを作成していく、というものになっております。 HTML5 CSS javascript jQuery BootStrap4 WordPress PHP MySQL Python もちろんこの講座を受けるだけでフルスタックエンジニアになれるとは思っておりません。 今回はフロントエンドの技術を浅く広く体系的に触る事が主な目的です。 セクション1から15まである為、概要を記載していきます。 目次 セクション1:はじめに セクション2:HTML5 セクション3:CSS おわりに セクション1:はじめに 講座の概要説明と環境セットアップがメイン。 Chrome Brackets(エディター) MAMP(ApacheやMySQL等をパッケージしたもの) セクション2:HTML5 セクション2はHTML。HTMLの説明及び、記載に必要なタグやリンクの挿入等について学習。 以下は学習内容の一例。 ウェブページの基本構造 基本的なタグ ヘッダー（見出し）タグ パラグラフタグ テキストのフォーマット リスト イメージ フォーム テーブル リンク ウェブページを作ってみる セクション3:CSS セクション3はCSS。HTMLと同じく、説明及び記載方法等について学習。 以下は学習内容の一例。 スタイルシート インラインCSSと外部CSS 各種スタイリング インラインCSS 内部CSS Class・id・span Div要素 Color属性 Floatレイアウト Position属性 マージン(margin） パディング（padding） ボーダー（border） フォント（Fonts） おわりに まだ序盤ですが、動画を見ながら手を動かして実装していくので、理解しやすいという印象です。 9月中に完了するペースで進めていきます。
今回はUdemyの講座の1つである、【世界で30万人が受講】フルスタック・Webエンジニア講座（2019最新版）を受講してみる事にしました。 内容としては、以下を学習しながらウェブサイト・ウェブアプリを作成していく、というものになっております。
もちろんこの講座を受けるだけでフルスタックエンジニアになれるとは思っておりません。 今回はフロントエンドの技術を浅く広く体系的に触る事が主な目的です。
セクション1から15まである為、概要を記載していきます。
講座の概要説明と環境セットアップがメイン。
セクション2はHTML。HTMLの説明及び、記載に必要なタグやリンクの挿入等について学習。 以下は学習内容の一例。
セクション3はCSS。HTMLと同じく、説明及び記載方法等について学習。 以下は学習内容の一例。
まだ序盤ですが、動画を見ながら手を動かして実装していくので、理解しやすいという印象です。 9月中に完了するペースで進めていきます。
iPhone(safari)では大丈夫なのに、Androidは余白が！！！ パソコンでの開発では出なかったのですが、 実機チェックした時、 Android端末では、以下のような空白ができました。。。 chromeだけでなく、chatworkやslackのプレビューでもこの空白ができました。 原因 スマホの時、htmlを「font-size: 62.5%;」にしていなかったためです。 これは「ルートのフォントサイズ」で、 あるサイトにはこう書いていました。 font-size: 62.5%;は呪文みたいなもの」 [引用][css]html, bodyのfont-sizeはいくつにしてる？~よく見る62.5%ってなに!?~ 有無を言わずに入れとけ!ということですね。 対処法 とはいえ、全部のフォントサイズを変えるのは大変なので、 以下のように応急処置しました。 ポイントは、htmlとbody両方にoverflow-x: hidden;を入れること。 ※overflow:hidden;にすると、スクロールできなくなります。 @media screen and (max-width:768px) { //スマホ時 html { font-size: 90%; //自分が設定したい大きさで overflow-x: hidden; } body{ overflow-x: hidden; } }
パソコンでの開発では出なかったのですが、 実機チェックした時、 Android端末では、以下のような空白ができました。。。 chromeだけでなく、chatworkやslackのプレビューでもこの空白ができました。
スマホの時、htmlを「font-size: 62.5%;」にしていなかったためです。
これは「ルートのフォントサイズ」で、 あるサイトにはこう書いていました。
font-size: 62.5%;は呪文みたいなもの」
[引用][css]html, bodyのfont-sizeはいくつにしてる？~よく見る62.5%ってなに!?~
有無を言わずに入れとけ!ということですね。
とはいえ、全部のフォントサイズを変えるのは大変なので、 以下のように応急処置しました。 ポイントは、htmlとbody両方にoverflow-x: hidden;を入れること。 ※overflow:hidden;にすると、スクロールできなくなります。
@media screen and (max-width:768px) { //スマホ時 html { font-size: 90%; //自分が設定したい大きさで overflow-x: hidden; } body{ overflow-x: hidden; } }
急いでいる人用 BeautifulSoup 4.7.0 以降 で以下の処置が必要です。 cssエスケープで記述します。 先頭の1を \\31 にエスケープすると記述できます。 0〜9までの数字は \\30 〜 \\39 のようにエスケープします。 1234の場合は \\31 234 として、先頭の1桁をエスケープしてスペースを入れます。 from bs4 import BeautifulSoup html = '<h1 id="1">test</h1>' soup = BeautifulSoup(html,'lxml') soup.select('#\\31') # >>> [<h1 id="1">test</h1>] from bs4 import BeautifulSoup html = '<h1 id="0123">test</h1>' soup = BeautifulSoup(html,'lxml') soup.select('#\\30 123') # >>> [<h1 id="0123">test</h1>] BeautifulSoup 4.6.xでの動作 cssエスケープなしでヒットします。 cssエスケープをするとヒットしません。 from bs4 import BeautifulSoup html = '<h1 id="1234">test</h1>' soup = BeautifulSoup(html,'lxml') soup.select('h1#1234') # >>> [<h1 id="1234">test</h1>] BeautifulSoup 4.7.0以降の変更 BeautifulSoup 4.7.0からcss slector のparserの実装がBeautifulSoup独自からsoupsieveに変更になりました。 これにより、複雑なcssセレクタや最新のcssセレクタに対応できるようになっているようです。 https://github.com/facelessuser/soupsieve cssエスケープ こちらの記事が大変参考になりました。 https://qiita.com/ka-ko/items/feacb4d3ff22666d51b1 cssエスケープを行うツールも紹介されています。 https://mothereff.in/css-escapes
1
\\31
\\30
\\39
1234
\\31 234
from bs4 import BeautifulSoup html = '<h1 id="1">test</h1>' soup = BeautifulSoup(html,'lxml') soup.select('#\\31') # >>> [<h1 id="1">test</h1>]
from bs4 import BeautifulSoup html = '<h1 id="0123">test</h1>' soup = BeautifulSoup(html,'lxml') soup.select('#\\30 123') # >>> [<h1 id="0123">test</h1>]
from bs4 import BeautifulSoup html = '<h1 id="1234">test</h1>' soup = BeautifulSoup(html,'lxml') soup.select('h1#1234') # >>> [<h1 id="1234">test</h1>]
BeautifulSoup 4.7.0からcss slector のparserの実装がBeautifulSoup独自からsoupsieveに変更になりました。 これにより、複雑なcssセレクタや最新のcssセレクタに対応できるようになっているようです。 https://github.com/facelessuser/soupsieve
こちらの記事が大変参考になりました。 https://qiita.com/ka-ko/items/feacb4d3ff22666d51b1
cssエスケープを行うツールも紹介されています。 https://mothereff.in/css-escapes
