WordPress テーマ Nishiki Pro のおすすめ機能ベスト3や、今後の新機能についてうががいました。また、コミュニケーションツール「Discord」を用いた手厚いユーザーサポートの仕組みなども伺えました。

特に印象に残っているのは、テーマ開発にかけた熱い想いを伺えたことです。しっかりした信念をお持ちになっていて、テーマを利用するユーザーの立場から「おまかせしてて安心だなぁ」と改めて感じました。

これが、わたしのチャンネルの初コラボだったのですが、とても楽しい時間を過ごせました。ぜひまた、第二弾でお話を伺えればいいなと思っております。ありがとうございました！

そろそろ小正月も終わろうとしている、今日（1月14日）ですが、あらためまして仕事始めのご挨拶をします。

年始のご挨拶が遅くなった、ある理由

毎年、えべっさん（十日戎）が終わったら仕事始めとしていまして、昨日（1月13日）お参りしてきました。

十日戎の1月9日～11日の間で参らなかったのは、今宮戎神社さんから「（コロナ禍の状況を踏まえて）十日戎の参拝を控えて」というメッセージを受け取ったからです。社会人になってから20年以上お参りしているのですが、初めて十日戎の時期を外してのお参りとなりました。

……という理由で、遅ればせながらのご挨拶となった次第です。

毎年、ゆかりのある尾山神社さんと今宮戎神社さんでおみくじをひきます。

尾山神社さんには「勇気を持って進め。自分に負けるな」、今宮戎さんには「叡智の玉を与えられているのに、磨き方が足りない」と、はっぱをかけられた気分でいます。

しいたけ占いでは「革命前夜」と言われて、そろそろ動き出してもいいんじゃない？という気分でもりあがっているところです。

今年の抱負「とにかく頑張る」の具体的なトコ

昨年は、「目指せ！YouTubeチャンネル登録者数 5000人」の目標に大きく届かず、世相的にも、自分的にも、停滞気味な一年でした。

インストラクターなのに、セミナーができない、動けない……という苦みを味わった年でした。

そんな中でほそぼそ続けていた、日曜夜のライブ配信「いまどきのHTML＆CSSレイアウトにチャレンジ」に、常連さんがきてくれるようになって、嬉しかったです。昨年の抱負「求められる人間」にすこしは近づけたような気がします（どうかな？）。

そんな去年のもやもやを受けまして、今年の抱負は「とにかく頑張る」とします。久しぶりに、めちゃめちゃ・むしゃらに動こうと思っています。

休むのに飽きたのかもしれません。しんどくてもいい、という気分です。

もうすこしで誕生日がきて、50歳。節目の年ですから、日頃頑張らない人が頑張ってもいいタイミングでは？と自分に言い聞かせています。

抱負をぼんやりと心に抱くだけではなく、目標に落とし込んで、ついでに具体的な数値もつけて書いておきましょう。

今年もよろしくお願いします

年始から決意を新たに、ウェブ制作にまつわる学びのいろいろを発信しようと思っております。

これからウェブ制作を学びたい方、初級からステップアップしたい方、いろいろとお手伝いできると思います。

講師のお仕事・イベント登壇のお誘い・YouTubeライブのコラボ……などなど、人とご縁を結びたい気持ちです。

みなさま、どうぞ仲良くしてくださいませ。いろいろつぶやいてるので、Twitterを覗いてみてください。

シリーズの４・５・６回『Flexbox（フレックスボックス）の仕組み』の放送内容をふまえた実践編として、ページヘッダーに配置する、ロゴ・ナビゲーション、ヒーローイメージをFlexboxを用いてコーディングしました。

Adobe XD で作成したウェブページのデザインカンプを元にして、位置・サイズ・フォント情報などを拾いつつコーディングを進めています。

今回使用した Adobe XD データをデザインスペックとして次のURLにて公開しています。
ログインパスワード→ YouTube20200715
（公開は、2020年7月26日まで）
https://xd.adobe.com/view/b531e547-c66d-473e-5d1b-5536c0b9ce4b-c300/specs/

このシリーズの過去放送は、YouTube再生リスト「いまどきのHTML＆CSSレイアウトにチャレンジ」からご覧いただけます。

前編と後編に分けて、解説した概要・作ったデモページ、YouTubeライブのアーカイブ動画を次にまとめました。

Flexboxでページのヘッダーを作ろう 前編

前編では、ヒーローイメージ部分をコーディングしました。

今回のポイントは、デザインカンプと合わせてレイアウトするためにXDのデザインスペックから必要な情報を得ながらコーディングしたこととです。

また、ヒーローイメージの内部にあるコンテンツをflexboxで水平・垂直で中央寄せした後に、transformプロパティで下へずらしたレイアウトのCSS指定もポイントです。次の完成版デモページで、前編で作るソースコードが確認できます。

前編のライブ授業内容

• ヒーローイメージとは？
• メイン画像のスタイルとサイズをXDカンプから調べる（デザインスペック）
• 高解像度モニターを考慮した、画像のピクセル数について
• CSSで、メイン画像を＜正円にマスク・3重ボーダー＞にスタイリング
• ヒーローイメージ全体の枠をflexboxで作る
• 見出しのスタイルをXDカンプから調べる
• transform: translateY()を用いて、本来の位置からずらす
• 背景画像を指定

Flexboxでページのヘッダーを作ろう 後編

後編では、ロゴとナビゲーション部分をコーディングしました。

後編も、XDのデザインスペックに合わせてコーディングする流れで進みます。今回作るヘッダーにはロゴと2つのナビゲーションがあり、レイアウト指定が複雑になりますが、Flexboxを用いてどのように組んだのかが今回のポイントです。

もうひとつのポイントは、SVGの取り扱いについてです。Adobe XDからSVGを書き出すときの注意点やファイルを軽量化する方法を紹介しています。次の完成版デモページで、後編で作るソースコードが確認できます。

後編のライブ授業内容

• 今回のHTMLコードについて
• adobexdからのSVG画像の書き出し方法と注意点
• SVGデータの取り扱い
• サイトロゴとナビゲーションを左右に配置
• グローバルナビゲーションの行頭にSVG画像を表示
• orderプロパティを用いて、2つのナビゲーションの順序を入れ替え

次回のライブ配信は、7月26日です。

次回放送は、2020年7月26日（日）23時～を予定しています。配信URLが決まり次第、YouTubeチャンネルかTwitterにて告知いたします。

次の放送では、Flexbox実践編の第三段として、第一段で作ったカード・第二段で作ったヘッダーを加えてトップページを完成させます。

当日のライブ放送中は、チャット欄にて授業内容への質問も受け付けています。ぜひ、リアルタイムでのご参加をお待ちしています。

『Flexboxでカード型レイアウトを作ろう 前編・後編 』を2020年6月21日・28日にYouTubeライブ配信で放送しました。

シリーズの４・５・６回『Flexbox（フレックスボックス）の仕組み』の放送内容をふまえた実践編として、情報をカードに見立ててタイル状に並べる、カード（Cards）型のレイアウトをFlexboxを用いてコーディングしました。

前編と後編に分けて、解説した概要・作ったデモページ、YouTubeライブのアーカイブ動画を次にまとめました。

このシリーズの過去放送は、YouTube再生リスト「いまどきのHTML＆CSSレイアウトにチャレンジ」からご覧いただけます。

Flexboxでカード型レイアウトを作ろう 前編

前編の放送では、Flexbox・calc()などを使って、カード型レイアウトの基礎となる枠組みを作りました。

今回のポイントは、横に３カラムをキープしつつ、デバイスの表示幅に応じて可変すること、カード内のコンテンツ（フッター）をFlexboxの入れ子を用いて配置をすること、カードの高さが変わってもフッターを下に固定するところです。次の完成版デモページで、前編で作るソースコードが確認できます。

前編のライブ授業内容

• カード型レイアウトとは？
• flexコンテナの作成
• flexアイテムの作成（flexコンテナ幅を基準に、calcプロパティで計算して３カラムに設定）
• flexアイテムの間にマージンを指定（両端はマージン空けず、アイテム間のみに固定値を指定）
• flex-growプロパティで、余白をカラムに均等に配分
• カード内のコンテンツを配置（ダミー画像、タイトル、本文、フッターに日付・“続きを読む”を配置）
• カードの高さを揃えつつ、フッターを下に配置

Flexboxでカード型レイアウトを作ろう 後編

後編の放送では、カード内部のコンテンツのデザインを仕上げました。一見シンプルに見えますが、細かいところに気を配って工夫してみました。

今回のポイントは、カードの外枠線やテキストを整えたり、カードのヘッダー画像を領域にフィットさせて角丸にしたり、配置する画像の比率が変わってもカードヘッダーの表示サイズを固定したり、“続きを読む”ボタンの行頭マークにFont Awesomeのアイコンを用いたりしたところです。次の完成版デモページで、後編で作るソースコードが確認できます。

後編のライブ授業内容

• 仮置きのコンテンツにダミー画像（ https://picsum.photos/ ）を使う
• 本文のフォントに ウェブフォント の Noto Sans JP（Google Fonts）を指定
• コンテナ（外枠）の余白をアイテムに合わせる
• アイテム（カード）内の文字修飾（タイトル、本文など。今回のCSSのクラスの名付けについて。）
• カードのタイトル画像の調整（横長や縦長など、比率の異なる画像をobject-fit・object-positionプロパティで調整とIE11対策）
• カード外枠に角丸、ボーダー、シャドウを追加

次回のライブ配信は、7月12日です。

次回放送は、2020年7月12日23時～を予定しています。配信URLが決まり次第、YouTubeチャンネルかTwitterにて告知いたします。

次の放送では、Flexbox実践編の第二段として、ページのヘッダー部分のレイアウト（ロゴ、グローバルメニューなど）を解説してゆきます。

また、Adobe XD で作ったデザインデータを元に、デザインスペックを利用してコーディングに使う工程もお話しする予定です。

当日のライブ放送中は、チャット欄にて授業内容への質問も受け付けています。ぜひ、リアルタイムでのご参加をお待ちしています。

☆見出し1

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

見出し2

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

見出し3

いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい

今回のライブ授業内容

ライブ配信授業《いまどきのHTML＆CSSレイアウトにチャレンジ》のFlexbox（フレックスボックス）の3回目。flexアイテムの横幅制御に関するプロパティを解説しました。

flexコンテナの主軸が横方向（flex-direction: row）の時に、flexアイテムへ指定する次の4つのプロパティを使って横幅を柔軟に制御できます。

• flex-basisプロパティ（ベースサイズを指定）
• flex-basis: content を用いて、flexアイテム内のコンテンツのサイズに応じては、現在 Firefoxでサポート（Can I use参照）されています。
• flex-growプロパティ(伸長係数を指定)
• flex-shrinkプロパティ（縮小係数を指定）
• この3つをまとめて指定するflexプロパティ

授業で使ったデモページ

次のURLで完成版のデモページを公開しています。

https://r360studio.com/youtubedemo/csslayout/no6.html

https://r360studio.com/youtubedemo/csslayout/no6-2.html

次回のライブ放送は、６月７日です。

次回放送は、6月7日23時を予定しています。配信URLが決まり次第、YouTubeチャンネルかTwitterにて告知いたします。

ライブ放送中は、チャット欄にて、授業内容への質問も受け付けています。ぜひ、リアルタイムでご参加くださいませ。

本日、r360studio.comがリニューアルしました。コンテンツはこれから追加していきますが、サイトの形だけは何とか動かせるようになりました。リニューアルを記念して、以前に技術書典5で頒布したAdobe XDの冊子をBOOTHにて無料頒布いたします。