What's New Qiita

20201021のHTMLに関する記事は9件です。

  • 投稿日：2020-10-21T23:18:43+09:00

ユーザー認証の導入

ユーザー認証の導入

Basic認証

HTTP通信の規格に備え付けられている、ユーザー認証の仕組みのこと
d5d42271f315066cae86af0e91d3b5cc.png

RailsアプリケーションにBasic認証を導入

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :basic_auth
  (省略)

  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == 'admin' && password == '1111'
    end
  end
end

開発環境の環境変数に、ユーザー名とパスワードを設定

macOSがCatalina以降

ターミナル
% vim ~/.zshrc

# .zshrcを開いたら、「i」とタイプしてインサートモードに移行

# .zshrcの内部に次の記述を追加
export BASIC_AUTH_USER='admin'
export BASIC_AUTH_PASSWORD='2222'
# 記述を追加したら、escキーを押してインサートモードを抜け、 「:wq」と入力して保存して終了する

# .zshrcを再読み込みし、定義した環境変数を有効にする
% source ~/.zshrc

macOSがMojave以前の方

ターミナル
$ vim ~/.bash_profile

# .bash_profileを開いたら、「i」とタイプしてインサートモードに移行

# .bash_profileの内部に次の記述を追加
export BASIC_AUTH_USER='admin'
export BASIC_AUTH_PASSWORD='2222'
# 記述を追加したら、escキーを押してインサートモードを抜け、 「:wq」と入力して保存して終了する

# .bash_profileを再読み込みし、定義した環境変数を有効にする
$ source ~/.bash_profile
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T23:06:31+09:00

Webエンジニアになるにあたっての学習方法

【対象者】

これからWebエンジニアやってみようかなって人

【まえがき】

初めまして、Webエンジニアになって早６年目。
Qiitaは読む専門だったのですが、ありがたいことに１年半ほど前からオンラインスクールの講師をやらせてもらってます。
その中で、「自分もそうだったなぁ」と感じることが多く、自分の今の目の前の方だけではなく
今もどこかで、独学で悩んでいるエンジニアの方の助けになればと思い、記述をしてみようと思った次第です。
これはあくまで私の主観ですので、先輩エンジニアの方やスーパーエンジニアの方は、
またそこら辺のエンジニアがなんか言ってるわ、と見逃すか、暖かい心でコメントください。

【経歴と自己紹介】

本業は、SESでプログラム組んでます。
「エンジニアになりたいけど誰も未経験なんて雇ってくれないわ、よし！一人でやろう」
で、フリーランスで３年実務経験（笑）を積んだ後に、会社員として３年目、現在に至ります。
使用言語は今はPythonでApi作ったり、解析やったりしてます。
元々はPHPでWebサービスばっかり作ってました。
言語にこだわりは持たないタイプ。器用貧乏。Mr.中途半端。

【先に結論（忙しい人向け）】

全部は覚えなくていいんだよ。
正解はないよ、ルールはあるけど。

【本編】

開発は覚えることが多いです

他の方も言われてるかと思いますが、まずは暗記することをやめてください。
もちろん覚えるのであれば覚えてもらっても構わないですが、効率がものすごく悪いです。

HTMLから学習をしはじめたとして、HTMLタグ109個全てを覚える必要はないということです。
ここで誤解しないで欲しいのは、知識としては「こういうタグがあるんだーへー」と何回かは目を通してください。
あとは、自分でサイト制作を数こなしていくうちによく使うタグであったり書き方を確立すべきです。

初めて作る料理をまずは、レシピ通りに作ってそれから繰り返しやっていく中で自分の味付けを確立するのと感覚は似てると思います。

ここで大事なのは、
書き方を覚える必要はないのです。やり方を覚えてください。

HTMLをかくときはまず、

1.HTML宣言が必要
2.必要に応じてmetaタグを書く
3.CSSを読み込む
4.bodyタグの中に書く
5.header main footerで大きく分けて全体を詰めていく。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample</title>
</head>
<body>
    <header>
        <!--ナビゲーションとかロゴとか-->
    </header>

    <main>
        <!--ここにメインの内容を持ってくる-->
        <section>
            <!--必要に応じてSectionなどで小分け-->
        </section>
    </main>

    <footer>
        <!--著作権表示のコピーライトとかサイトリンクとか-->
    </footer>

</body>
</html>

これさえ覚えてればあとは、「このタグどうやって書くんだっけ」となっても自分のやりたいことを調べれば大丈夫です。

HTMLを学習したいのであれば、おすすめはある程度タグの理解が深まった段階で、ダミーサイトもしくはコピーサイトを作成してみることです。
ただ、コピーサイトについてはサイト公開は必ずしないようにしてください。

フロントコーディングで一番難しいのは書き方に正解がないということ。
ただ正解がないからってめちゃくちゃにやっていいというわけではないので
せめてもの基礎的なコーディングルールぐらいは覚えるようにしてください。

  • idは重複NG
  • h1は１ページに一つまで
  • Class名はわかりやすく的確に
  • 鬼のdivコーディングをしない

...etc

料理で例えるなら、
ポテトサラダに玉ねぎ入れる派入れない派（私は入れる派）
焼き鳥はタレ派塩派（私は塩派）

時にはコーディングに関する暗黙のルールの当たり前をぶつけられる時だってあります。
そんなときは、よっぽど変な事じゃなければ、なるべくそれに従うようにしてもらえれば良いのかなと思っています。

そんな衝突をなくすために様々な記法なども存在するので目を通してもらえれば良いと思います。

【PHPとかバックエンド側の場合】

バックエンドプログラミング（ここではPHP）の場合も考え方は同じです。

Progateさんや、ドットインストールさんなどでとりあえず基礎は学んだけど、アプリの作り方がわからないって方多いと思います。
私もそうでしたし、めちゃくちゃ困りました。

TODOアプリを作成する例でご説明していきます。
POST（登録・更新）、GET（検索）、ログイン制御、SQLでのCRUDがあるのでこれできたら正直PHPはできたと言っても過言でh...

プログラム抜きでまずはHTMLと同様に全体を考えて固めます。

今回必要な機能（最低限）

  • 予定、開始日時、終了日時を入力・登録できる。
  • 登録したら予定が一覧で確認できる。

大枠を細分化と流れを構築する

ここは若干、経験が入ってきますが気合で慣れてください。

  • 予定、開始日時、終了日時を入力・登録できる

    • 1. 予定、開始日時、終了日時を入力できるようにHTMLを組む
    • 2. ボタンを押されたら、送信された内容を受け取る
    • 3. 受け取った値がプログラムが欲しい値か検証する
    • 4. 問題なければ、DBに登録する
    • 5. 結果を返す（成功・失敗）

  • 登録したら予定が一覧で確認できる。

    • 1. 登録された内容を表示するためのHTMLを組む
    • 2. 登録されているデータをDBから取得する
    • 3. 取得した結果を表示する
<?php


// 毎回POSTがあるか確認するのが面倒なので処理をまとめておきます。
function post($key) {
    // 指定した値を受け取れなかった時
    if (empty($_POST[$key])) {
        //NULLを返却してエラーを回避
        return NULL;
    }

    //ユーザから受け取った値をサニタイズ化して返却
    return htmlspecialchars($_POST[$key]);
}

// 毎回設定書くのはめんどくさいので接続処理はまとめときます。
function pdo() {

    // DB接続設定
    $dbh = "mysql:host=localhost;dbname=todo;charset=utf8";
    $user = "hoge";
    $pass = "hoge";

    $pdo = new PDO($dbh,$user,$pass);

    return $pdo;
}

// データ登録処理
function insert($data) {
    try {

        // 設定の呼び出し
        $pdo = pdo();

        // ダメだったらエラー
        if ( ! $pdo) {
            throw new Exception("DB接続エラー");
        }

        // SQLの処理を書く
        $sql = <<<QUERY
INSERT INTO
todo(
start_at,
end_at,
schedule,
) VALUES(
:start_at,
:end_at,
:schedule
)
QUERY;

        // SQLの準備
        $stmt = $pdo -> prepare($sql);

        // プリペアードステートメントを使用してプレースホルダーと実際の値の紐付け
        foreach($data as $key => $val) {
            $stmt -> bindValue($key,$val,PDO::PARAM_STR);
        }

        // SQL実行
        $result = $stmt -> execute();

        // データ登録失敗（ここは書いても書かなくても好みだと思います。）
        if ( ! $result) {
            throw new Exception("データ登録失敗");
        }

        // 値の返却
        return $result;

    } catch (PDOException $e) {
        exit($e -> getMessage());
    }

}

// 値のあるなし検証
function check_val($val) {
    if (empty($val)) {
        return FALSE;
    } 

    return TRUE;
}

/* ==========ここからTODOのデータ追加処理========== */

// 値の受け取り

// キーを:つきにしているのは、bindValueで紐付けを楽にするため。
$data = array(
    ":start_at" => post("start_at"),
    ":end_at"   => post("end_at"),
    ":schedule" => post("schedule")    
);

// 全部必須項目にするとして値があるかどうかは検証しておく。 
foreach ($data as $val) {
    //　値がなければ入力メッセージを作る
    if ( ! check_val($val)) {
        $error = "値を入力してください。";
        break;
    }
}

// errorがあればデータを追加せずにエラーを表示
if ( ! empty($error)) {
    echo $error;
    exit();
}


$result = insert($data);

echo "値を追加しました。";
exit;

細かいところは省きましたがおおよそこんな感じです。
あとはそれぞれの書き方を調べながら組んでいけばOKです。
MVCも使わずにユーザ定義関数だけでまとめてるので、読みやすいかと思います。

小さく作って大きく育てる

そんな意識を持ってもらえればきっと知らず知らずのうちにプログラムの流れを掴めるようになると思います。

さいごに

プログラミングの世界って明確な答えが最初はなくて難しいと思います。
たどり着きたいゴールはみんな同じでもやり方は十人十色
基礎ある程度やったよって人はまずはミニマムアプリケーションを作成してみると良いかと思います。
これからは、HTML ~ PHPまでこれやっとけみたいなやつ書くようにしていきます。

この投稿がいつか誰かの気持ちを軽くできることを願っています。
最後まで、読んでいただきありがとうございました！

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

【HTML】セレクトボックスを使ってみた

プログラミング勉強日記

2020年10月21日
今までHTMLを勉強してきたが、セレクトボックスを使ったことがなかったので使い方をまとめる。

セレクトボックスの基本的な書き方

　select要素でセレクトボックスを作成することができる。メニューの選択肢はselect要素内に配置するoption要素で作成する。
　select要素はname属性には部品の名前を指定し、size属性で表示行数を指定する(初期値は1)、multiple属性は複数選択を可能にする。
　option要素はvalue属性には送信される文字列を指定し、label属性は選択肢として表示されるテキストを指定し、selected属性では選択された状態を指定する。

　基本的な書き方は以下のようになる。

html
<select name="example">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2">サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

実行結果(矢印をクリックするとサンプル2とサンプル3が出る)
image.png

特定の選択肢を選択済みにするサンプルコード

　option要素にselected属性を指定する。

html
<select name="example">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2"  selected>サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

実行結果(サンプル2がすでに選択されていて、クリックすると3つ表示される)
image.png

リスト形式で表示させるサンプルコード

　select要素にsize属性を指定する。

html
<select name="example" size="3">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2">サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

実行結果(以下のようにリストになる)
image.png

参考文献

HTMLでのselectedによる初期値の設定方法を現役エンジニアが解説【初心者向け】
セレクトボックスを作る

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

【作ってみた】CSSだけで、右から左に流れる文字。簡単作成ツールも紹介！

どうも7noteです。CSSで流れる文字の作り方。

きれいな液晶パネルが増えてきたので、電光掲示板のようなものは少し減ってきたのかな？と思いますが、電光掲示板にあるような右から左に流れる文字をCSSで再現する方法です。

こんなやつ

sample.gif

ソース

index.html
<div class="text">
<p>次は〜〇〇駅 次は〜〇〇駅 開く扉にご注意ください。</p>
</div>
style.css
.text {
  width : 300px;      /* 枠の大きさ */
  border: solid 1px; /* 枠線 */
  padding: 3px;        /* 枠線の内側の余白 */
  overflow : hidden; /* 枠からはみ出た部分を非表示 */
}
.text p{
  display : inline-block;  /* 必須 */
  padding-left: 100%;    /* 右端から文字をスタートさせるため */
  white-space : nowrap; /* 改行が起こらないように対策 */
  line-height : 1em;         /* 行間（高さ）を1文字分にする */
  animation : scroll 10s linear infinite; /* 下のアニメーションを10秒かけて行い、それをくりかえす */
}

/* アニメーション（右から左に移動） */
@keyframes scroll{
  0% { 
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}

解説

以前作った「理容室の前にある赤と青のくるくるを作ってみた」と似たような処理をしています。

横に流すp要素の横幅が、「文字分 ＋ 幅100%」あるため、文章の左端から右端まですべて流れてから繰り返すようになっています。幅がこれより短いと、流れている途中でスタートに戻ってしまうので、最低でもこれだけの幅が必要になります。

あとはdiv要素の方に自由に装飾を入れたり、文字を電光掲示板風のフォント（あるか知らないですが。。。）に変えたりすることで本格的なものも作れるかもしれませんね。

自作しなくても、簡単に作成できるツールがある

こちらのサイトで簡単に作成できるようです。
https://webparts.cman.jp/string/scroll/

おそまつ！

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

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

【ブルゾン風】WPの投稿記事をhtmlファイルで回してみたくない？

やりたいこと

WordPressのブログの記事情報を外部サイトにも反映・表示させたい！
だがしかし、、拡張子がhtmlのファイルにそんなことができるの？？

思い悩むこと12時間............
なんとかやり口を見つけ解決まで導き出せました！

今回やりたいことをまとめると
・WordPressの投稿情報を外部サイトでも使いたい
・htmlファイルでphpを使いたい

環境

【サーバー】　　　Xserver
【サーバー番号】　2001（sv2001）以降

WordPressの投稿情報を外部サイトでも使う方法

ステップは2つです。
・WP管理外でも機能を使えるようにする
・投稿記事を表示する

WP管理外でも機能を使えるようにする

下記記述を対象のhtmlファイルの一番上にコピペしましょう。

include($_SERVER['DOCUMENT_ROOT']."/wp/wp-load.php");

もしくは

include($_SERVER['DOCUMENT_ROOT']."/wp/wp-blog-header.php");

どちらも同じ結果が返るので、どちらでも良いでしょう。
$_SERVER['DOCUMENT_ROOT'] とはルートのことで、それ以下のディレクトリは各々でWPファイルを記述してください。

私は上の記述でうまくいかなかったので、下の記述でやるとうまくいきました！

投稿記事を表示する

よーーし！
あとは表示だけだーー！！
WPのループを回して情報を表示させよう！

<?php if(have_posts()): while(have_posts()):the_post(); ?>

  <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>

  <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>

<?php endwhile;endif; ?>

これで完成だー！！ってあれれぇぇ........（コナンくんみたいな声が漏れた）
何故だかうまく情報を取得できません。

<?php
  $args = array( 'posts_per_page' => 3, 'order'=> 'DESC', 'orderby' => 'date' );
  $posts = get_posts($args);

  foreach ($posts as $post) :
?>
  <p><a href="<?php the_permalink(); ?>"><?php echo $post->post_title; ?></a></p>
  <p><?php echo mysql2date( 'Y/m/d', $post->post_date ) ?></p>

<?php endforeach; ?>

foreach文を使うとうまくいきました！！

htmlファイル内でphpを使う方法

.htaccessファイルに記述をしていきます。
サーバーによって記述方法が異なるので様々ですが、
ここでは一般的な記述方法とエックスサーバー利用時の記述方法を掲載しています。

一般的な記述

AddType application/x-httpd-php .php .phtml
AddType application/x-httpd-php .php .phtml .html

両方記述しているパターンが多いですが、どちらか１つでも行けると思います。

エックスサーバーの記述

エックスサーバーの中でも設定方法が2種類あります。
サーバー番号が2001（sv2001）以降の場合

AddHandler fcgid-script .html

私はこれで動きました。
サーバー番号が1999（sv1999）以前の場合

AddHandler x-httpd-php5.6 .php .phps .html

エックスサーバーのサーバー番号は、お知らせメールからわかるそうです。
チェックしておきましょう。

以上です！

参考記事

https://macoblog.com/wp-gaibu-kijiroop/
https://princessvision.com/html_php_work/
https://wp.turbo-w.com/wordpress_news_topics_1.html

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

RailsにBootstrapを導入!!

RailsにBootstrapを導入する方法を説明致します。
手順は、とても簡単ですのでご参考にどうぞ！！
手順は、４つあります。

手順

1.Bootstrapのインストール
2.SCSSファイルの作成
3.JSファイルの修正
4.Rails（Puma）の再起動

1.Bootstrapをgemでインストール

RailsでBootstrapを使う場合は、gemを使ってインストールする方法が一般的です。
Bootstrapは内部でjQueryを利用しているので、こちらもあわせてインストールしましょう。
Gemfileに以下を追記して、bundle installを実行してみてください。

Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
ターミナル
% bundle install

2. SCSSファイルを作成

次に、application.cssをapplication.scssというファイル名に変更します。
これは、Bootstrapが「SCSS」という記法で書かれており、Railsでもあわせて利用するためです。
「SCSS」とは、CSSを拡張した記法のことで、いまのWeb業界では多く利用されている記法になります。
ここでは具体的な解説はしませんが、CSSの記述よりも見やすく、書きやすくなった記法だと思ってください。

ファイルの拡張子を変更
 変更前 app/assets/stylesheets/application.css 
 変更後 app/assets/stylesheets/application.scss

ファイル名を変更したら、実際にファイルを開いて下さい。
＊= require_tree .と＊= require_selfを削除し、
@import "bootstrap";を追記します。
追記したコードが、Bootstrapを読み込むための設定になります。

app/assets/stylesheets/application.scss
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .    ＜（削除）
 *= require_self      ＜（削除）
 */
@import "bootstrap";  ＜（追加）

3. JSファイルを修正

Bootstrapで使われる「JavaScript」や「jQuery」などの関連ファイルを読み込む設定をします。
app/assets/javascripts/application.jsを開き、以下を参考に元々あったコードの上に追記してください。

app/assets/javascripts/application.js
# 以下の３つを追記
//= require jquery3
//= require popper
//= require bootstrap

# 元々あったコード
//= require rails-ujs
//= require activestorage
//= require turbolinks

4. Rails（Puma）を再起動

ここで一度、ブラウザからアクセスしてみてください。
もし、この段階でエラーが表示されているのであれば、Rails（Puma）を再起動します。
それでもエラーが変わらない場合は、「node.js」のバージョンが古い可能性があります。
DockerでRailsを構築した方は、Dockerfileが以下のような設定になっているかを確認してください。

Dockerfile
# Railsに必要なパッケージをインストール
RUN apt-get update -qq && apt-get install -y nodejs
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
    && apt-get install -y nodejs

# 以下の公式サイトの記述では、node.jsのバージョンが低くてbootstrapが使えない
# RUN apt-get update -qq && apt-get install -y nodejs

まとめ

導入手順は難しいと思うかもしれませんが、この説明した手順の通りに記述を削除したり、
書き換えたりするだけですので意外と簡単です。
是非試してみて下さい！！

以上。

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

【HTML/CSS基礎】インライン要素とブロック要素/widthとheight　

まずインライン要素とブロック要素と聞いて何を思い浮かべます？

僕>>width/heightが決めれたり、
横いっぱい伸びたり、隣に並んでくれたりする要素？値？でしょ！

びっくりするくらいざっくりとでしか覚えてません。。
その都度、ネットで調べて適宜対応しています。

しかし！！！

もう頭の中に入れて、調べたくない、、、
調べる時間がもったいない、、、
そんな気がするので、備忘録として残します。

アウトプットまでがインプット！！！

目次

①インライン要素とブロック要素

  • ①-1 それぞれの値の特徴
  • ①-2 細かいところ

②widthとheight

  • ②-1 width/height: auto;
  • ②-2 auto と 100%の違い

③width指定ではみ出る

  • ③-1h widthではみ出るの回避

④番外編　画面縮小時に、flexboxで指定した要素が縮小しないのを解決

①-1 それぞれの値の特徴

1) block
- p, div, ul, h1~h6タグの初期値
- 要素が横いっぱいにまで広がり、縦に並んでく(前後に改行)
- 高さ・幅・余白指定　可能！
- text-align/vertical-align　不可能！

2) inline
- a, span, imgの初期値
- 要素が横に並んでいく
- 幅・高さは文字の大きさで決まる
- 上下のmarginは指定できない
- text-align(親要素)/vertical-align　可能！
**リンクタグの幅を指定したいときは、
inline-block要素 か block要素を指定してあげる

3) inline-block
- displayで指定！！
- 横に並びつつ、少し距離をとる
- 高さ・幅・余白指定　可能！
- text-align(親要素)/vertical-align　可能！

4) none
→無視！！

①-2 細かいところ
  • inline要素の中にblock要素は入ることはない
②-1 width/height: auto;
  • block要素の場合　 →何もしないと、横いっぱいに広がる
  • inline/inline-block要素の場合 →要素の幅＝要素の中身（テキスト） 100%で指定することで、横いっぱいに広がる。
②-2 auto と 100%の違い

  • autoの場合
    → widthの中にpadding/border　
    　が含まれる

  • 100%の場合
    → widthの中にpadding/border
    　が含まれない
    　余白をつけた分だけ、親要素からはみ出でしまう

③-1h widthではみ出るの回避
  • 入れ子にする →外側の要素を100%にしてあげて包む
  • calc()関数を使う →maring: 0; border: 2px; padding: 2px;の場合 左右のはみ出し合計は8px なので、その分を引いてあげる width: calc(100% - 8px）；
  • box-sizingを利用 →box-sizing: border-box;を指定することで、 padding/borderまでwidthの指定範囲が広がる。

④番外編　画面縮小時に、flexboxで指定した要素が縮小しないのを解決

  • widht/heightを指定してあげる。

長文・乱文失礼します?‍♂️

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

BEM(Block Element Modifier)とは

HTMLのクラス名を好き勝手書いてしまうと、共同での開発で修正しづらいという問題が起きてしまいます。

そこで、後から改修しやすい設計にする手法の一つであるBEMについて解説していきます。

BEMとは

Block, Element, Modifierの頭文字をとってBEMという名前になっています。

BEMの書き方

Block, Elementはアンダースコア二つでつなぎます。
Element, Modifierはハイフン二つでつなぎます。

例:

qiita.css
/*Block*/
.list

/*Block, Element*/
.list__item

/*Block, Element, Modifier*/
.list__item--second

...少し慣れは必要そうです！

Block, Element, Modifierの違いについて

Block: ナビゲーションだとフォームなどの部品やヘッダー、フッターなどの大きなセクションのこと

Element: その部品を構成するための中身のこと

Modifier: 同じブロックではあるけれど、他とは状態や見た目が異なる場合に用いる。（例えば、クリックできるボタン、クリックできないボタンで他と異なるクラス名をつけるような時、Modifierを記述する。）

BEMのルール

Modifierがあるクラス名とないクラス名は両方記述します。
→CSSの記述が長くなり、修正しづらくなることを防ぐため。

単語はハイフン一つをつなげて記述します。(size-bigなど)

Sassを使うと便利！

無駄な記述を無くすことができます。

qiita.sass
.block {
 &__element {
  &--modifier {

  }
 }
 &__element-2 {
  &--modifier {

  }
 }
}

最後に

ルールを定めることで誰が見てもわかりやすくなることは、パフォーマンスの向上にもつながり大変便利だと感じました。
今後、意識していきたいと思っています。

最後まで記事を読んでいただきありがとうございます。今後もフロントエンドをメインにアウトプットをしていきたいと思っているのでよろしくお願い致します。

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

リンクを押したときに青から紫ではなく、別の色に変える方法

はじめに

結論：疑似クラスで解決できる

疑似クラスとは

疑似クラスとは、指定の要素が特定の状態である場合にスタイルを適用させるセレクタ。
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！

解決方法

リンクの状態によって解決方法は2種類。

  • 既にリンク先に訪問したことがある状態　⇒　:visited疑似クラス
  • リンク上にフォーカスがある状態　　　　⇒　:focus疑似クラス 
既にリンク先に訪問したことがある状態
a:visited {
  color: red;
}

リンク上にフォーカスがある状態
a:focus {
   color: yellow;
}

※「visited」⇒「focus」の順番で指定しないと、「focus」が効きません。

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

日付別

タグ一覧