What's New Qiita

20200210のCSSに関する記事は4件です。

  • 投稿日：2020-02-10T23:02:02+09:00

未経験から始めるHTML/CSS ~float編~

はじめに

2020年2月より未経験ながらHTML/CSSをProgateにて学習を開始し、
その中でHTML/CSSを学習するに当たって私自身が疑問に思ったことを纏めてみました。
今後お互いの学習に役立てれば良いと考えQiitaに投稿を始めました。
今回はその2回目、floatについて説明して行きます。

対象者

  • ProgateでHTML/CSSを学習中の方

自己紹介

こんにちは。
私は現在27歳で、4年間半導体業界でテストエンジニアとしてSierにて働いております。
この度半導体業界の不景気により仕事がない状態が続いており2月29日を持ちまして退職、
また脱Sierを目指し学生時代に興味があったweb関係の仕事に就こうと考えている者です。

floatとは?

floatの役割はブロック要素を縦から横にする際に使用します。
というのもブロック要素は要素を縦並びにする性質があります。

スクリーンショット 2020-02-10 23.24.59.png

その際にブロック要素を横にする際に必要なのがfloat: leftです。
実際にfloatにleftを掛けてみましょう。

index.html
<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>  float  </title>
<link rel="stylesheet" href="style.css">
</head>

 <body>
   <div class="red"></div>
   <div class="blue"></div>
 </body>

</html>
style.css
.red{
  background-color: red;
  float: left;
  width: 200px;
  height: 200px;

}

.blue{
  background-color: blue;
  float: left;
  width: 200px;
  height: 200px;
}

上記のソースコードを実施すると、divタグ要素を左寄せで横にする事ができましたね。
これを利用する事で横並びのメニューバーなども作る事ができます。

スクリーンショット 2020-02-10 23.13.40.png

次にblueのブロック要素にfloat: rightを掛けてみましょう。

style.css
.red{
  background-color: red;
  float: left;
  width: 200px;
  height: 200px;

}

.blue{
  background-color: blue;
  float: right;
  width: 200px;
  height: 200px;
}

上記のソースコードを実施すると、divタグを右寄せで横にする事ができましたね。
float: leftが左寄せ、rightが右寄せと忘れないにしましょう。
スクリーンショット 2020-02-11 0.42.34.png

子要素と親要素

次に子要素と親要素にfloatをかけた際にお互いにどういう影響を与えるか確認します。
その前にfloatを掛けない状態ではどうなるでしょうか。

index.html
<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>  float  </title>
<link rel="stylesheet" href="style.css">
</head>

 <body>
   <div class="parent">
　　　　<div class="child"></div>
　　</div>
 </body>

</html>
style.css
.parent{
  background-color: red;
  width: 200px;
  height: 200px;

}

.child{
  background-color: blue;
  width: 100px;
  height: 100px;
}

子要素、親要素両方ともブロックレベルなので縦並びでまた子要素は親要素に抱合されます。
スクリーンショット 2020-02-11 6.05.13.png

では親要素にfloatを掛けた際に子要素がどのような挙動をするか見てしましょう。
親要素のみにfloat: rightを掛けてみます。

style.css
.parent{
  background-color: red;
  width: 200px;
  height: 200px;
  float: right;
}

.child{
  background-color: blue;
  width: 100px;
  height: 100px;
}

子要素は親要素の影響を受け一緒にfloat: right、つまり親要素と共に右寄せに移動しました。
スクリーンショット 2020-02-11 6.25.48.png

次に子要素のみにfloat: rightを掛けた際に各要素はどうなるでしょうか。

style.css
.parent{
  background-color: red;
  width: 200px;
  height: 200px;
}

.child{
  background-color: blue;
  width: 100px;
  height: 100px;
  float: right;
}

子要素は親要素内で右寄せになりましたが、親要素は子要素の影響を受けません。
この子要素と親要素の関係を覚えて行くとfloatさせた際のレイアウト崩れを防止できますので
忘れないようにしましょう。

おわりに

学習中にふと「要素を右寄せにした際に、意図しない要素まで右寄せしレイアウトが崩れる」
事があり、今回疑問に思ったのでfloatさせた際にの親要素と子要素の関係を調べてみました。
私の経験が皆さんの役に立てれば幸いです。

Twitterもやっています!
もし興味が湧きましたらフォローよろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-10T18:11:35+09:00

個人的にオススメしたいHTML/CSSの学習教材

この記事では僕が今まで購入してきた中で
個人的にオススメしたいHTML/CSSの学習教材を三つ紹介していきたいと思います！

①よくわかるHTML5＋CSS3の教科書

➡https://www.amazon.co.jp/よくわかるHTML5-CSS3の教科書【第3版】-大藤幹/dp/4839965471

HTML/CSSを学ぶ人が最初に取り組むのに個人的にオススメな一冊です！
内容自体が教科書みたいな感じでHTML/CSSの基礎が網羅されています！

②HTML5/CSS3 モダンコーディング

➡https://www.amazon.co.jp/HTML5-CSS3モダンコーディング-フロントエンドエンジニアが教える3つの本格レイアウト-スタンダード・グリッド・シングルページレイアウトの作り方-吉田真麻-ebook/dp/B0176GNY26

一冊目のHTML/CSSでは紹介されていなかったモダンなコーディングをする方法
(Font Awesomeの使い方等)を教えてくれる実用的な技術書です！
僕自身ポートフォリオを作成した時に重宝したので本当にオススメです！

③[HTML/CSS/JavaScript]フロントエンドエンジニアになりたい人のWebプログラミング入門

➡https://www.udemy.com/course/html-css-js/

Udemyで分かりやすいと評判のTaniguchi Makotoさんの講座です！
特に参考になったことは
「CSSの詳細度」、
「真っ黒の文字は強すぎて見にくい」といった「デザインに関するアドバイス」、
「アクセシビリティの観点に立つことの重要性とその具体的アプローチ等」、
「『メソッド』」と『プロパティ』の区別の仕方」　
などで、多くの重要な事柄を学習できました！

紹介は以上となります！　如何でしたでしょうか？

紹介されている教材がかなり少ないかもしれませんが
最初はこれ位がシンプルで良いのでは？と個人的に思います！

参考になれれば嬉しい限りです(^^)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-10T17:00:15+09:00

【WordPress】 Gutenberg関連のCSSまとめ

はじめに

Gutenberg（ブロックエディタ）対応のテーマを作成するために、CSSを設計しようと思ったのですが、

  • 読み込まれるCSSの数が多い
  • どのように読み込む/読み込まれるのか
  • フロント側、エディタ側どちらで読み込まれるのか

などこんがらがるポイントが多かったので、まとめてみました。

style.min.css

フロント側で自動的に読み込まれる最初のCSS。

各ブロックの基本的なレイアウトを定義しており、特にブロックエディタ用のCSSを用意していなくても、ある程度いい感じに表示してくれるのはこのCSSのおかげ。

以下のように、wp_dequeue_style で無効化する事も出来ます。

functions.php
function mytheme_enqueue() {
    wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue' );

ただし、例えばテキストの中央寄せ（ .has-text-align-center ）などの基本的なスタイルすら適用されなくなるので、全ブロックをフルカスタマイズしてやろうという本気の方以外は、有効にしたままの方が良いです。

theme.min.css

フロント側で読み込まれる二つ目のCSS。

style.min.css に加え、もう少し見栄え良くスタイルを整えてくれます。

こちらは style.min.css と異なり、add_theme_support( 'wp-block-styles' ); で手動で読み込む必要があります。

コードもそれほど多くないので、読み込まずに自前でスタイルを用意してもよいと思います。

load-styles.php

エディタ側で自動的に読み込まれる最初のCSS。

ブロックエディタ含め、管理画面全体のCSSが定義されています。

style-both.css

※ファイル名は任意

アクションフック enqueue_block_assets を使うと、フロント側・エディタ側両方で読み込まれます。

functions.php
function mytheme_enqueue_both() {
    wp_enqueue_style( 'style-both', get_template_directory_uri() . '/style-both.css' );
}
add_action( 'enqueue_block_assets', 'mytheme_enqueue_both' );

フロント側・エディタ側を同時にスタイリング出来るので便利そうですが、前述した通り、

  • フロント側で読み込まれるCSSは style.min.css （＋ theme.min.css ）
  • エディタ側で読み込まれるCSSは load-styles.php

と、標準で読み込まれるCSSが違います。

スタイリングのされ方も若干異なるので、一つのCSSプロパティ・値で見え方を完全に統一させることは難しいです。

また、エディタ側のエディタ部はeditor-styles-wrapperというクラス名でラップされており、フロント側のコンテンツ部は独自のセレクタ（ .post-content とか）でラップするはずなので、共通のセレクタを使う事が出来ません。

とはいえ、セレクタに要素名（ h1 とか）を使うと、エディタ側・フロント側とも想定外のパーツにスタイルが当たってしまう懸念があります。

一つの用途として、ブロックにスタイルを適用した時に「is-style-XXX」といったクラス名がエディタ・フロントともに自動付与されるので、双方のブロックスタイルの見え方を共通のCSSで管理したい、といったケースに使えるのではないかと思います。

style.css

※ファイル名は任意

フロント側で読み込まれるCSS。

アクションフック wp_enqueue_scripts を使って読み込みます。

functions.php
function mytheme_enqueue() {
    wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue');

フロント側で、 style.min.css （＋ theme.min.css ）の次に読み込まれるCSSです。

一般的に、ヘッダー・フッター・サイドバー等のコンテンツ部以外をスタイリングするためのサイトのベースとなるCSSや、リセットCSS、各種ライブラリのCSSなどを読み込みます。

block-editor-style.css

※ファイル名は任意

アクションフック enqueue_block_editor_assets を使うと、エディタ側で読み込まれます。

functions.php
function mytheme_enqueue_block_editor() {
    wp_enqueue_style( 'mytheme-block-editor-style', get_template_directory_uri() . '/block-editor-style.css' );
}
add_action( 'enqueue_block_editor_assets', 'mytheme_enqueue_block_editor' );

読み込み順は、

  • load-styles.phpの後

  • enqueue_block_assets で読み込んだCSS（ style-both.css 等）の前

となります。

また、enqueue_block_assets と名前が似ているので紛らわしいですが、

  • enqueue_block_assets で読み込み → フロント側・エディタ側両方で読み込まれる

  • enqueue_block_editor_assets で読み込み → エディタ側で読み込まれる

という違いがあります。

エディタ側のブロックをスタイリングするためのCSSとして使われます。

editor-style.css

※ファイル名は任意

クラシックエディタでも使われるエディタ側のCSSで、以下のコードで読み込みます。

functions.php
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );

読み込み順は、

  • load-styles.phpの後

  • enqueue_block_assets で読み込んだCSS（ style-both.css 等）の後

  • enqueue_block_editor_assets で読み込んだCSS（ block-editor-style.css 等）の後

と、一番最後に読み込まれます。

特徴として、各セレクターの直前にブロックエディタ全体を囲っている .editor-styles-wrapper というクラスが自動的に挿入されます。
（ セレクタがbodyの場合は、 .editor-styles-wrapper に置き換わる ）

このCSSいついては使い所がまだ分かっていませんが、クラシックエディタ向けのスタイルを書いたりしたら良いんじゃないかと思います。

まとめ

フロント側

順番 ファイル名 自動/手動 読み込み方・特徴
1 style.min.css 自動 wp_dequeue_style( 'wp-block-library' ); で無効化出来る
2 theme.min.css 手動 add_theme_support( 'wp-block-styles' ); で読み込む
3 style-both.css
（ファイル名は任意）		 手動 アクションフック（enqueue_block_assets）内で読み込む
4 style.css
（ファイル名は任意）		 手動 アクションフック（wp_enqueue_scripts）内で読み込む

エディタ側

順番 ファイル 自動/手動 読み込み方・特徴
1 load-styles.php 自動 -
2 block-editor-style.css
（ファイル名は任意）		 手動 アクションフック(enqueue_block_editor_assets)内で読み込む
3 style-both.css
（ファイル名は任意）		 手動 アクションフック(enqueue_block_assets)内で読み込む
4 editor-style.css
（ファイル名は任意）		 手動 add_editor_style( 'editor-style.css' ) で読み込む
※各セレクタの先頭に、editor-styles-wrapperというclassが自動で付与される
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-10T15:38:02+09:00

visual studio code ショートカット Ctrl+/ が作動しません

visual studio code ショートカット Ctrl+/ が作動しません。
スクリーンショットのEditメニューを見るとCtrl + /にはきちんと割り当てられているのですが、ショートカットキーが使えないと困ります。どういった対処方法があるでしょうか。
visual studio code を再インストールするとかになってしまうのでしょうか？
　PCは　LENOVO　ideapad330で、昨年購入した機種です。
何か対処方法をご存じの方は教えてもらえませんでしょうか。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧