現在は状況が異なる可能性がありますのでご注意ください。11.12以上のどちらか一方にしか対応していないため、その両方に対応する書き方について解説します。この記事の内容は「スマートフォン時代のWebコーディングスクール」の授業資料の一部です。X対応していないWebページはどう見えるのか縦持ちでは特に問題ありませんが、横持ちの場合画面の左右に空白ができてしまいます。このブログの記事ページを横持ちで観ると以下の画像のように見えます。このブログの場合、bodyの背景色は濃い茶色、ページ全体を包んでいるwrapper要素に背景画像が設定されています。Xのディスプレイを横向きにした時、センサーハウジングや角丸の部分を除いた「セーフエリア」とよばれる領域があります。X対応していない場合、このセーフエリアはbodyの背景色になり、テキストなどのコンテンツがセーフエリアに表示されることはありません。セーフエリアの外までコンテンツを表示させるには、以下の要素をHTMLのhead要素内に入れます。このままだと、ページ内の本文テキストや写真などのコンテンツがセンサーハウジングなどと被ってしまい、コンテンツの一部を見ることができない場合があります。そこで、CSSを使用してコンテンツ部分のみセーフエリア内に配置することができます。11.1以下と11.2以上で異なります。要素を作り、そこに以下のようなスタイルを適用することと書かれていました。leftを指定しています。セーフエリアの大きさは左右と上下で異なるため、まとめて一括指定はできません。11.2のSafariでは無効(廃止)になり、代わりにenv()を使用することとなっています。現在WebKitのサイトには以下のように書かれています。Xではコンテンツがセーフエリアとかぶってしまうという問題があります。どちらでも動くようにするには両方で動くようにするには、以下のように併記する方法があります。Xでも、それ以外の端末でも適切なpaddingを指定することができます。スマートフォン時代のWebデザインスクールを渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。PHP徹底入門講座・WordPressカスタマイズ講座を開きます「PHP徹底入門講座」は、「HTMLはわかるけどプログラミングは未経験」の方向けの日曜講座です。プログラミングを始めてみたい方は、まずはこちらへどうぞ。別途、「WordPressカスタマイズ講座」も開講します。管理画面から更新可能な中小企業サイト」制作までやります。スマートフォンやRetinaディスプレイに対応した新しい内容にリニューアルしました。渋谷にお越し頂くのが難しい場合、ご自宅で動画受講も可能です。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。WordPressPCのメールアドレス:Twitterでは、Web制作に関する最新情報をツイートしています。iPhoneAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。「スマートフォン時代のWebデザインスクール」を東京・渋谷で平日夜に開催します「スマートフォン時代のWebデザインスクール」は、2020年2月から平日夜開催!初回体験レッスンも開催します。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。2020年2月に「WordPressカスタマイズ講座」を開きます以下の方を対象として「WordPressカスタマイズ講座」を開きます。AppはAndroidのホーム画面にあるGoogle検索フォームのことである」と解説している記事が多いですが、どうも数が合わないと思って調べた結果、別の結論に至ったのでこの記事にまとめています。Edgeの正式版がリリースされました。いえ、この記事を読んでいる方の中には「まだ使ったことがない」という方もいらっしゃると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。2019年12月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。年末年始にWebデザインを学び直すための3つのステップこの記事は、以下のような方を対象にしています。