20200118のCSSに関する記事は8件です。

【CSS】背景に画像を複数設置し、その「上」にコンテンツを載せる

.contentInnerとその中身を画像の上に浮かせます

filename.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="headerInner">
      <div class="headerLeft">
        <img src="./img/" alt="logo">
      </div>
      <nav>
        <ul>
          <li>
            <a href="">HOME</a>
          </li>
          <li>
            <a href="">CONTENT</a>
          </li>
          <li>
            <a href="">CONTACT</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="contentInner">
    <h2>h2_title</h2>
    <section class="top">
      <div class="leftContents">
        <h3 class="h3_title">h3_title</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
        </p>
      </div>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="center reverse">
      <div class="leftContents">
        <h3 class="h3_title">h3_title</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
        </p>
      </div>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="top">
      <div class="leftContents">
        <h3 class="h3_title">h3_title</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
        </p>
      </div>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="center reverse">
      <div class="leftContents">
        <h3 class="h3_title">h3_title</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
        </p>
      </div>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="top">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
      </p>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="center reverse">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
      </p>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
  </div>

</body>
</html>
filename.css
* {
  padding: 0;
  margin: 0;
}

ol, ul {
  list-style: none;
}

a {
  cursor: pointer;
  color: black;
  text-decoration: none;
}

header {
  width: 100%;
  background: linear-gradient(#fe3, #66ff22);
  position: absolute;
  top: 0;
  z-index: 100;
}

.headerInner {
  width: 1000px;
  margin: 0 auto;
  display: flex;
}

nav {
  width: 100%;
}

nav ul {
  display: flex;
  right: 0;
}

nav ul li {
  width: 100%;
  text-align: center;
  border-right: 1px solid white;
}

nav ul li:first-child {
  border-left: 1px solid white;
}

nav ul li a {
  display: block;
  padding: 20px;
  font-weight: bold;
}

nav ul li a:hover {
  background: linear-gradient(green, aqua) ;
  transition: all 0.8s;
}

body {
  background-image: url(./img/IMG_0007.JPG),
    url(./img/IMG_0830.JPG);
  background-repeat:
    no-repeat,
    no-repeat;
  background-size:
    100% 400px,
    100% 400px;
  background-position: 
    top, 0px 400px,
    center,  0px 300px;
}

.contentInner {
  width: 1000px;
  margin: 130px auto;
  background-color: azure;
  height: 100%;
  padding: 30px 0;
  border-radius: 20px;
}

.contentInner>section {
  width: 900px;
  margin: 30px auto;
  background-color: palegreen;
  display: flex;
}

.reverse {
  flex-direction: row-reverse;
}

img {
  width: 40%;
}
.leftContents {
  padding: 30px;
}

h2, h3 {
  text-align: center;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【CSS】画像と台形のテキストボックスを重ねたアイキャッチの作り方

【CSS】画像と台形のテキストボックスを重ねたアイキャッチの作り方

オンライン学習サイトの画像を想定しています。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="relative mv">
    <!--左側画像部分-->
    <img src="./img/school.jpg" alt="">
    <!--/左側画像部分-->
    <!--右側テキストボックス-->
    <div class="my-parts absolute">
      <div class="textWrapper">
        <h2>
          洗練されたオンライン学習体験を。
        </h2>
        <div class="box">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda rem laboriosam quidem quasi deserunt delectus animi suscipit ratione modi illum ipsa ipsum dicta aliquid, consequatur exercitationem! Minima at facere deserunt!
        </div>
        <div class="box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, accusantium aspernatur atque quidem pariatur placeat iure alias consectetur, fuga, debitis ipsum? Eum sit cumque dolores tempora laborum consequuntur neque voluptas.
        </div>
        <div class="btnWrapper">
          <p class="btn orange">
            <a href="">お問い合わせ</a>
          </p>
          <p class="btn aqua">
            <a href="">詳しく見る</a>
          </p>
        </div>
      </div>


    </div>
    <!--/右側テキストボックス-->
</body>
</html>
style.css
* {
  padding: 0;
  margin: 0;
}

a {
  cursor: pointer;
  color: black;
  text-decoration: none;
}

/*.mv*/
.relative {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.absolute {
  position: absolute;
}

/*.mv img*/
.relative img {
  width: 500px;
  height: 100%;
}

/*右側*/
.my-parts {
  border-bottom: 334px solid cornflowerblue;
  width: 600px;
  height: 0px;
  border-left: 50px solid transparent;
  right: 0;
}

.textWrapper {
  padding: 30px;
}

h2 {
  text-align: center;
}


/*ボタン部分*/
.btnWrapper {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

p.btn {
  width: 40%;
  text-align: center;
  border: 2px solid grey;
  border-radius: 30px;
}

p.btn a {
  display: block;
  padding: 10px 0;
}

.aqua {
  background-color: aqua;
}

.orange {
  background-color: orange;
}

p.btn:hover {
  opacity: 0.8;
  transition: all 0.5s;
}
/*/ボタン部分*/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Firebase 静的サイト(html CSS JavaScript)をデプロイ

Firebaseにてデプロイの記録

【使用環境】
html
CSS
JavaScript
macbook

<次回の時短の為に記録>


Firebaseにて登録、 (googleアカウント必要)ログイン

https://firebase.google.com/

新しいプロジェクトフォルダをFirebase HP内で作成する。
スクリーンショット 2020-01-18 17.31.20.png


ここからターミナルで

今回は下記②の設定のために public ディレクトリ 配下にデプロイアプリ(html CSS JavaScript img等)を配置

URL > ルートパスの為


デプロイにGitHubは必須ではないが、
git add ←必要なら
git commit   ←必要なら
push ←必要なら


① firebase-tools をインストール

(npm がインストールされている前提)
$ npm install -g firebase-tools

$ npm -v

$ firebase -V

$ firebase login

アプリディレクトリへ移動後、

①初期化

$ firebase init

この画面が出る
スクリーンショット 2020-01-18 16.53.21.png

PCの矢印キーで Hosting:  を選択。 (色が変わる。かつ●へ)
エンター
スクリーンショット 2020-01-18 16.53.46.png

firebaseのHPで作成した

アプリを関連付けるプロジェクトを選択するよう求められる

Use an existing project を選んで エンター
スクリーンショット 2020-01-18 16.55.55.png

HPで作成したプロジェクト一覧がでる。
今回のものを選択し、エンター

(画像はありません)

ディレクトリのパスを聞かれるのでデフォルト (/public) のまま エンター

スクリーンショット 2020-01-18 17.19.42.png

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
他も動かすため、推奨 Nを選択

File public/index.html already exists. Overwrite?
作成したindex.htmlが上書きされるので 推奨 Nを選択

complete!

スクリーンショット 2020-01-18 17.23.30.png

初期化が完了


デプロイ

そのままの階層で 

$ firebase deploy

スクリーンショット 2020-01-18 17.25.57.png

↑ ここの下に URLがある。

デプロイ完了

(修正後の再デプロイは、$ firebase deployだけで↑は不要)


2回目以降の事象

$ firebase login

>Error: Server Error. certificate has expired

スクリーンショット 2020-01-18 16.47.15.png

その為、

firebase-toolsをupdateする必要がある

$ sudo npm i -g firebase-tools 

$ firebase login   

ログインできた

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

「初心者必見 」HTML 本当にその組み方で合ってるの? (BEMとSASSをこそっと使いますっ)

HTMLの組み方ってイマイチわかりにくいですよね。そもそもどう考えたらいいのでしょう?

HTMLを組むこと(マークアップ)には私自身かなり苦労しました。パターンが無限に見えますし、エラーが出ないのでどう改善したらいいかわからなかったのです。1年以上前にProgateでやってみたものの、よくわからないままでした。そういう方多いと思います。

このままではダメだ!ということで半年以上毎日マークアップし続け、
ほぼほぼマークアップの組み方の体系ができたので、書き残して置くことにしました。

この記事は、過去私と同じようにHTMLに苦しんでいる方に向けて書きました。

HTMLで重要な考え方

毎日マークアップをし続けて、重要なことに気づきました。
それは、レイヤー意識です。

は?レイヤー意識?なにそれ?

レイヤーとは層です。HTMLでレイヤー=タグです。
どういうことかといいますと、div > div > div なら3層(レイヤー)構造です。
各レイヤーの役割を意識し、スタイルを的確に当てるのです。
初めは難しく感じると思いますので、今ここでは「へー、そうなんだ」っと流しててください。

例を出しましょう

Lesson1 HTMLの考え方
Lesson2 block系とinline系の使い分け
Lesson3 準備:当たりの付け方

Lesson1 HTMLの考え方

「div div div ・・・・・ってどこまでタグ増やすのかわからない」
これが一番大きな問題でしょう。
どのようにdivなどの階層をつくるのか?一緒に考えましょう!

lesson1.jpg

・画像やテキストがを括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
....etc

という風になってますね。

まず考えるのは、テキストと画像を直上で括っているレイヤー(緑)ですね。
その括っているレイヤーをコンポーネントとしましょうか。
例えばカードスタイルですね。
上の画像はカードスタイルですね。

そうこのコンポーネントのレイヤーを探すのです。

Lesson2 block系とinline系の使い分け

コンポーネントを見つけたら、次はコンポーネントの中身の並びを考えましょう!
「画像の横にテキスト」という並びにしてみましょう

lesson2.jpg

 まずテキストがバラバラなので、divで括っちゃいましょう。
そうすれば、そのdivにスタイルを当てるだけで、中身のテキストを同時に動かせますからね。
div
figure
img
div(これ追加)
p
p
※こういうdivを私はラッパーと読んでます。
 Card__txt-wrapperみたいな感じのクラス名を使います。
 んー・・・コンポーネントの中身が全て横幅一杯に広がってますね。
これでは横並びにできません。なぜでしょうか?

中身の要素がブロックだからです。
※Progateでブロックうんぬん説明しているレッスンありましたよね?

ブロックは横に広がるんです。
じゃぁ、figureとdivにwidth40%とか50%でも当てたら横並びになりますか?

ならないですよ。なぜでしょうか?
それはblockだからです。見た目は縮まっても実際には縮まってないからです。

それぞれinline-blockに変えましょう。width調整すれば横並びになるはずです。

※ちなみに50%では横並びになりませんよね?なぜでしょう?
 それはご自身で確認してくださいね。ヘッダーやフッター作るときに使うことありますので。

Lesson3 準備:当たりの付け方

ここまでざっくり組み方を「お勉強」しました。
さて、実際に組んで見ましょう!

ここではXDのUIキットを使ってます。
下記よりダウンロードしてください。
https://xdresources.co/resources/responsive-resize-kit

lesson3.jpg

まず大まかに捉えましょう!
ヘッダー、メイン、フッターですねぇ。
※今回はヘッダーの中に、ヒーローを入れますが階層意識をつけてもらうためにわざとです。

さて、コンポーネントレイヤーを探しましょうか!

①ヒーロー(topの目立つ画像周辺)には、テキストやボタンが並んでますね。

div.Hero
 p.txt1
 p.txt2
 button

②ヒーロの右横にもコンポーネントレイヤー発見!

  今回はテキストを括るだけですねぇ。括るってなれば、まず私はラッパーと名付けます!

div.Hero-Txt-Wrapper
  p.txt1
 p.txt2

ヒーロー周辺にあるので、Hero-Txt-Wrapperとしました。

③メインにカードが並んでますねぇ・・・カードはコンポーネントレイヤーになる!

div.Card
 p.txt1
 p.txt2

④ん?カードを括るレイヤーもほしいな。。そして並んでるから、listだ!

ul.Card-List
  li.Card-List_item
    p.txt1
    p.txt2
  li.Card-List_item
    p.txt1
    p.txt2

もしくは
ul.Card-List
  li.Card
   p.txt1
   p.txt2

という感じでまずHTMLを組むのです

ある程度組んでから、コンポーネントとその中身毎にCSSを当てていきます。
一気にカードを並べたり・・・なんて考えると難しいです。

並べるに当たってfloatでもinlineでもflexでもなんでも良いですが、
まずカードをしっかり作った方がうまくいきます。

ラッパー(上)から当てると、ガチガチ固まりすぎて流用きかず、
よくわからないCSSの出来上がりです。

理解しやすいコンポーネントレベルについて組み上げると、 CSSが綺麗なることと無駄なレイヤーがなくなります。
デザインに合わせた必要最少レベルのレイヤー出かけるようになります。

余談:コンポーネントの中身

「コンポーネントもラッパーなんじゃない?」ってお気付きの方もいるでしょう。

そうです。
そして、コンポーネントの中身がアトミックです。
さらにいうと、アトミックの中身がエレメンタリーパーティクルです。

ここら辺の話はCSS設計レベルになるので、また今後書きます。

最終的にはAtomicDesign・FLOCCSS・BEMを融合したCSS設計
これを順序立てては書き上げる予定です。

次回はBEMです。
BEMのブロックネスト・・・お困りでしょう

だから次はBEMのブロックネスト対応パターンと
それぞれパターンの選択基準について書きます。

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

「初心者必見 」HTML 本当にその組み方で合ってるの? (BEMをこそっと使いますっ)

HTMLの組み方ってイマイチわかりにくいですよね。そもそもどう考えたらいいのでしょう?

HTMLを組むこと(マークアップ)には私自身かなり苦労しました。パターンが無限に見えますし、エラーが出ないのでどう改善したらいいかわからなかったのです。1年以上前にProgateでやってみたものの、よくわからないままでした。そういう方多いと思います。

このままではダメだ!ということで半年以上毎日マークアップし続け、
ほぼほぼマークアップの組み方の体系ができたので、書き残して置くことにしました。

この記事は、過去私と同じようにHTMLに苦しんでいる方に向けて書きました。

HTMLで重要な考え方

毎日マークアップをし続けて、重要なことに気づきました。
それは、レイヤー意識です。

は?レイヤー意識?なにそれ?

レイヤーとは層です。HTMLでレイヤー=タグです。
どういうことかといいますと、div > div > div なら3層(レイヤー)構造です。
各レイヤーの役割を意識し、スタイルを的確に当てるのです。
初めは難しく感じると思いますので、今ここでは「へー、そうなんだ」っと流しててください。

例を出しましょう

Lesson1 HTMLの考え方
Lesson2 block系とinline系の使い分け
Lesson3 準備:当たりの付け方

Lesson1 HTMLの考え方

「div div div ・・・・・ってどこまでタグ増やすのかわからない」
これが一番大きな問題でしょう。
どのようにdivなどの階層をつくるのか?一緒に考えましょう!

lesson1.jpg

・画像やテキストがを括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
....etc

という風になってますね。

まず考えるのは、テキストと画像を直上で括っているレイヤー(緑)ですね。
その括っているレイヤーをコンポーネントとしましょうか。
例えばカードスタイルですね。
上の画像はカードスタイルですね。

そうこのコンポーネントのレイヤーを探すのです。

Lesson2 block系とinline系の使い分け

コンポーネントを見つけたら、次はコンポーネントの中身の並びを考えましょう!
「画像の横にテキスト」という並びにしてみましょう

lesson2.jpg

 まずテキストがバラバラなので、divで括っちゃいましょう。
そうすれば、そのdivにスタイルを当てるだけで、中身のテキストを同時に動かせますからね。
div
figure
img
div(これ追加)
p
p
※こういうdivを私はラッパーと読んでます。
 Card__txt-wrapperみたいな感じのクラス名を使います。
 んー・・・コンポーネントの中身が全て横幅一杯に広がってますね。
これでは横並びにできません。なぜでしょうか?

中身の要素がブロックだからです。
※Progateでブロックうんぬん説明しているレッスンありましたよね?

ブロックは横に広がるんです。
じゃぁ、figureとdivにwidth40%とか50%でも当てたら横並びになりますか?

ならないですよ。なぜでしょうか?
それはblockだからです。見た目は縮まっても実際には縮まってないからです。

それぞれinline-blockに変えましょう。width調整すれば横並びになるはずです。

※ちなみに50%では横並びになりませんよね?なぜでしょう?
 それはご自身で確認してくださいね。ヘッダーやフッター作るときに使うことありますので。

Lesson3 準備:当たりの付け方

ここまでざっくり組み方を「お勉強」しました。
さて、実際に組んで見ましょう!

ここではXDのUIキットを使ってます。
下記よりダウンロードしてください。
https://xdresources.co/resources/responsive-resize-kit

lesson3.jpg

まず大まかに捉えましょう!
ヘッダー、メイン、フッターですねぇ。
※今回はヘッダーの中に、ヒーローを入れますが階層意識をつけてもらうためにわざとです。

さて、コンポーネントレイヤーを探しましょうか!

①ヒーロー(topの目立つ画像周辺)には、テキストやボタンが並んでますね。

div.Hero
 p.txt1
 p.txt2
 button

②ヒーロの右横にもコンポーネントレイヤー発見!

  今回はテキストを括るだけですねぇ。括るってなれば、まず私はラッパーと名付けます!

div.Hero-Txt-Wrapper
  p.txt1
 p.txt2

ヒーロー周辺にあるので、Hero-Txt-Wrapperとしました。

③メインにカードが並んでますねぇ・・・カードはコンポーネントレイヤーになる!

div.Card
 p.txt1
 p.txt2

④ん?カードを括るレイヤーもほしいな。。そして並んでるから、listだ!

ul.Card-List
  li.Card-List_item
    p.txt1
    p.txt2
  li.Card-List_item
    p.txt1
    p.txt2

もしくは
ul.Card-List
  li.Card
   p.txt1
   p.txt2

という感じでまずHTMLを組むのです

ある程度組んでから、コンポーネントとその中身毎にCSSを当てていきます。
一気にカードを並べたり・・・なんて考えると難しいです。

並べるに当たってfloatでもinlineでもflexでもなんでも良いですが、
まずカードをしっかり作った方がうまくいきます。

ラッパー(上)から当てると、ガチガチ固まりすぎて流用きかず、
よくわからないCSSの出来上がりです。

理解しやすいコンポーネントレベルについて組み上げると、 CSSが綺麗なることと無駄なレイヤーがなくなります。
デザインに合わせた必要最少レベルのレイヤー出かけるようになります。

余談:コンポーネントの中身

「コンポーネントもラッパーなんじゃない?」ってお気付きの方もいるでしょう。

そうです。
そして、コンポーネントの中身がアトミックです。
さらにいうと、アトミックの中身がエレメンタリーパーティクルです。

ここら辺の話はCSS設計レベルになるので、また今後書きます。

最終的にはAtomicDesign・FLOCCSS・BEMを融合したCSS設計
これを順序立てては書き上げる予定です。

次回はBEMです。
BEMのブロックネスト・・・お困りでしょう

だから次はBEMのブロックネスト対応パターンと
それぞれパターンの選択基準について書きます。

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

【HTML】【CSS】Font Awesome

Font Awesome

:sunny: アイコンが使用できる
:sunny: アイコンを文字として扱うことができるためCSSが使える

よくあるTwitterの
スクリーンショット 2020-01-18 2.20.00.png
とか
Facebookの
スクリーンショット 2020-01-18 2.21.02.png
とかのアイコン。

これ2つとも Font Awesome というアイコンばかりあるサイトから作成しました:smile:

使い方

いろいろ使い方はあるようですが、ダウンロードして使う方法をまとめます。

Font Awesome にアクセスしてCSSファイルを読み込む。

Font Awesome のトップ画面にアクセスする。
アクセスすると選択画面のようなものがでてきますが
無料で使いますか?それとも有料で使いますか?
ということです。
ひとまず無料を選びましょう:smile:
スクリーンショット 2020-01-18 2.38.28.png

少し画面を下に移動させると下記のような画面になります。
ダウンロードボタンをクリックします。
スクリーンショット 2020-01-18 2.43.47.png

Downloadボタンをクリックします。
スクリーンショット 2020-01-18 2.47.46.png

ボタンを押すとダウンロードされるので任意の場所に保存します。
保存したら HTML の head 部分に以下のように記載します。

例.html
  <head>
    <link rel="stylesheet" href="保存した場所のパス/fontawesome-free-5.12.0-web/css/all.css">
  </head>

個人PC名と個人フォルダ名が記載されているため少しふせますが、
私の場合は以下のようになります。

例.html
  <head>
    <link rel="stylesheet" href="file:///Users/個人PC名/Desktop/個人フォルダ名/fontawesome-free-5.12.0-web/css/all.css">
  </head>

これで Font Awesome の CSSファイルを読み込む用意ができました:smile:

使用するアイコンのクラス名を指定してWebに反映させる

Font Awesome のトップ画面にアクセスする。
トップ画面の上側に Icons をクリック。
スクリーンショット 2020-01-18 3.31.40.png

いろんな種類のアイコンが表示されていますが検索窓で検索したほうが早いので検索窓で検索します。
今回は Twitter と検索します。
日本語では検索できないので必ず英語で検索してください。
スクリーンショット 2020-01-18 3.40.04.png

Twitter と検索すると以下の10個のアイコンが表示されました:smile:
色が濃いアイコンと薄いアイコンがあるかと思いますが

濃いアイコン → 無料
薄いアイコン → 有料

の違いです:sweat_smile:
なので薄いアイコンを使いたいなと思ったらお金飛んでいきます:sweat_smile:

今回は赤枠で囲んだアイコンを使用したいので赤枠のアイコンをクリックします。
スクリーンショット 2020-01-18 3.45.04.png

アイコンボタンをクリックすると今度は大きなアイコンがあらわれるかと思います。
大きいアイコンの上にコードが書かれていると思います。
そのコードをクリックするとコードがコピーできるのでクリックします。
スクリーンショット 2020-01-18 3.50.47.png

コピーしたら HTML にペーストするのですが
今度は head 部分に記入するのではなくて
body 部分に記入します。

head 部分はWeb上に表示されませんが
body 部分はWeb上に表示されます。
アイコンはWeb上に表示させたいため body 部分に記入します。

例.html
  <body>
    <i class="fab fa-twitter-square"></i>
  </body>

で、ちゃんと読みこんで表示されてるかなぁとWebを確認してみると・・・
スクリーンショット 2020-01-18 4.02.27.png

ちっちゃ!:scream:
これではなんなのかわかんない:disappointed_relieved:
どうするのかといえば・・・最初に書いたようにアイコンを文字として扱える。
つまりCSSが使える:raised_hands:
CSSで大きくして、色も塗っちゃえ:laughing:

例.css
.fa-twitter-square {
  color: #00a1f2;
  font-size: 100px;
}

Web

スクリーンショット 2020-01-18 4.12.09.png

できた:laughing:

注意事項

HTMLではクラス名を fab fa-twitter-square としていましたが
CSSでは fab を省いた fa-twitter-square としています。
fab fa-twitter-square と全部入力しちゃうとCSS反映しません:expressionless:
なぜなら fab というクラス名と fa-twitter-square のクラス名が2つあるからです。

なので

例.css
.fa-twitter-square {
  color: #00a1f2;
  font-size: 100px;
}

とするか

例.css
.fab {
  color: #00a1f2;
  font-size: 100px;
}

にする必要があります。

今回Twitterしかなかったのでどちらのクラス名でもいいのですが
もし下記のように複数ある場合

例.html
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>

クラス名を fab で指定すると

例.css
.fab {
  font-size: 100px;
  color: #00a1f2;
}

Web

スクリーンショット 2020-01-18 4.49.57.png

TwitterもFacebookも同じ色になっちゃいました:sweat_smile:

ではCSSをこのように記入するとどうでしょうか。
fab クラスで大きさを揃えて
カラーだけそれぞれ違う色にします。

例.css
.fab {
  font-size: 100px;
}

.fa-twitter-square {
  color: #00a1f2;
}

.fa-facebook-square {
  color: #3578E5;
}

Web

スクリーンショット 2020-01-18 4.55.21.png

ちゃんと反映されました:laughing:

おまけ

さきほどは Font Awesome のクラス名をそのままコピペしましたが、

例.html
<span class="fab fa-twitter-square"></span>

span でも

例.html
<div class="fab fa-twitter-square"></div>

div でも使用できます:smile:

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

Tachyons メモ

この記事を書いてる時点でstar数は9500あるわりに、使われているものを見たことがないCSSのフレームワーク。あまり使い込んだわけじゃないけど、basscss みたいな印象で、めっちゃたくさんヘルパーがある感じ

別に万人にすすめられる感じでもないけど、細かい部分のデザインがわりとページによってコロコロ変わる統一性のないサイト(担当者の気分で変わったり、そもそも担当者がページによって違うサイト)にはこういったフレームワークが重宝するので、個人的にこういった思想のフレームワークは嫌いじゃないのですが、このフレームワークの命名がかなり極端にというか基本1文字に省略しているのでそこを毛嫌いする人も多そう

<a class="link dim dib mr3" href="#" title="Home">Home</a>

これを見て使いやすそうと思う人はなかなかいない気がして、すべてTachyonsのclassを使うってわけじゃなく、あくまでヘルパー的な使い方をするのが幸せになれる気がする

それとTachyonsはドキュメントをみるよりも直接github上のCSSのをみたほうがわかりやすいことが多いので、困ったらgithubでクラス名検索するのがいいと思う。上の例でわかりにくいのは .dim とかだと思うので、調べてみると意味がわかるはず

以下は全部を書いているわけじゃなくてこういうのもある、という参考程度の一部を書いただけのものです

Responsive

何故か公式のドキュメントに詳しく解説されているページがない気がする

基本的にモバイルファーストで、デフォルトの設定であれば、接尾辞として -m のように書く

条件 意味
30em 以上 ns not-small
30em 以上 60em 以下 m medium
60em 以上 l large

次の項目のmargin, padding を例にすると ma1 ma3-m ma7-l のようにかくと画面サイズが大きくなるにつれてマージンが大きくなる

特徴的なのが ns で、スマホじゃない程度のデバイスの広さがあるときにデザインを変えてるときに便利なのかもしれない

margin, padding (基本的な省略パターン)

意味
m margin
p padding
a all
h horizontal
v vertical

marginをすべてにstep1の大きさでつけたければ ma1 と書く

display (一部例外パターン)

.dn {              display: none; }
.di {              display: inline; }
.db {              display: block; }
.dib {             display: inline-block; }
.dit {             display: inline-table; }
.dt {              display: table; }
.dtc {             display: table-cell; }
.dt-row {          display: table-row; }
.dt-row-group {    display: table-row-group; }
.dt-column {       display: table-column; }
.dt-column-group { display: table-column-group; }

cellとcolumnがかぶるので使わないほうを省略しないで書いて、対になりそうなものも合わせてフルスペルにした、とかだろうか

letter-spacing (一部例外的な省略パターン)

ls ではなく

.tracked       { letter-spacing:  .1em; }
.tracked-tight { letter-spacing: -.05em; }
.tracked-mega  { letter-spacing:  .25em; }

こうなる

感想

省略に一貫性を感じることがないのでかなり辛い。これを導入する気にはちょっとなれなかった。ヘルパーならbasscssのほうが妙な省略とかはないので使いやすいと思う

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

Built-in CSSがサポートされました[Next.js 9.2更新情報]

はじめに

ReactでSSR(Server Side Rendering)が可能なフレームワークであるNext.js。久しぶりに見てみると2020年1月15日にバージョン9.2を公開しており、個人的に嬉しい機能が追加されたということで紹介していきたいと思います。

この記事は公式ブログで紹介されている内容をまとめる形になるので、詳しい内容は公式ブログで確認してください。

新(?)機能まとめ

  • Built-in CSS Support for Global Stylesheets
  • Built-in CSS Module Support for Component-Level Styles

CSSを別ファイルからグローバルやコンポーネント単位のモジュールとしてのインポートが簡単になりました。

  • Code-Splittingの改善

ビルド時のコード分割を改善することにより、アプリケーションのサイズがかなり小さくなりました。

  • 動的パスを全て取得

例えば/post/a/b/とパスが動的パスであるとき、/pages/post/[...slug].js[...name]シンタックスを使用することで、queryとして{ slug: ["a", "b"] }を得ることができ動的パスをまとめて取得することが可能になりました。

本記事では最初のBuilt-in CSSについて少し話して終わります。

Built-in CSSのサポート

今まで別ファイルのCSSを使用するには、以下のような手順が必要でした。

  1. @zeit/next-cssのインストール。
  2. next.config.jsを作成し、設定を記述。

2手間ではありますが、毎回設定するのであればさすがに面倒だと思います。さらに、このnext-cssにはある束縛がありました。それは

グローバルかローカルかどちらかしか選択ができない。

ということです。これらの問題を解決したのが今回のアップデートになります。
グローバルとローカルの区別は以下のようになります。

  • グローバル ... [name].css
  • ローカル ... [name].module.css

それでは、例を挙げていきます。

例: グローバル

public/style.cssを作成します。

public/style.css
body {
  padding: 20px 20px 60px;
  margin: 0;
}

h1{
  color: red;
}

アプリケーション全体で適用したいので、_app.jsxでこのファイルを読み込みます。

pages/_app.jsx
import '../public/style.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

そして、ホーム画面を用意します。

pages/index.jsx
export default () => {
  return (
    <>
      <h1>HOME</h1>
    </>
  )
};

すると...
global.PNG
ちゃんと赤色になってますね。要素を見てみると...
global2.PNG
グローバルになってそうですね。

例: ローカル

pages/home.module.cssを作成します。

pages/home.module.css
.underline{
  border-bottom: 2px dotted black;
}

そして、pages/index.jsxを以下のように修正します。

pages/index.jsx
import styles from "./home.module.css"

export default () => {
  return (
    <>
      <h1>HOME</h1>
      <h1 className={styles.underline}>Welcome to Next.js 9.2!</h1>
    </>
  )
};

そうすると、しっかりアンダーラインが引かれて、またモジュールとして呼び出せていることがわかります。
local.PNG

おわりに

今回はNext.jsのバージョンアップに伴った更新点を紹介しました。
本記事ではBuilt-in CSSのみ紹介しましたが、他の機能も本格的なアプリケーションを作る際に助かるような内容になっています。ぜひ公式のブログにアップデートの内容が詳しく書かれているので読んでみてください。

参考

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