- 投稿日：2020-04-21T23:45:20+09:00
【WordPress】クライアントワークにおけるブロックエディタ対応テーマ構築時の小ネタ集
はじめに
WordPress5.0にブロックエディタが搭載されてから、一年半経ちました。
エンジニアやブロガーの間では「ブロックエディタすげえ！」「もうクラシックエディタには戻れない。。」といった声を良く聞きますが、実際のクライアントワークにおいては、まだまだ浸透していないように思います。
これまで多数のWordPressサイト構築案件を担当してきましたが、特にデザイン優先のサイトやコーポレートサイト構築ではブロックエディタの話が出る事も無く、「ブロックエディタ？何それ？」というクライアントさんや元請け会社さんばかりでした。
ですが先日、ブロックエディタで再現しやすいデザインであった事、かつクライアントさんがゴリゴリ記事を投入していきたいという熱量を感じられた案件があったため、「ブロックエディタにフル対応したコーポレートサイト構築」という方針を取りました。
その開発の中で、ブロックエディタの魅力を十分に引き出しつつ、不慣れなクライアントさんでも使いやすいように取り入れたノウハウをまとめて共有したいと思います。
対象とする方
- HTML5/CSS3に沿ったコーディングが出来る。
- 一からオリジナルテーマを作成でき、かつアクションフック・フィルターフック・テンプレートタグを適切に使用出来る。
- ブロックエディタにおいて、バックエンド、フロントエンド側それぞれに適用するCSS/JSをどのようにenqueueすればよいか何となく理解している。
- エディタ側、フロントエンド側のブロックでどのようなclass名が付与されるかを知っている（探す事が出来る）
- npm、babel、webpackというワードは知らなくてもとりあえずおｋ
- カスタムブロックは作った事がなくてもおｋ
備考
- 記事執筆にあたり検証した環境は、WordPress 5.4です。
- フロント側でブロック用のデフォルトスタイルが読み込まれている事を前提としています。 （
wp_dequeue_style( 'wp-block-library' );をfunctions.phpに記述していなければ自動で読み込まれます）色設定編
カラーピッカーを非表示にする
デフォルトで用意されているカラーパレットの他にカラーピッカーがあり、直観的にで好きな色を選ぶことが出来ます。
便利そうな機能ですが、同じ色でもブレが生じたり、またクライアントさんの趣向によっては何ともカラフルなコンテンツが出来上がってしまう可能性がありますので、無効にします。
functions.phpadd_theme_support( 'disable-custom-colors' );またインラインスタイルで色が指定されるため、次項に述べるような一括での色調整が難しくなります。
カラーパレットを変更する
デフォルトでは12色用意されていますが、ベースとなるテーマのカラーに合わせて、パレットのバリエーションを変更します。
デザインに疎いためどのような配色が最適かはっきり言えませんが、テーマで使われている色のうち、
- メインカラー
- サブカラー
- フォントカラー
- アクセントカラー
あたりをピックアップして組み合わせれば良いと思います。
Qiitaを例にして、実際のコードを記載します。
functions.phpadd_theme_support( 'editor-color-palette', array( // array( // 'name' => 'カラーパレットをマウスオーバーした際のタイトル', // 'slug' => '付与されるclass名', // 'color' => 'カラーコード', // ), array( 'name' => 'メインカラー', 'slug' => 'main', 'color' => '#55c500', ), array( 'name' => 'サブカラー', 'slug' => 'sub', 'color' => '#3f9200', ), array( 'name' => 'フォントカラー', 'slug' => 'font', 'color' => '#333333', ), array( 'name' => 'アクセントカラー', 'slug' => 'accent', 'color' => '#cd2e22', ), ) );アクセントカラーは、以下のサイトからピックアップしました。
ベースカラーを指定するだけで、いい感じのカラーバリエーションを生成してくれます。ここまでの設定で、サイドバーの色設定は以下のようになります。
ちょっと地味過ぎましたね。。
なお、WordPress5.4から文章中で部分的に色を設定できるインラインカラーが追加され、ブロックの文字色・背景色とあわせると、カラーパレットを適用した対象に以下のようなclassが付与されます。
カラーパレット適用の対象 付与されるclass名 インライン文字色 has-inline-color,
has-{slug}-colorブロック文字色 has-text-color
has-{slug}-colorブロック背景色 has-background
has-{slug}-background-colorなので、文字色であれば
.has-{slug}-colorに、背景色であれば.has-{slug}-background-colorにスタイルを当てる事になります。インラインで指定しているわけではないので、例えば「全部のアクセントカラーをもう少し濃くしたいなあ」と思った時は、
.has-accent-colorと.has-accent-background-colorのプロパティ値を変えるだけで済みます。また、slugに
redやyellowなどの色名ではなく、mainやsubといったclass名としたのには理由があります。例えば、メインカラーを
redからblueにしたいとなった場合。
メインカラーのセレクタを.has-red-colorとしていた場合、「class名にredが含まれてるのに、なぜか表示される色が青」と混乱が起こってしまいます。色設定自体を無効にする
実際の案件で発生する事はあまりないと思いますが、色設定自体を無効にする事もできます。
インライン文字色、ブロック文字色、ブロック背景色すべてが無効になります。functions.phpadd_theme_support( 'editor-color-palette' ); add_theme_support( 'disable-custom-colors' );グラデーション設定を無効化する
WordPress5.4では、ボタンブロックとカバーブロックでグラデーションを利用出来るようになり、カラーピッカーに加えてタイプ（円形/線形）角度を調整する事が出来ます。
ここも「色設定のカラーピッカーを非表示にする」と同様の理由で、カスタム設定を無効化します。
functions.phpadd_theme_support( 'disable-custom-gradients' );グラデーションのカラーパレットを変更する
配色の決め方は「色設定のカラーパレットを変更する」に準ずるとして、コードの一例を記載します。
functions.phpadd_theme_support( 'editor-gradient-presets', array( array( 'name' => 'メイングラデーション', 'gradient' => 'linear-gradient(to right, #55c500, #3f9200)', 'slug' => 'main', ), ) );グラデーションを無効化する
グラデーション自体使わないという場合は、無効にすることも出来ます。
functions.phpadd_theme_support( 'disable-custom-gradients' ); add_theme_support( 'editor-gradient-presets' );無効にした場合、デフォルトの状態からこのように変わります。
すっきりしましたね！
テキスト設定編
テキスト設定でフォントサイズの数値指定を無効化する
プリセットサイズとして用意されているバリエーションに加え、数値入力（px）でフォントサイズを変更出来ます。
これも、「色設定のカラーピッカーを非表示にする」「グラデーション設定を無効化する」と同様の理由で無効化します。
またpx指定なので、非レスポンシブとなってしまいます。
functions.phpadd_theme_support( 'disable-custom-font-sizes' );テキスト設定でフォントサイズのバリエーションを変更する
デフォルト（class無し）に加えて5サイズ用意されており、それぞれ付与されるclass名と適用されるフォントサイズは以下の通りです。
プリセットサイズ 付与されるclass名 フォントサイズ（エディタ側） フォントサイズ（フロント側） 小 has-small-font-size 13px 13px 標準 has-normal-font-size 16px 16px 中 has-medium-font-size 20px 20px 大 has-large-font-size 36px 36px 特大 has-huge-font-size 48px 42px ※上記に加えて、
has-regular-font-size、has-larger-font-sizeというclass名も定義されていますが、現在は使われていないようです。
gutenberg/style.scss at c19d2d908cba695960cf8407bd0b0afc181aa657 · WordPress/gutenberg · GitHub]前述の通り、フォントサイズはpx指定のため、例えばPC/スマホでベースのフォントサイズが変わった場合にバランスが崩れてしまいます。
そのため、emまたはremでのフォントサイズ指定に変更するか、テーマにあわせてメディアクエリ等で調整します。上記セレクタをそのまま使っても良いのですが、バリエーションを変えたい場合は以下のように記述します。
functions.phpadd_theme_support( 'editor-font-sizes', array( // array( // 'name' => 'プルダウンの表示名', // 'size' => 'フォントサイズ（px）', // 'slug' => '付与されるclass名', // ), array( 'name' => '小', 'size' => 14, 'slug' => 'small', ), array( 'name' => '中', 'size' => 20, 'slug' => 'medium', ), array( 'name' => '大', 'size' => 24, 'slug' => 'large', ), ) );ここでは、ベースのフォントサイズを16pxとして、3パターンを定義しました。
また、エディタ側ではフォントサイズをpxでしか指定できないため、16pxをベースにフォントサイズを決定します。付与されるclass名は「色設定」の場合と同様で、
has-{slug}-font-sizeというクラスが付与されます。レスポンシブ対応のため、フォントサイズをemで指定する場合の例は以下。
style.css.has-xs-font-size { font-size: 0.875em; } .has-md-font-size { font-size: 1.25em; } .has-lg-font-size { font-size: 1.5em; }ここまでの設定で、サイドバーのテキスト設定は以下のようになります。
エディタ編
以下項目は、全てCSSで調整を行いますが、エディタ側に独自のCSSを適用する方法は3種類あります。
add_theme_support( 'editor-styles' )、add_editor_style( 'editor-style.css' )で読み込む
→エディタのみに適用される。また、各セレクターの直前にブロックエディタ全体を囲っている.editor-styles-wrapperというクラスが自動的に挿入される。- アクションフック（
enqueue_block_editor_assets）で読み込む
→エディタのみに適用される。- アクションフック(
enqueue_block_assets)で読み込む
→フロント側・エディタ側双方で読み込まれる。理解があやふやな方は、手前味噌ですがこちらの記事をご覧ください。
【WordPress】 Gutenberg関連のCSSまとめ
今回は、エディタ側でのみ読み込まれ、かつ書いたCSSがそのまま出力される2番の方法（
enqueue_block_editor_assets）での具体例を書きます。フォント・文字サイズ
クライアントさんの記事投稿のストレスを減らすために、エディタの見た目をフロント側に出来るだけ近づける事は必須です。
まずは、デフォルトの明朝体（Noto Serif JP）からゴシック体に変更し、同時にフォントサイズ・文字色等も含めてスタイリングします。
block-editor-style.scss.editor-styles-wrapper { > * { color: #333; font-size: 18px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; line-height: 2; } }
.editor-styles-wrapperに書きたい所ですが、ノーマライズ用のスタイルがbody閉じタグ直前にインラインで出力されるため、優先度の関係で適用されないプロパティがあります。
そのため、既に定義されているプロパティについては
.editor-styles-wrapper直下の要素に定義します。※
add_theme_support( 'editor-styles' )、add_editor_style( 'editor-style.css' )でスタイルで読み込んでいる場合は、ノーマライズ用のインラインスタイルの後にインラインで出力されるので、、.editor-styles-wrapper（bodyタグ）に全て書いてしまってOKです。背景色をスタイリングする
フロント側でbodyに背景色があるデザインの場合、エディタ側にも同じ背景色があたっていると一気に雰囲気が出ます（僕だけ？）
背景色はノーマライズ用CSSに無いので、.editor-styles-wrapper書けば適用されます。block-editor-style.scss.editor-styles-wrapper { background: #eee; }タイトルをスタイリングする
タイトル自体に各種スタイルがデフォルトで当たっているので、これもフロントにあわせて調整します。
特に、デフォルトのフォントサイズはデカすぎると思う。。同時に、タイトルの
textareaにfocusされた時の文字色もデフォルトを上書きします。block-editor-style.scss.editor-post-title__block { .editor-post-title__input { padding: 10px 14px; color: #333; font-size: 26px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; line-height: 1.4; &:focus { color: #333; } } }ブロックの間隔をあける
特にテキストメインのコンテンツの場合に顕著ですが、あるブロックにフォーカスした時に、前（上）のブロックが一部隠れて文字が見えない、という状態が起こります。
テキストメインの記事の場合、たとえ一文でも隠れるのは編集時にストレスになる思うので、ブロック間の間隔を広げます。
ここでは、デフォルトの28pxから56pxに広げます。block-editor-style.scss.editor-styles-wrapper { .block-editor-block-list__block { margin-top: 56px; margin-bottom: 56px; } }
ただし、ブロックの間隔がフロント側と違う事になるケースが多いので、記事執筆の快適さを優先するのか、フロント・エディタの見た目の整合性を優先するのか、クライアントさんの意向も含めて検討すべきです。
ブロックの幅を広げる
デフォルトではブロックの幅が580pxと狭いので、フロント側に合わせて広げます。
一般的にはコンテナ幅に合わせる事になりますが、管理画面側は左右にサイドバーがあるため、幅を大きくし過ぎるとエディタ領域一杯にブロックが広がってしまい、幅広・全幅を表現出来なくなる場合があります。
フロント側のコンテナ幅、幅広・全幅対応の有無、クライアントさんが記事投稿する時のPC環境等を考慮しながら、最適な値を探りましょう。
block-editor-style.scss.wp-block { max-width: 720px; } // 幅広 .wp-block[data-align="wide"] { max-width: 1080px; } // 全幅 .wp-block[data-align="full"] { max-width: none; }ブロック編
使わないブロックを非表示にする
調べた所、WordPress5.4で用意されているコアブロックは68種類。
汎用的なテーマでない限り、全てのブロックをスタイリングするのは現実的ではありません。設計の話も関係しますが、デザインありきの構築の場合、どのパーツを、どのブロックを使って、どのように表現するかを考えると思います。
そこで、そこから漏れたブロックは一旦スタイリングの対象外とし、無効化します。その後、クライアントさんが使いたい（使いそうな）ブロックを都度解放・スタイリングしていけば良いと思います。
方法は3パターン。
- ブロックマネージャーを使う
→エディタから設定出来るので一番手軽ですが、設定箇所を知っている人なら再表示出来てしまいます。- プラグインを使う
→Disable Gutenberg Blocksという専用のプラグインがありますが、最近のメジャーリリースでテストされていません。 もしくは、カスタムブロック用のプラグインに機能として内包されているものもあります。（Advanced Gutenbergなど）- functions.phpに記述する
→ブロックを無効化するのではなく、ゼロから使うブロックを登録していく方法です。 投稿タイプ別に使うブロックを出しわける事が出来るので、例えば「お知らせはシンプルに投稿したい」といったクライアントさんにはお勧めの方法です。以下は、3番の方法で投稿の場合のみ使えるブロックを見出し・段落に制限する例です。
functions.phpfunction wpdocs_allowed_block_types( $allowed_block_types, $post ) { if ( $post->post_type !== 'post' ) { return $allowed_block_types; } return array( 'core/heading', 'core/paragraph', ); } add_filter( 'allowed_block_types', 'wpdocs_allowed_block_types', 10, 2 );ブロックスタイルを無効化する
「使わないブロックを非表示にする」と同様の理由で、コアブロックで使わないスタイルは一旦無効にします。
コードはJavaScriptで記述するので、エディタ側で読み込まれるフックを使ってjsファイルを読み込みます。
functions.phpfunction mytheme_enqueue_block_editor() { wp_enqueue_script( 'mytheme-block-editor-script', get_theme_file_uri( '/editor.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true ); } add_action( 'enqueue_block_editor_assets', 'mytheme_enqueue_block_editor' );以下は、区切り（幅広線）、区切り（ドット）画像（角丸）、引用（大）を無効化する例。
editor.jswp.domReady( function() { // サンプル // wp.blocks.unregisterBlockStyle( 'ブロック名', 'スタイル名' ); // 区切り（幅広線） wp.blocks.unregisterBlockStyle( 'core/separator', 'wide' ); // 区切り（ドット） wp.blocks.unregisterBlockStyle( 'core/separator', 'dots' ); // 画像（角丸） wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' ); // 引用（大） wp.blocks.unregisterBlockStyle( 'core/quote', 'large' ); });DOMが構築された後に実行させたいため、必ずwp.domReady()で囲います。
また、カスタムスタイルの登録（
registerBlockStyle）も併用する場合は、競合を避けるためにregisterBlockStyle()のあとに追加します。スタイル名の調べ方ですが、ブロックにそのスタイルを適用すると、サイドバーの「高度な設定 > 追加CSSクラス」にclass名が反映されるので、「
is-style-{slug}」の{slug}の部分をスタイル名にします。スペーサーブロックを見えるようにする
特定のブロック間の余白をスペーサーブロックですが、エディタ側ではクリックしない限り、そこには何も表示されません。
スペースなので見えなくて当たり前ですが、エディタ側では後から微調整しやすくするために、クリックしなくても視認出来るようにスタイリングします。
block-editor-style.scss.block-library-spacer__resize-container { display: flex; align-items: center; justify-content: center; color: #666; background: #ddd; &::before { content: "スペース"; } }
区切りブロックをクリック出来ない！
区切りブロックを使う場合は深刻な問題だと思っているのですが、区切り線の高さが2pxしかないため、ブロックを選択状態にすることが困難です。
そこで、疑似的にクリック領域を広げつつ、
cursor: pointerでクリック出来る領域である事を知らせます。block-editor-style.scss.wp-block-separator { padding: 10px 0; cursor: pointer; }
あとがき
メジャーなものからマイナーなものまでありますが、案件によって正解は様々だと思います。
せっかくブロックエディタを導入したのに、クライアントさんに「何だか使いにくいなあ。。」と思われないよう、色々工夫していきたい所です。
- 投稿日：2020-04-21T17:12:56+09:00
1分でわかるBootstrap4の書き方
Bootstrap4を実際に書き始めるまでの基礎をまとめました。
CDN<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
前提として、Bootstrapの要素はbody直下にcontainerクラスのdivで囲います。marginとpadding
Bootstrapでは、クラスを用いてmarginとpaddingを表し、プロパティ 上下左右-サイズの型で記述します。(例: mt-4 , p-auto)
プロパティ 内容 上下左右 内容 サイズ 内容 m margin t top 0 0 p padding b bottom 1 *0.25 l left 2 *0.5 r right 3 *1 x left,right 4 *1.5 y top,bottom 5 *3 top,bottom,left,right auto auto グリッドシステム
Bootstrapでは、要素の横1行を
rowクラスのdivタグで区切り、12等分した1列をカラムと呼びます。
カラムは、クラス名にcol-画面サイズ-サイズの型で記述します。(例: col-md－6 , col-10)
画面サイズ 内容 サイズ 内容 <540px 1 1/12rem sm 540px 2 2/12rem md 720px 3 3/12rem lg 960px 4 4/12rem xl 1140px ... offset 余白 12 1rem 参考文献
詳しい内容やコンポーネントは公式ドキュメントが参考になります↓ ↓
公式ドキュメント
- 投稿日：2020-04-21T15:53:13+09:00
【Salesforce】簡単にCSSを反映する方法
はじめに
最近業務で書き始めたSalesforceのVisualforceについて記載します。
まだ始めたばかりの初心者なので、もし認識違い等あればコメントでご連絡いただけますと助かります。本記事の対象
- Visualforceを始めたばかりの1週間前の私
- Visualforce初心者
- VisualforceでCSSを簡単に反映したいと思っている方
VisualforceにCSSを反映する
VisualforceにCSSを反映する方法は、3通りあります。
①HTMLベタ書き
<head> <style type="text/css"> p{ color:#fff; background-color:#000; } </style> </head>② 外部Stylesheet(自作)を呼び出し
あることは知っているけど、やり方等詳細はわからないので飛ばします
公式サイトには書いてあるっぽい…？③ 外部Stylesheet(Salseforce公式)を呼び出す
この存在を1週間前の私に教えてあげたいってことで、今回のメインです。Salseforceには公式のStylesheetなるものが存在しています。
何者かというと、以下の一文を追加して、後は公式のクラス名を当てはめれば勝手にCSSが反映されます。
https://www.lightningdesignsystem.com/<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'styles/salesforce-lightning-design-system.min.css')}"/>たとえば余白（margin）を付けたい場合
①「Search」に「margin」と入力して検索します
https://www.lightningdesignsystem.com/
②使いたいMarginを選んで、
divタグをコピー
赤枠で囲った部分をクリックしてもコピーはできる?
③先程コピーした
divタグを使用したい部分に記載する
普段書くClass名と同じように指定すればOK
なので、pタグなどに指定してもOK（記載例） <div class="slds-m-around_xxx-small"> <h1>テスト</h1> </div>よく使うやつ
個人的に良く使うやつ
Margin（外側の余白）
https://www.lightningdesignsystem.com/utilities/margin/#site-main-contentPdding（内側の余白）
https://www.lightningdesignsystem.com/utilities/padding/#site-main-contentccenter（画像とかテキストを中央に揃える）
https://www.lightningdesignsystem.com/utilities/alignment/grid（画像の横並び レスポンシブにも対応）
https://www.lightningdesignsystem.com/utilities/grid/#site-main-contenttable（みんな大好き？テーブルさん）
https://www.lightningdesignsystem.com/components/data-tables/#site-main-content最後に
これを知っているだけで、開発工数が縮まると思います
Salesforceに興味がある方は、
trailheadがおすすめみたいです！
https://trailhead.salesforce.com/ja/home
- 投稿日：2020-04-21T15:25:24+09:00
hsl()の値をCSS変数で管理
自分用忘備録
明度と彩度はcalcを使って%にしてあげないといけない。
CSS変数はIE11では機能しないため、Polyfillを入れる。
https://github.com/nuxodin/ie11CustomProperties16進数の色ならPolyfillが効くけど、
CSS変数+hls()はPolyfillが効かないみたい。。（ガッカリ）:root { --h: 134; --s: 69; --l: 37; --c-site-base: hsl(var(--h), calc(var(--s) * 1%), calc(var(--l) * 1%)); }
- 投稿日：2020-04-21T13:14:07+09:00
HTMLに書くURI
基本的なことなのに
なんとなくで動いていたのだが、改めて調べて”へぇ”となったので。
お恥ずかしい前提
こんなHTMLにアクセスしているとする
http://localhost/test/test.html相対パス
<a href="relative.html">LINK</a>この時リンク先は今のディレクトリ階層から相対パスとなり
http://localhost/test/relative.html
になる絶対パス
<a href="/absolute.html">LINK</a>この時リンク先はホスト名からの絶対パスとなり
http://localhost/absolute.html
になるURL
<a href="http://localhost/url/url.html">LINK</a>この時リンク先はそのままURLで扱われるので
http://localhost/url/url.html
になるこれまで意識してこなかったけど、
こうなってるらしい。
- 投稿日：2020-04-21T10:29:41+09:00
CSS練習問題 #002 ～hoverに挑戦～
CSS練習問題 #001に続き、CSS練習問題第二弾です
前回は既にあるCSSに何かを付け足すような「足し算の概念」だけで解ける問題でしたが、今回の問題はそれだけではなく既存のCSSを打ち消すような「引き算の概念」が必要な問題もいくつか用意しました。
各問題の右上にあるこのロゴをクリックすると、自分で手を動かして実際に仕上がりを確認しながら問題に取り組めます。※ルールーは以下の通りです
- CSSを編集してマウスオーバーしたときのボタンの外観をデザイン画に近づける
- HTMLの変更は禁止
- 画像の使用は禁止
- before疑似要素、after疑似要素のcontentは""にすること(文字や記号を入れない)
- 検索はどんどんしてください
Q1.文字と背景の色を反転してください
See the Pen CSS練習問題 2 ～見出し～ Q1 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
#001をクリアした方には簡単な問題かと思います。
colorとbackground-colorに指定されている色を逆にします。
Q2.ワントーン明るくしてください
See the Pen CSS練習問題 2 ～見出し～ Q2 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
不透明度を80%ぐらいにします。
ただし、背景が黒などの場合はこの方法だと逆に暗くなってしまうので、その場合はbackground-colorに明るめの色を指定するなどの方法が良いと思います。
Q3.四角い角を丸くしてください
See the Pen CSS練習問題 2 ～見出し～ Q3 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
#001のおさらいです。
50%を指定するとボタン全体が楕円形になってしまうので、注意が必要です。
Q4.丸い角を四角くしてください
See the Pen CSS練習問題 2 ～見出し～ Q4 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
もともと指定されているborder-radiusをどうやって打ち消すかがキーになります。
Q5.グラデーションの方向を逆にしてください
See the Pen CSS練習問題 2 ～見出し～ Q5 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
回答例ではグラデーションの向きをto rightからto leftに変更しましたが。
カラーコードを逆にするという方法もあります。
Q6.線を二重にしてください
border-styleをdoubleにする以外の方法を考えてください
See the Pen CSS練習問題 2 ～見出し～ Q6 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
before属性を使ってボタンよりも1周り小さい四角を描画します。
また、position:absolute;指定の要素にmarginを指定するというテクニックは覚えておくと何かと便利です。
Q7.右上と左下だけ角を丸くしてください
See the Pen CSS練習問題 2 ～見出し～ Q7 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
border-radiusの1つ目の25pxで左上と右下、2つ目の0pxで右上と左下を同時に指定しています。
Q8.影を消して位置を下げてください
See the Pen CSS練習問題 2 ～見出し～ Q8 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
box-shadowを打ち消すには、初期値のnoneを指定します。
何かを打ち消す場合はそのプロパティの初期値を指定するのが基本です。
また、position:relative;の意味や役割を理解しましょう。
Q9.上下を逆にしてください
See the Pen CSS練習問題 2 ～見出し～ Q9 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
「上下を逆にする」というと、transform: rotate(180deg);を使う方も多いかと思いますが、この問題のデザイン画は回転ではなく反転して上下逆にするので、transform: scale(1, -1);が正解です。
↑transform: rotate(180deg);を指定した場合
↑transform: scale(1, -1);を指定した場合
Q10.左右を逆にしてください
See the Pen CSS練習問題 2 ～見出し～ Q10 by sun19017 (@sun19017) on CodePen.
解説 (クリックすると表示されます)
transform: scale(1, -1);で上下が反転するので、左右の反転はtransform: scale(-1, 1);になります。
- 投稿日：2020-04-21T05:20:57+09:00
初心者によるプログラミング学習ログ 295日目
100日チャレンジの295日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
295日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 20, 2020
295日目 1.5h
・xdデザインカンプからのサイト模写
・ハンバーガーメニュー作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日：2020-04-21T01:49:55+09:00
上下左右の中央寄せはflexboxを使うと楽
はじめに
コードを書いてばかりだと記憶に定着しないので、実際に言葉にして自分の失敗談を中心に書いてみたいと思います。
実際にQiitaで初めて記事を書くんだけど、そこは多めに見てほしいです。
今回は上下左右の中央寄せの話です。実際にやらかした失敗
例えば、ボタンを作成してるとボタンの内側の文字を上下左右の中央寄せで書くことが多いと思います。
実際に僕がやらかした失敗として、ボタンの内側の文字をpaddingを用いて力技で上下左右にしてしまいました。
僕が知ってる中央寄せで使いこなせるプロパティはtext-align:center;くらいしかなかったです。
これだと上下に中央寄せできないですね。
上下に中央寄せするのにpadding使うのは力技すぎて笑ってしまう。
今思うと、「なんて非効率なことをしたんだろう…」って思います。解決策
そんな恥ずかしい失敗をしてしまったからこそ、自分がどうやって解決したかをまとめておきます。
paddingの力技を用いずともfloatの上位互換と言っても良いくらい便利なflexで解決できてしまいます。
それが以下のコードのように書けば綺麗に上下左右に中央寄せできます。index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>ボタン</title> </head> <body> <div class="all"> <div class="button"> <h2>ボタン</h2> </div> </div> </body> </html>style.css.all { display: flex; justify-content: center; } .button { width: 300px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #000000; border-radius: 25px; }ボタンの枠線を中央寄せするにはallクラス（親要素）にdisplay:flex;とjustify-content:centerを。
ボタンの文字を中央寄せはbuttonクラス（子要素）にdisplay:flex;とjustify-content:center;align-items:center;を。
これでボタン全体がブラウザで綺麗に中央寄せになり、文字が綺麗に上下左右になりました。終わりに
flexboxは主に横並びのときに使う便利なプロパティですが、中央寄せするときでも使える便利です。
flexboxの奥深さを改めて気づいた一日でした。参考記事