こんにちは！
埼玉県川口市でウェブエンジニアをしている、テダスクのToshi Seitoです！
第9回目のWordPress勉強会＆もくもく会を行いました。
今回は既に数回ご参加頂いている方達のみご参加でした。また、既に案件などをお持ちの方がほとんどでしたので、実践的な質問などをいただいて、凄く内容の濃い勉強会となりました。
それでは今回の活動を報告します。
WordPress勉強会＆もくもく会で行ったこと
今回のWordPress勉強会＆もくもく会の流れはこんな感じです。
- 今日やる課題の共有
- 今日のTips
- WordPressに関する質問と回答
- 各自の課題の開始
- 解散もしくはもくもく会続き
今日やる課題の共有
今回は2回以上参加されている方のみの会でしたので、自己紹介は省いて今の課題を共有しました。
今回ご参加の皆さんは何らかのお仕事を抱えている人達でしたので、その中でのお困りごととかの質問に答えるような勉強会になりました。
今日のTips
今回のTipsではコーダーさんが多かったので、コーディングに関するお話をしました。
お話しした内容は、ベンダープレフィッス（Vendor prefix）というCSSの書き方です。
ベンダープレフィッスというのは、ウェブブラウザで標準規格としてまだ正式に導入されていないCSSの”プロパティ”を使う場合に付属するのがベンダープレフィッスです。
ここで言うプロパティとは、例えばフォントの色を指定する際に用いるcolorとかフォントのサイズを指定する際に使うfont-sizeの部分をプロパティと言います。
コーディングの業務をする際に、仕様として何処までのブラウザに対応させるのかというのを打合せで決めますが、スマホも含めて古いバージョンのブラウザに対応させるときはやはりこのベンダープレフィッスが必要になります。
とは言え、ベンダープレフィッスの話をしつつも、もうここ最近はそんなにベンダープレフィッスは必要なかったりしますが、必要／不要を見極めるための話も含めて説明しました。
先ず、ベンダープレフィッスが必要か不溶化については次のサイトで確認が出来ます。
例えば入力欄にborder-radiusと入れて見ましょう。
そうすると画像のように、CSS3のborder-radiusの各ブラウザの対応状況が見れます。
茶色で囲まれた部分が現在のバージョンで、これを見るとOpera Miniというブラウザ以外は緑色で対応済みという意味になります。
なので、Opera Miniが日本ではマイナーなブラウザだとして対応不要とする場合は、このborder-radiusを使う場合はベンダープレフィッスは要りません。
それではCSS3のanimationはどうでしょうか。
animationも意外や意外、ほとんどのブラウザで対応しています。
IEも10で対応しているんですよね。
なので、今現在ではほとんどの場合ベンダープレフィッスは要らないのかななんて、勉強会で改めて思ったりした次第です。
でも、一々こんな風に探すのも大変だと思います。
そんなときはやり方は2パターンあります。
一つは、私はコーディングするときには使っているのですが、Gulpというタスクランナーにautoprefixerという自動で必要に応じてベンダープレフィッスを付与してくれるライブラリーがあります。
こちらを使います。
ただ、gulpを使っていない方も居ると思うので、そのブラウザ版を使うのもアリです。
WordPressに関する質問と回答
今回はWordPressのテンプレートを制作をしている参加者がいましたので、分からない所の質問をいただきました。
今回のご質問はこちら。
- CSSのメディアクエリーの位置について
- bootstrap4のcolの配置について
- ドメインのネームサーバーを切り換えた後に切り替わったかを確認する方法
1．CSSのメディアクエリーの位置について
メディアクエリーとは、ブラウザの幅に応じてCSSの値を変える条件の様なものですが、この質問ではブラウザの幅の条件ごとでひとまとまりにするべきか、それとも、メディアクエリーが効いていない状態のCSSの直近もしくは、ページ単位などで別けるべきかという質問でした。
私は元々は、メディアクエリーのサイズごとでまとめてその中にコメントを入れて、ページ分けをしていましたが、あるときからはページやブロック単位でメディアクエリーを書くようになりました。
理由はやっぱり探しやすさかなと思います。
他のブログにもこんな意見がありましたので、リンクを貼っておきます。
メディアクエリの書き方はモジュール（ページ要素）ごとにまとめるのがいい
なので、お任せであればページ単位が良いかなと思いますが、コーディング規約などがあればそれに従いましょう。
2．Bootstrap4のcolの配置について
BootstrapはTwitter社が作製した、CSSフレームワークですが、Bootstrap4というバージョンが今のところ最新でグリットデザイン系ではよく使われるCSSフレームワークです。
そのBootstrap4はBootstrap3と異なって、float:leftで横並びにしていたのがFlexで横並びにするようになっています。
flexで横並びにする事で何が良いかというと、Bootstrap3よりもかなり柔軟に配置が出来るようになりました。
具体的にクラス名でいうと、justify-content-centerやjustify-content-betweenというもので、カラム全部を中心に持ってきたり、逆に等間隔に左寄せ、右寄せをやってくれるクラスです。
これはBootstrap3ではもちろんなかったので、カラムで調整したり、最悪クラスを上書きする必要もありました。
この並べ方を知っていると、よりコーディングが早く出来るようになりますので、ドキュメントを1度読んでみて下さい。
3．ドメインのネームサーバーを切り換えた後に切り替わったかを確認する方法
もしお客さんで、サーバーの移管が必要になった時に、使うドメインが同じ場合、ネームサーバーを切り換えた後に、元のサーバーで表示しているサイトなのか、新しいサーバーで表示しているのかって皆さんどうやって確認していますか？
これは、nslookupというコマンドで調べます。
nslookupはいわゆる黒い画面で対象のドメインに対してこのコマンドを実行することで、ドメインがなんのネームサーバーでサイトを運用しているかを調べることが出来ます。
とはいえ、デザイナーさんなどはコマンドではなく、もっと簡単に調べたいと思うので、こちらのサイトを使って確認します。
これは、先程説明したnslookupをブラウザ上で出来るサービスです。
対象のドメインを入力して「nslookup実行」をクリックするだけです。
ただ、ドメインからのnslookupだと、サーバーのIPアドレスが表示されるので、更にその表示されたIPアドレスをnslookupする事でどのネームサーバーを使っているのかが出てきます。
例えばさくらインターネットでしたら、sakuraとかエックスサーバーでしたらxserverって表示されるので分かると思います。
なので、ネームサーバーを切り換えた後に、nslookupを実行することで新しいサーバーになっているかを確認する事が出来ます。
因みに注意しなければいけないのは、ネームサーバーを切り換えて、このnslookupで新しいサーバーになったとしても、切り替わるのに不安定な時間があります。
なので、このnslookupで切り替わったのを確認したとしても、半日は様子を見た方が良いですからね。
特にWordPressの場合は、htmlとは異なりサーバーの環境によるエラーとか出る可能性があるので、気を付けて下さい。
参加人数
今回の参加人数は3人でした。
このもくもく会の後に会場に残って作業される方もいてこの日はみんなで1日もくもくしました。
開催場所
今回から開催場所は浦和駅から歩いて5分のコワーキングスペース、コタイムで行うことになりました。
次回のWordPress勉強会＆もくもく会の開催予定について
次回のWordPress勉強会＆もくもく会は2019年10月5日の10時から12時を予定しています。
その先の開催予定については活動予定カレンダーをご覧ください。
》WordPress勉強会＆もくもく会活動予定カレンダーを見る
最後に
以上でWordPress勉強会＆もくもく会の活動報告を終わります。
もし、WordPressに興味を持っている方やこれから勉強してみたい方、HTMLによるホームページを作っていて仲間が欲しい！と思っている方などウェブに関することなら何をやってもOKですので、お気軽にご参加ください☆
コメント