「CSSグリッドレイアウト デザインブック」の発売が楽しみでならない

2018年6月に発売予定の「CSSグリッドレイアウト デザインブック」が今から楽しみでならない私です。

最近のエビスコムは冬にソシムから書籍を出して、夏にマイナビブックスから出るという流れになってますね。

マイナビブックスの紹介ページなどにサンプル画像が載ってありましたが、「HTML5&CSS3ステップアップブック」の発展版といった感じでしょうか。

私は「HTML5&CSS3ステップアップブック」でCSSグリッドレイアウトを覚えて以来、CSSグリッドを使いまくり、自身のWordPressテーマでもCSSグリッドでレイアウトしてしまいました。

IE11への対応が面倒ではありますが、レイアウトの幅が広がるので便利は便利です。

特にこの「CSSグリッドレイアウト デザインブック」が魅力的なところは、見本のデザインがかっこいいというところ。

こういっちゃ何ですが、最近のエビスコム本の見本はちょいダサ感があったので……

CSSグリッドだともっといろいろなことができる気がしているので、レイアウトソフトを使ってのデザインも勉強していきたいですね。

「スラスラわかるHTML&CSSのきほん 第2版」やっぱり最初の1冊におすすめの入門書

2018年4月に出た新刊「スラスラわかるHTML&CSSのきほん 第2版」を読みました。これは前作の改訂本で、floatだったのがフレックスボックスを使ったレイアウトになっていたり、スマートフォンなどに対応するためのレスポンシブデザインが新たに加えられており、現在のWeb環境に対応した本になってオススメしやすくなりました。

サンプルでつくるサイトも前作のものよりスタイリッシュになっていますし、この本の読みやすさ、わかりやすさは相変わらずです。

ただつくるだけでなく、メディアクエリの値がどうしてこのように設定されているのかだったり、つくったサイトをFTPソフトを使って公開するまで書かれているので、HTML&CSSを勉強する際の最初の1冊にぴったりなのではないでしょうか。

著者の紹介サイトにはサンプルサイトが公開されており、4章まで立ち読みすることもできるので、ぜひ覗いてみてはいかがでしょうか。

はじめてのアウェイ 2018 YBCルヴァンカップ 第5節サガン鳥栖戦を観戦してきました

2018年5月9日(水曜日)に行われた、JリーグYBCルヴァンカップ グループステージ 第5節 サガン鳥栖対V・ファーレン長崎の試合を観戦してきました。

私にとってこれがはじめてのアウェイ観戦。サッカー専用スタジアムのベアスタ(ベストアメニティスタジアム)がどれくらいのものか楽しみだったのですが、実際に観戦してみると長崎のトラスタも案外悪くないということに気づいたので、挙げてみたいと思います。

ベアスタの良いところ

まずはベアスタの良いところから。

  • 駅からすぐ近くにある
  • ピッチとの距離が近いため、スマホカメラでも十分
  • スタッフのチェックがしっかりしている(入場時の手荷物検査など)
  • スタグルがバラエティ豊か
  • スタジアム内にスタグルが売ってる
  • DJ YUYAさんのアナウンスが面白くてテンションあがる
  • ゴール時のウィントスくんアニメーションがかわいい

スタグルで食べたお弁当は出来立てホカホカでおいしかったです。濱かつも長崎よりもメニューが充実していてうらやましかった……

ベアスタの気になったところ

つづいてベアスタで気になったところ。

  • スタジアム入場口の案内が少ない(歩いている長崎ユニを着た人に付いていったら何となくたどりついた)
  • 大型ビジョンがしょぼい
  • 設備がちょっと古い
  • 椅子に背もたれがない

とりあえず思いついたものを挙げてみましたが、はじめてのアウェイ観戦でやっぱりアウェイ感を感じてしまったというか、ちょっと怖さというか冷たさを感じました……(強風による寒さとともに)

そういう意味でも、長崎のおもてなしでアウェイサポを歓迎する取り組みはあらためて大事なことなんだなぁと感じさせられました。

トラスタの良さ

毎回行ってるホームだから感じるのかもしれませんが、トラスタにはフレンドリー感があるかなぁと思います。長崎の客層の中心がファミリー層だからというのもありますけど、トラスタの雰囲気のほうが私は好きかなぁ。案外、トラスタも観やすいスタジアムだということが分かりました。

それでも専用スタジアムは臨場感があって良いですね。近くだと芝のにおいまで感じられそうでした。
今度リーグ戦でベアスタを訪れたときにはまた違ったイメージを抱くかもしれないので、そのときを楽しみにしておきたいと思います。

長崎のPKのシーン

画面サイズの縦長化がすすむスマートフォンと情報のバー

シャープからAndroidスマートフォンの新モデル「AQUOS R2」「AQUOS sense plus」が発表。

AQUOS R2は「AQUOS R compact」と同じような画面に切り欠きのある縦長のサイズに。AQUOS sense plusも18:9のディスプレイを搭載しており、もはや縦長の画面サイズが主流となりつつありますね。

「iPhone X」や「Galaxy S8」なども縦長ディスプレイの代表といえる端末ですが、横幅をおさえて縦に長くなっているのを見ると私が感じるのは、「これどんどんINFOBARに近づいてるんじゃない?」ということです。

「INFOBAR」はストレートタイプの端末で情報のバーという名前から、まさにいまのスマートフォンこそINFOBARが目指していたかたちなのではないかと思います。
私が考えるスマートフォンの欠点は片手で持ちにくい、ホールドしにくいということです。私は手が小さいので片手で操作しようとすると落としそうで不安、端まで指が届かなくてつりそうになったりします。

私はいまだにガラケーのINFOBAR2も併用しているのですが、持ちやすさでいえば圧倒的にINFOBARが上回ってます。
画面サイズに自由が利くようになったいまだからこそ、バータイプのスマホが欲しいんです。(固定ボタンはさすがにいらない)
細長になることでゲーム時や動画鑑賞などはあまり楽しめないかもしれませんが、それ以上に片手操作の快適性がスマホでも欲しいと思います。

シャープさんあたりにぜひお願いできないですかねぇ……

AMPプラグイン 0.7でCanonical AMPができるようになったので試してみた

WordPressのAMPプラグインのバージョン0.7から、AMPページのみでサイトを構築する「Canonical AMP(Native AMP)」が使えるようになったというので、早速試してみました。

やり方もかんたんでテーマに

add_theme_support( 'amp', array(
        'comments_live_list' => true // example value
) );

を登録してあげるだけ。

あとは登録するテーマをAMP用にちょこっと変更することで設定できました。
ベースとなっているのは私が作成した「Saka」というテーマ。
こういうときにベースとなるものがあると、つくるのも楽になっていいですね。

でも、最初うまくCSSをちゃんと読み込んでくれなかったので、ちょっと焦りましたが……

AMPにはCSSで使用を制限されているものや、サイズが50KBまでとかいろいろと制約があるので多少気をつけないといけません。

また、普通のJavaScriptが利用できないため、問い合わせフォームのプラグインが動作しなくなっていたので停止し、代わりにGoogleフォームを設置してみました。

まだまだページによってはエラーがあったり、デザインも修正しなきゃいけないかもしれませんが、体感的には一気に速度アップした感じがあって今のところ良好です。