2017Web制作の基礎から学べる「スマートフォン時代のWebコーディングスクール」5月に初回体験レッスン開催!渋谷でも動画でも受講可能です。現在は状況が異なる可能性がありますのでご注意ください。Xではディスプレイの形がこれまでのように長方形ではなく、複雑な形になりました。そこため、アプリやWebページの表示がどうなるのか気になっている方も多いと思います。11のSafariで見てみたところ、いくつか思わぬ発見もあったのでまとめたいと思います。Storeを起動し、Xcodeを最新の9にアップデートします。9はインストールできないのでご注意ください。Xが起動するはずです。Xで設定アプリを起動し、言語を日本語に変えた直後の画面がこのようになります。上までスワイプするとホーム画面に遷移します。IDはありません)余談ですが、画面左上の時計と[設定]見出しの間に妙な間隔がありますが仕様のようです。画面をスクロールさせると[設定]見出しは画面上に固定表示になります。XのSafariで開くことができます。command+Sキーを押すと、枠なしのスクリーンショット(透過PNG形式)がMacのデスクトップに保存されます。これ以降、そのスクリーンショットを掲載します。ホームインジケータがコンテンツと被らないか?私が最も心配していたのはこれです。結論から言うと、このブログや多くのWebページのフッターの著作権表記部分は、ホームインジケータとかぶって見えなくなるということはなくギリギリ見える位置にありました。(上記左)ただ、米Yahoo!のニュース記事ページで画面下に表示されているFacebookアイコンとわずかに接触しているといったことはありました。(上記右)ただ、はてなブックマークのWebページなど、フッターに広告を固定表示しているページで広告の文字とホームインジケータが完全に被ってしまうということがありました。(上記左)なお、ページの表示直後や下方向にスワイプした時など、ツールバーが出ている状態ではホームインジケータがコンテンツと被ることはありませんでした。ページの一番下の部分はツールバーの上までスクロールされます。(上記右)なお、「特に画面読み向き時にホームインジケータの水平線が文字などに被って邪魔」ということはありました。スクロールすればホームインジケータとは被らなくなるのですが、かなり気になります。画面の角の丸みでコンテンツが欠けないか?↑のYahoo!のスクリーンショットをご覧いただければ分かるかと思いますが、画面の角が大きく丸くなったためページの端にあるボタンが欠けてしまわないか、タップできなくならないか気になっていました。結論としては多くのWebページは(ギリギリすぎて少々気にはなるものの)問題ありませんでした。Japanでは画面下に固定表示されるログインボタンの角が角丸にかなり近いですが、ギリギリ当たっていません。画面横向き時にセンサーハウジングに当たらないか?これは問題ありませんでした。呼ばれる、センサーハウジングなどを除いた領域に表示されます。セーフエリアの外は、bodyの背景色が表示されます。上記スクリーンショットをよくご覧いただければ分かるかと思いますが、スクロールバーがセンサーハウジングと被った場合、その部分は表示されなくなるようです。これはどうしようもなさそうです。画面の端まで画像などのコンテンツを表示させたいという場合、下記ページにある方法で対応すれば対応は可能です。セーフエリアと同じ大きさのpaddingを指定する方法についても書かれています。Xではこのような対処はされておらず、単純に従来通りのスマートフォンサイトとして表示されています。Xに対応しなければ...」と考えている方は多いかもしれませんがAppleもこのような状態ですし、そもそもスマートフォンを横向きにしてWebページを閲覧する方は少ないというアンケート結果もあります。Xは、多くのWebページは問題なく表示できるものの、場合によっては画面の角丸やホームインジケータにコンテンツが被ってしまい、見づらくなることもあります。一般的なWebサイトの確認であれば、私はMacのXcodeに付属のiOSシミュレータで十分ではないかと思います。Xの実機もあった方が良いかもしれません。10月から開催予定の「スマートフォン時代のWebコーディングスクール」ではこのような状況を踏まえ、これからスマートフォン対応のWebページを制作する方向けに、以下のことを分かりやすく解説する予定です。ございますので、ぜひお越しください。Web制作の基礎から学べる「Webコーディングスクール」を渋谷で開催します!Web制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい社会人向の方に向けたスクールです。渋谷の教室でも、ご自宅での動画受講も可能です。これからWeb制作をはじめたい方向けに最新のHTMLとCSSの基礎からSass、JavaScriptの基礎まで、初歩から一通り学べるWeb制作スクールです。5月の土曜日に初回体験レッスン(1000円)も開催、動画受講も可能ですのでぜひお気軽にどうぞ。ページをご覧ください。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。outlook.comなどMicrosoftのメールサービスには届かないことが多いため、別のメールアドレスをおすすめします。Twitterでは、Web制作に関する最新情報をツイートしています。コーディングAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷でWeb制作の基礎から学べる「Webコーディングスクール」の講師をしています。新着記事Web制作の基礎から学べる「Webコーディングスクール」を渋谷とオンラインで開催しますWeb制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい方向けにスマートフォン対応のHTML・CSSコーディング手法やSass・JavaScriptの基礎などを学べる社会人向けのスクールです。Bardは大規模言語モデルと呼ばれ、一般的には「チャットAI」や「会話AI」などと呼ばれます。...画像で分かる、新しいCSSこの記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。ブログや技術記事で使いやすい画像素材を配布します今メルマガ登録頂くと、毛糸風の画像素材を配布します。220枚以上あり、ブログや技術記事などで使いやすいと思います。Bardを試すなら、ぜひ試して頂きたいことが2つあります。それは回答の右上に表示されている[他の回答案を表示]をクリックして別の回答案を見ることと、数時間前の情報についてまとめて解説してもらうことです。デザインシステム入門!Web制作初心者が知るべき基本原則とFigma活用法デザインシステムの基本原則を学び、Figmaで効率的なWeb制作方法を初心者にもわかりやすく解説する記事です。2023年4月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。資料制作をお手伝いして頂いているemiさんによる寄稿記事です。