What's New Qiita

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

  • 投稿日：2020-01-18T20:34:33+09:00

【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で続きを読む
  • 投稿日：2020-01-18T19:00:42+09:00

【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で続きを読む
  • 投稿日：2020-01-18T19:00:13+09:00

【Angular】画面真っ白。Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html" がコンソールに表示

1. エラー詳細

Angularアプリをherokuでデプロイして、Build succeeded!されたけど
実際開いてみたら画面真っ白。
そして、コンソールにエラーメッセージが表示されていました。

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

モジュール読み込み失敗。サーバーはJavaScriptじゃない"text/html"のMIME型を返却。

2. 環境

macOS Mojave 10.14.6

Angular CLI: 8.3.22
Node: 12.10.0
Angular: 8.2.14
tsconfig.json

  "compilerOptions": {
    //JavaScirptのバージョン
    "target": "es2015",
  },

3. 解決策

index.htmlにあったscriptタグのtype属性をtext/javascriptに変更

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sample-app</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.f88876c1aa2c513e53bf.css"></head>
<body>
  <app-root></app-root>


 <!-- scriptタグのtype="module"をすべて type="text/javascript"に変更 -->

<script src="runtime-es2015.edb2fcf2778e7bf1d426.js" type="text/javascript">
</script>
<script src="runtime-es5.edb2fcf2778e7bf1d426.js" nomodule defer></script>
<script src="polyfills-es5.6696c533341b95a3d617.js" nomodule defer></script>
<script src="polyfills-es2015.2987770fde9daa1d8a2e.js" type="text/javascript"></script>
<script src="main-es2015.bb16c3796b9468f94a5b.js" type="text/javascript"></script>
<script src="main-es5.bb16c3796b9468f94a5b.js" nomodule defer></script></body>
</html>

変更後、再度デプロイしてみたところCSSも含めてすべて表示されるようになりました。

4. 参考サイト

MIMEタイプってなんだ？

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-01-18T16:48:12+09:00

Site relocation

The procedure for migrating a rental server differs slightly depending on "how you created your homepage".

"Why is the transition of Web pages important?" "Why is there a reason to go through the process and make no mistakes?" Let's take a look at the factors that make a transition necessary and the crucial ones to make.

There have been many requests to migrate Web pages made of that HTML to WordPress (wordpress conversion).

Download all homepage data from the previous rental server.

In addition, the technique of downloading is to use FFFTP software to download the data of the website to your PC.

There are cases where you want to automatically forward the entire website or a user who accesses a specific page to a specified URL.

There are several methods to achieve automatic transfer performance.

Sirius is a very good tool, but there are a lot of people who are eager to move to Google due to the high value of WordPress.

There are many types of templates, and their looks are sophisticated.

State-of-the-art web media will definitely come from WordPress.

I was proceeding according to the procedure, but finally the screen with the broken web page structure was displayed.韓国ドラマ太陽の末裔評判あらすじ

When moving a web page, the server of the transfer destination is required.

You can use a rental server, or if you have your own server, you can use your own server. There are cases where WordPress is not perfect.

.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-01-18T16:04:38+09:00

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

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

HTMLを組むこと(マークアップ)には私自身かなり苦労しました。パターンが無限に見えますし、エラーが出ないのでどう改善したらいいかわからなかったのです。１年以上前に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で続きを読む
  • 投稿日：2020-01-18T16:04:38+09:00

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

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

HTMLを組むこと(マークアップ)には私自身かなり苦労しました。パターンが無限に見えますし、エラーが出ないのでどう改善したらいいかわからなかったのです。１年以上前に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で続きを読む
  • 投稿日：2020-01-18T11:40:22+09:00

【Rails】link_toメソッドでaria-haspopup、data-toggleなどのHTML表現を入れる方法

エラー発生

Railsのlinks_toメソッドで下記のようにaria-haspopup、aria-expanded、data-toggleなどのHTML表現を入れようとしたところ、エラーが出た。

<%= link_to root_path, class: 'nav-link', data-toggle: dropdown, aria-haspopup: true, aria-expanded: false, id: header-profile do %>

  <%= image_tag('xxx.jpg', size: '60x60') %>

<% end %>

syntax error, unexpected 〇〇, expecting 〇〇
というエラーが出まくる。
構文エラーなのでどこか書き間違えがあるのかと思ったが、コードを見ても余計な文字や入れ忘れがあるように見えない。

解決方法

調べて見るとlink_toの引数のハッシュとしてつける場合、キーをシングルクオテーションをつける必要がある。例えば、data-toggle: dropdownは'data-toggle': :dropdownという風に書き換える。

<%= link_to root_path, class: 'nav-link', 'data-toggle': :dropdown, 'aria-haspopup': :'true', 'aria-expanded': :'false', 'id': :'header-profile' do %>

  <%= image_tag('xxx.jpg', size: '60x60') %>

<% end %>

参照
https://teratail.com/questions/124849

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

【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
とかのアイコン。

これ２つとも 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 のクラス名が２つあるからです。

なので

例.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で続きを読む

日付別

タグ一覧