投稿日：2021-01-06T23:12:34+09:00

【フロントエンド学習③】CSSの詳細度について

詳細度とは？

ざっくり説明すると「CSSが適用される優先度」の順序のこと。
詳細度が高い方が優先してCSSが適用される。

そもそもCSSが適用される順序って？

あるセレクタを同じ方法で指定した場合、CSSは後に書いたものが優先されます。

異なる方法で指定した場合、詳細度が高い方が優先されます。

もうちょい詳しく

ここで言う「詳細度が高い」とは

より詳しくセレクタを指定している = 詳細度が高い
言い換えると「より絞ってセレクタを指定している」ほうが詳細度が高い、ということになる。

よくわからないんだけど？

単一の指定方法の場合だと、

HTMLタグに「style属性」を用いて記述されたスタイル(てすと3の部分)

idを指定して記述されたスタイル(てすと2の部分)

classを指定して記述されたスタイル(てすと1の部分)

HTMLタグ名を指定して記述されたスタイル(てすと0の部分)

親要素を指定して記述されたスタイル(てすとの部分)

番号の小さい方が詳細度が高くなり、優先的に適用されます。

デモ

See the Pen BaLrwVg by 転職活動中のなーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.

複数の方法で指定した場合はどうなる？

結論としては、指定に使われているidやclass等が多い方が詳細度が高い となります。

具体的には、

idを使って指定されているスタイル

classをより多く使って指定されているスタイル

idやclassが同じ数だった場合、より多くセレクタで指定されているスタイル

こちらも番号の小さい方が詳細度が高くなります。

デモ

See the Pen RwGMjOr by 転職活動中のなーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.

上記の1~3が全て同じだった場合、後に書かれたスタイルが適用されます。

例外
style.css
p {
  color: red; !important
}
p {
  color: blue;
}
上記の例では、通常pタグの内容は青色になるはずですが、
「!important」をつけることで強制的に最優先に適用することができます。

ただし、多用すると何が最優先なのかわからなくなる恐れがあるので、
使用するのは非推奨となっているようです。

おわり

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-06T21:32:15+09:00

smallタグの正しい使い道を考える

どうも7noteです。HTMLには様々なタグがありますが、そのなかでsmallタグの使い道について考察します。

そして独自で出した結論としては・・・

「正直、コピーライトでしか使わないと思う。」

これが私なりの結論です。
文字サイズを小さくしたい時には絶対に利用しない。

smallタグの説明文

『<small> …… 免責・警告・著作権などの注釈や細目を表す』
引用元：HTML5タグリファレンス（http://www.htmq.com/html5/small.shtml）

またこのようにも書いています。

『<small>はメインコンテンツではなく、あくまで注釈や細目などの短いテキストに使用する要素です。
<small>を複数の段落、複数のリスト、複数のセクションなどの長いテキストに対して使用するべきではありません。』
引用元：HTML5タグリファレンス（http://www.htmq.com/html5/small.shtml）

ほかのサイトではこのように説明されています。

『HTML の <small> 要素は、表示上のスタイルとは関係なく、著作権表示や法的表記のような、注釈や小さく表示される文を表します。』
引用元：MDN Web Docs（https://developer.mozilla.org/ja/docs/Web/HTML/Element/small）

smallタグの使い道

一般的に一番使われている箇所はコピーライトではないかと思います。
逆にコピーライト以外でsmallタグを見かけることがほぼありません。
index.html
<small>© 2011 hogehoge Inc.</small>
※コピーライトの書き方についてはコチラ

とはいえqiitaやmdnのサイトを見ると別に<small>タグを使っていません。
つまりは使わなくてもなんの問題もないと思って大丈夫でしょう。

一応紹介されている使い方としては、文章の注釈としていれる使い方も間違いではなさそうです。
index.html
<p>なんと、おにぎりの具の量3倍！！！<sup>※</sup></p>
<small>※自社比較</small>
さらっと<sup>を使っていますが、sup要素は上付き文字に使います。
http://www.htmq.com/html5/sup.shtml

このように文中で入れる注釈は<sup>等が使われるので、その注釈の内容を表すのに<small>が使えなくもない・・・

でも結局<div>や<p>で書いてもなんの問題もない。

結局は、smallタグを使うメリットがないのが痛いところですね。
正しいタグを使う方がSEO的には正しいのかもしれませんが、おそらくタグじゃなくdivやpで書かれていたとしても何も影響はないと思います。

まとめ

ほんとに使いどころのない要素なのかも。

<span>を2重にしたくないからかわりに<small>を使うのは使い方的には間違っていますし、<small>タグの代わりにpやdivでも問題ないのなら好きな方を使えばいいかなと思います。
私はいろいろなタグを使ってる方が識別しやすいので、コピーライトだけは<small>を使おうかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-06T20:12:54+09:00

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(3)子コンポーネントにデータを渡す

「基本的なAngularアプリをはじめる」をやってみる(3)

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(準備)

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(1)

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(2)

Angular のチュートリアルをやってみています。

子コンポーネントにデータを渡す

Angular公式ページ：子コンポーネントにデータを渡す

このセクションでは、親コンポーネントである ProductListComponent からデータを受け取ることができる子コンポーネント ProductAlertsComponent を作成する方法を説明します。

1.Angular Generator を使って product-alerts という名前の新しいコンポーネントを生成

チュートリアルの指示の通り product-alerts コンポーネントを生成します。
すると、自動的に以下の3つのファイルが作成されます。

product-alerts.component.ts
product-alerts.component.html
product-alerts.component.css

2.まず @angular/core から Input をインポート
product-alerts.component.ts
import { Input } from '@angular/core';
product-alerts.component.ts に、上記のように Input をインポートするための記述を追加します。

3.product という名前のプロパティに @Input() デコレーターを付けて定義
product-alerts.component.ts
export class ProductAlertsComponent implements OnInit {
  @Input() product;
  constructor() { }

  ngOnInit() {
  }

}
上記のように @Input() product; という記述を追加します。

この @Input() デコレーターは、プロパティの値がコンポーネントの親である ProductListComponent から渡されることを示します。

4.product-alerts.component.html に button タグを記述
product-alerts.component.html
<p *ngIf="product.price > 700">
  <button>Notify Me</button>
</p>
product-alerts.component.html を開き、デフォルトに書かれているものを、上記のように書き換えます。

5.product-list.component.html にセレクターを追加

ProductListComponent の子として ProductAlertsComponent を表示するには、product-list.component.html にセレクターを追加します。
product-list.component.html
<button (click)="share()">
  Shareボタン
</button>

<app-product-alerts
  [product]="product">
</app-product-alerts>
（プロパティバインディングなるものを使用しています。この [] の使い方のことですね。）

ここまでやりますと、下図のように Notify Me というボタンが表示されるようになります。

この時点では、まだ Notify Me をクリックしても何も起きません。

次の記事： [Angular] 「基本的なAngularアプリをはじめる」をやってみる(4)親コンポーネントにデータを渡す

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-06T12:52:04+09:00

【5分で読める】Webエンジニアを目指すのに最低限知っておきたい単語集【超基礎】

私について

2020年4月より某プログラミングスクールに通い、卒業後フロントエンジニアとして働いている20代です。

この記事は、自分がスクールに通い得たもの・思った事を中心に「独学でweb系エンジニアを目指す方の手助けになれば」と思い作成しております。

はじめに

この記事では、webエンジニアを目指す時に知っておきたい単語集ということで様々な単語をまとめております。
実際に、私も未経験からエンジニアを目指し学習を始めたものの、知らない単語に囲まれ少し心が折れかけたこともあるので同じような方の問題解決ができればなぁと思います。

また、初学者の方に伝わりやすいよう、かなり噛み砕いておりますので当記事にて100%理解できるとは思わないように！
あくまで、雰囲気掴みとして読んでみてください！☺️

［エンジニア編］

バックエンドエンジニア

→アプリケーションの中身の部分（機能）を作る人。例:Twitterの会員登録機能、いいね機能、ブックマーク機能

フロントエンドエンジニア

→HP等のUI/UX（ボタンの位置等見た目）を作り上げるエンジニア。デザイナーさんから言われたものを作り上げる。

webデザイナー

→HP等の色とかボタンの位置、デザインを考える人

［プログラミング言語編］

※横にあるのは難易度だよ。★が多いほど難しいよ✌?

HTML ★☆☆☆☆

→これがweb系エンジニアの基礎と言っても過言ではないと思う。HPの『仕組みを作る』言語。例えば、この文字は大きくして、この位置に写真を配置してという感じ。

CSS ★★☆☆☆

→よく「HTML&CSS」って感じで一緒にされることが多い言語。これはHTMLで作り上げたものを『装飾する』言語。装飾ってのは、例えば色をつけたりするもの。ボタンの色は赤で〜、お問合せフォームの色は緑で〜とかとか。デザインの言語とも言えるかも！

JavaScript ★★★★☆

→HPの『動きをつける』言語。動きってのは、ローディング画面とか、ボタンを押したらふわっと横に移動したりとか、よく『アニメーション』とも言われるもの。

Vue.js ★★★☆☆

→『JavaScriptのフレームワーク』。
フレームワークってのは、簡単に言うとその言語を強化する役割のもの。よく使われるアニメーションは簡単に出せるようになってたり、JavaScriptだけじゃめんどくさい仕組みを簡単に作れるようになってたりする感じ。

Ruby ★★★☆☆

→バックエンドエンジニア（アプリの仕組み作ったりするエンジニア）を目指すなら一番おすすめの言語。日本人が作った言語ってこともあってすごくわかりやすく、学習しやすく、参考記事も多い！（自分もここから始めた）

Ruby on Rails ★★★★☆

→Rubyのフレームワーク。同じ感じでRubyを強化するものという感じかな。

［職種］

web系

→いわゆるwebを作成する時に使用する言語を主とするエンジニア。htmlcss、JavaScript等

sler

→ 設計、開発、運用・保守・管理までを一括請負する情報通信企業です。まぁ全てを請け負う企業ですね。

客先常駐

→エンジニアの力を必要としている企業に行き、業務を行うこと。

[番外編]どれがいいとかいうあの不毛な議論

→よく目にするのは「web系はキラキラで楽しそう！」とか「客先駐在はブラック！」とかありますが、結論自分のやりたいことを叶えられるなら客先駐在でもいいと思います。そのような記事はあくまで参考する程度にしましょう。（そもそもネットに「この職場よかったわ〜！！」とか書く人あんまりいないですしね。）

おわりに

【超基礎】ということで本当に最低限の単語を説明させていただきました。
初学者のためになればなぁと思います！?

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-06T09:48:16+09:00

[Gem不要！！HTML&CSSのみ]初心者が簡単にドロップダウンメニューを作成する方法

はじめに

ハンバーガーメニューやドロップダウンメニューの作成をしたいけど、Gem導入の方法がよくわからない・JavaScriptは思うようにいかない。
そんな初心者の方におすすめの記事なっております。

開発環境

・Rails6.0.0
・MySQL5.6.50

ドロップダウンメニューの実装

早速ドロップダウンメニューの実装の方法の流れを解説します。
ちなみにドロップダウンメニューとは以下のようなメニューのことです。

「...」を押すとメニューが表示されるものです。

よく見かけますが、JavaScriptでやるには面倒だし、Bootstrap導入のためにGemやjQueryを導入したりするのは初心者には中々ハードルが高めかなと思います。

それでは解説していきます。

1)application.html.erbで初期設定

まず app/views/layouts/application.html.erbでBootstrapなど必要なものを読み込みます。

以下は僕がドロップダウンメニューを作成した際に使用したHTMLコードです。
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>PlansApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

    # ここでbootstrapを読み込んでいます
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>
    <%= yield %>
　　# 以下の3行のscriptタグを追記しHTMLで使用できるようにしています
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
初期設定はこれで終了です。

2)HTMLを書く

初期設定ができたら、早速ドロップダウンメニューのHTMLを記述していきます。
具体的には公式を見てもらってアレンジしてもらうのがベストですが、参考にした記事のものと、僕が作成したものを紹介しておきます。
参考記事の例
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
僕の場合だとlistタグがあるためレイアウトが崩れるなどの問題がありました。
そこで以下のようにアレンジいました。
アレンジ例
<a class="nav-link" href="#" id="navbarDropdown" role="button" datatoggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <i class="fas fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
   <a class="dropdown-item" href="#">コメント履歴</a>
   <div class="dropdown-divider"></div>
   <a class="dropdown-item" href="#">フォローしているユーザー</a>
   <div class="dropdown-divider"></div>
  <%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "dropdown-item" %>
</div>
僕の場合はfontAwesomeでアイコンなどを使用したり、開発中のアプリのためパス指定があるところ・無いところがまばらですが、こんな感じでアレンジしました。

公式ドキュメント

3)CSSの適用させる

ここまでくれば、後はお好みでCSSを記述していくだけです。
参考までに以下に参考記事の記述例を紹介しておきます。

参考記事のHTML7行目の以下のクラスに適用させていきます。
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
なぜ、このクラスに適用させるのかの詳しい解説は参考記事をご覧いただけるとわかりやすいので、ぜひ見てみてください。

【初心者】ハンバーガーメニューの詳細表示後のバーを装飾してみた
参考記事の例
@media screen and (max-width: 992px) {
.collapse.navbar-collapse{
    padding: 10%;
    border-radius: 10px 10px 10px 10px;
    background: linear-gradient(white, #cccccc) !important;
    margin: 15%;
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 992px) {
  // スマホ用
  .collapsing.navbar-collapse{
    padding: 10%;
    border-radius: 10px 10px 10px 10px;
    background: linear-gradient(white, #cccccc) !important;
    margin: 15%;
    font-size: 1.7rem;

  }
}
以上でドロップダウンメニューの実装は終了です。
これを期に、UI/UXのスキルの一部を見に付けてみてはいかがでしょうか。

参考文献

公式ドキュメント

【初心者】ハンバーガーメニューの詳細表示後のバーを装飾してみた

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-06T07:58:29+09:00

スタイル関連　チートシート

flexを使ってdivタグを並べることが多いのでけれど左右・中央寄せについてよく忘れるので、
まとめました。

See the Pen PoGexLP by thithi7110 (@thithi7110) on CodePen.

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-06T07:58:29+09:00

flexを使ってコンテンツを並べる

flexを使ってコンテンツを並べる方法

flexを使ってdivタグを並べることが多いのでけれど左右・中央寄せについてよく忘れるので、
まとめました。

flexの指定

display:flex;

フレックスアイテム(子ども）の並べる方向

※スタイルはフレックスコンテナ（親）に記述

フレックスアイテム(子ども）の位置

※スタイルはフレックスコンテナ（親）に記述
display:flex;
flex-direction:row ※省略可

中央:center　左：flex-start　右：flex-end　上：flex-start 下：flex-end
（※なお、flex-direction:rowの場合。flex-direction:columnの場合変わってくるので注意）

See the Pen PoGexLP by thithi7110 (@thithi7110) on CodePen.

　 Tweet
Qiitaで続きを読む

20210106のHTMLに関する記事は7件です。

【フロントエンド学習③】CSSの詳細度について

詳細度とは？

そもそもCSSが適用される順序って？

もうちょい詳しく

ここで言う「詳細度が高い」とは

よくわからないんだけど？

複数の方法で指定した場合はどうなる？

例外

smallタグの正しい使い道を考える

どうも7noteです。HTMLには様々なタグがありますが、そのなかでsmallタグの使い道について考察します。

smallタグの説明文

smallタグの使い道

でも結局<div>や<p>で書いてもなんの問題もない。

まとめ

おそまつ！

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(3)子コンポーネントにデータを渡す

「基本的なAngularアプリをはじめる」をやってみる(3)

子コンポーネントにデータを渡す

1.Angular Generator を使って product-alerts という名前の新しいコンポーネントを生成

2.まず @angular/core から Input をインポート

3.product という名前のプロパティに @Input() デコレーターを付けて定義

4.product-alerts.component.html に button タグを記述

5.product-list.component.html にセレクター を追加

【5分で読める】Webエンジニアを目指すのに最低限知っておきたい単語集【超基礎】

私について

はじめに

［エンジニア編］

バックエンドエンジニア

フロントエンドエンジニア

webデザイナー

［プログラミング言語編］

HTML ★☆☆☆☆

CSS ★★☆☆☆

JavaScript ★★★★☆

Vue.js ★★★☆☆

Ruby ★★★☆☆

Ruby on Rails ★★★★☆

［職種］

web系

sler

客先常駐

[番外編]どれがいいとかいうあの不毛な議論

おわりに

[Gem不要！！HTML&CSSのみ]初心者が簡単にドロップダウンメニューを作成する方法

はじめに

開発環境

ドロップダウンメニューの実装

1)application.html.erbで初期設定

2)HTMLを書く

3)CSSの適用させる

参考文献

スタイル関連 チートシート

flexを使ってコンテンツを並べる

flexを使ってコンテンツを並べる方法

flexの指定

フレックスアイテム(子ども）の並べる方向

フレックスアイテム(子ども）の位置

日付別

タグ一覧

でも結局`<div>`や`<p>`で書いてもなんの問題もない。

5.product-list.component.html にセレクターを追加

スタイル関連　チートシート