初心者タグの絞り込みCSSDrupalTwitterこれはいいテーマ2019年08月07日CSSプロパティはどこまで覚えればいいのかCSS初心者Twitter今朝、Twitterを見ていたら「未経験からの入社でも、このくらいはCSSのプロパティや値を覚えていてほしい」というツイートが流れてきました。一連のプロパティの紹介はとても勉強になるもので、うなずきながら読んでいましたが、途中、どうにも同意できなくて突っ込みを入れたものがあります。flex-flow、justify-content、align-itemsの全ての値animationのfill-mode:nth-of-type疑似要素これらのプロパティは中級者以上が、存在を知っている程度で充分であり、覚えるものではないと考えています。私がこれまでお取引をした制作会社の「平均よりちょっと上」のレベルをイメージしています。自体は、マークアップエンジニアとして就職するなら必修です。入社レベルでは以下の3パターンを実装するためのスニペットを知っていればいいです。このパターン以外の値の使用頻度が、極端に低いためです。column)も意外と出番が多いです。一般のウェブデザインのパターンではあまり見られません。私は一度も実装したことがありません。デザインお任せのときに使ってみたいですが。使用頻度が低いプロパティの挙動を研究するのは、頻度が高いスキルを問題なくこなせるようになってからでもいいです。読みやすいコードを書いてほしいです。初級者に説明させるのは酷というものです。使うとしてもbothでだいたいなんとかなります。書かせて、CSSアニメーションの基礎を知ってからの方が理解しやすいと思います。transitionは必修です。:nth-of-typeこのプロパティを知らなかったというツイートをけっこう見ました。そのくらい使用頻度が低いプロパティです。詳しくはMDNのリファレンスを見ていただきたいですが、以下のようなHTMLに任意のスタイルを反映させる際に役立ちます。自由にクラスを付与できない繰り返される他の要素が兄弟階層に混ざる可能性があるWordPressのGutenbergなどの、CMSのブロックエディタで生成されたHTMLを整形する際に役立つ可能性があります。「使用頻度が低い」と書いたとおり、:nth-of-typeを知らなくても解決できるようなHTMLが提供されていることがほとんどで、私も一度しか使ったことがありません。JavaScriptを追加できるならDOMを解析して連番クラスを付与する手もあります。考えられるのは、官公庁などのいにしえのHTMLを、一切触らずにCSSを追加しなければならないような状況でしょうか...プロパティはどこまで覚えればいいのか人それぞれと思いますが...私は「Bootstrapに書いてあるCSSが、覚えておきたいプロパティと値である」と考えています。BootstrapなどのCSSフレームワークは、実際にウェブ制作で頻繁に使用されるモジュールやコンポーネントの集合体であるからです。開発者ツールで遊ぼう、フレームワークを読もうここ数年、年に2回、初心者向け講座の講師をしていました。「会社に入ったばかりの初心者に、最低限のHTML・CSS・JavaScriptを三日間で教える」というなかなかハードな講座です。https://www.deos.co.jp/koza/detail/tf010カリキュラムの作成にも一部参加したのですが、困ったのがCSSでした。一日では教えきれないほど必修のプロパティが多いのです。最終的に「テキストにはいろいろ値が書かれているけれど、これとこれ以外は、今は覚えなくて良いです」と、現場で使用されているプロパティを推しまくる進め方になりました。それだけでは、当然勉強不足です。以下の三点を補足しました。Chromeの「開発者ツール」を早い段階で触らせ、各プロパティに様々な値が存在していることも教える有名どころのCSSフレームワークを見てほしいと説明する時間の関係で教えられないプロパティは、名称と簡単な役割をメモさせておき、検索するように言うCSSに限らず、学習には以下の三点が必要なのだと思っています。習得の優先順位を判別すること(これは勤め先の環境でも変わるでしょう)既存ツール、素材を活用することアンテナを張り、気になった用語を検索して調べること長々と書きましたが、私はコーディングが大嫌いです!予算に余裕さえあれば、コーディングが得意な友人たちに外注してCMSだけを触っていたいくらいです。すべての人が高いレベルのCSSの知識を持っていなくてもいいのではないかな...と感じます。元ツイは一旦削除されましたが、ツイ主のTAKさんが、知っておくと良いプロパティと値について、再度まとめてくださいました。こちらからTwitterへ移動して、一連のスレッドを読めます。親要素のfont-sizeを基準にした相対値。要素のfont-sizeが16px相当だったら1em→16pxとなります。.5emなら16pxの50%の8pxです。TypeやWordPressを使っている人が知っておいた方が良いことDrupalテーマこれはいいCSS初心者Drupal8がすっかり標準になりましたが、私はなかなか実践レベルになりません。サイトを作らなければ身につかないと、Drupalで趣味の素材配布サイトを立ち上げてみることにしました。私のCMSの構築は、2005年頃にブームだった素材サイトからはじまりました。素材は、AI・PNG・壁紙などの属性が異なるファイルを、複数のタクソノミーで検索させる必要があり、自動化しようとすると奥が深いコンテンツです。echo_zeroのフレームワークは今回も役に立ちました投稿タイプ・フィールド・タクソノミー・Views・サブテーマまで勉強して、見た目はともかくきちんと機能する素材サイトがだいぶできてきました。ここまでの段階で、MTやWordPressなどのブログベースのCMSで制作をしている人が、Drupal8を学習する前に知っておかないと苦労すること・損をすることがいくつかあると感じたのでメモしておきます。結婚のご報告とお知らせ。