つれづれなる備忘録

日々の発見をあるがままに綴る

Windows 10 アップデート

自宅PCのWindows 10の自動アップデートを再起動で実行したら2時間近くかかった大型のアップデートだった。 アップデートの内容としてはバージョンが1909(多分)から2004になっていた。

"Windows 10 アップデート"
Windows 10 アップデート

ところで、Windows 10 の最新バージョンは20H2なので、なぜひとつ前の2004なのか解せなかったが、以下のような事情があるようだ。

answers.microsoft.com

wanisan返信日 2021年1月14日: Windows 10 Ver.2004は去年の5月に提供されたバージョンですが、もともと多くの不具合があったことから、「不具合が起きる構成のPCについては、不具合が解消されてから配信される」という仕組みに変わったようです。 配信されない場合も、最終的にはそのバージョンのサポート期間が終わる前には配信されるようです。 このため、いつまで待っても配信されないPCも多くあり、私のPCも配信されてきませんでした。 Ver.20H2については、昨年11月にVer.2004を飛ばしていきなり配信されてきました。 結局Ver.2004は配信されないままで終わってしまい、Ver.1909からVer.20H2へのバージョンアップになりました。 なかには最近になってVer.2004が配信されてバージョンアップされたPCもあるようです。 何故そのようになるのか、何を基準に配信されているのかが分かりません。 Ver.2004は、2021年12月14日までサポートされるので、Ver.2004がなかなか配信されなかったときと同じ対応で、Ver.20H2が自動配信されるまではそのままにしておけばいいと思います。

自宅PC自体はかなり古いこともあるので、不具合が起きる構成のPCになっていて、20H2にならず2004が配信されたPCに入っている可能性が高そうだ。

CES2021オンライン

毎年アメリカで開催されている最大のテクノロジー展示会であるCES(Consumer Electronics Show)は、今年はすべてオンラインで開催された。 (日本のCEATECは無料だが、CESは登録料が必要)

すでにいろいろなメディアからのニュースが出始めていて、今年のテクノロジーの流れや新しいテクノロジーの情報の宝庫なので、ニュースに目を通すだけでもおすすめ。

例えば

wired.jp

ただし、あくまでアメリカの展示会なので日本発売未定のものも多数ある。

Youtubeもいろいろレポートの動画があって、アメリカのメディアのCnetは6時間近いライブストリーミングが見れたりする。(ただし内容は英語)

日本のメディアだと、日本の企業中心になりがちなのでCnetやEngadgetなど米国のメディアの情報に触れるのもよい。

ブログデザイン備忘録 ~ gridを用いたレイアウト3

 今回はCSSのgrid-template-areasを用いて、デスクトップPC, タブレット, スマートフォンでそれぞれ異なるレイアウトにする方法について紹介する。

atatat.hatenablog.com

今回見基本的なコードは下記記事のものを用いて、最低限レイアウトを構成する必要なコードだけに絞った。

coliss.com

今回はheader, navigation, main, sidebar, ads, footerの領域がそれぞれデバイスの表示幅によって配置が変化する。 htmlはcontainer内にそれぞれの領域を定義しておく。

<body>
    <div class="container">
      <div class="header">header</div>

      <div class="navigation">navigation</div>

      <div class="main">main</div>

      <div class="sidebar">sidebar</div>

      <div class="ads">ads</div>

      <div class="footer">footer</div>
    </div>
 </body>

CSSに関してbodyは前回と同じ。今回は新しきgrid-template-areasプロパティを使用するが、それぞれの領域をgrid-area: header;のように定義する。

.header {
  grid-area: header;
  border: 2px dashed green;
}
 
.navigation {
  grid-area: nav;
  border: 2px dashed green;
}
 
 .ads {
  grid-area: ads;
  border: 2px dashed green;
}
 
 .sidebar {
  grid-area: sidebar;
   border: 2px dashed green;
}
 
.main {
  grid-area: main;
  border: 2px dashed green;
}
 
.footer {
  grid-area: footer;
  border: 2px dashed green;
}

スマホ用のレイアウトはパンケーキレイアウトで上からheader, navigation, main, sidebar, ads, footerとする。サイズはmainだけを1frで指定し残りはautoとするにはgrid-template-rows: auto auto 1fr auto auto auto;とする。 また順序を指定するには grid-template-areas:を用いて以下のようにレイアウト構造を指定する。

.container {
  display: grid;
  height: 100vh;
  background:lightgray;
 
  gap: 12px;
 
  grid-template-rows: auto auto 1fr auto auto auto;
 
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "ads"
    "footer";
}

次にタブレット用のレイアウトはheaderとnavigationは1行にして、sidebarとmainを1:2, adsとfooterを1:2とするレイアウトにする。 またsidebarとmainの行高さを1frとする。この場合は4行のレイアウトになるのでgrid-template-rows: auto auto 1fr auto;とする。 またsidebarとmainを1:2の幅にするにはgrid-template-areasで "sidebar main main"と表記する。headerやnavigationのように1行すべてを使う場合は "header header header"とする。タブレット用としてはメディアクエリを使用しタブレット用のCSSを適用しているが、min-widthに関して実際には720pxなどだがCodePenで表示できるように480pxとしている。

@media (min-width: 480px) {
  .container {
    grid-template-areas:
      "header header header"
      "nav nav nav "
      "sidebar main main"
      "ads footer footer";
 
    grid-template-rows: auto auto 1fr auto;
  }
}

同様にPC用のレイアウトはheaderとfooterを1行、sidebarとnavigation, adsを1:2:1, sidebarとmainとadsを1:2:1とする。CSSは以下のようになる。

@media (min-width: 1020px) {
  .container {
    grid-template-areas:
      "header header header header"
      "sidebar nav nav ads"
      "sidebar main main ads"
      "footer footer footer footer";
 
    grid-template-rows: auto auto 1fr auto;
  }
}

CodePenを実行すると例えば1xでスマホ、0.5xでタブレット、0.25xでデスクトップPCに切り替わる。(コード表示した場合で表示デバイスの幅によって切り替わらない可能性がある。)

See the Pen grid-areas by ATATAT (@atatat) on CodePen.