今さら聞けないHTML　2020年10月31日

選択した文字列をまとめてHTMLタグで囲む２つの方法

# 前提

自分が使っているエディタは、Visual Studio Codeです。
VSCode以外のエディタに同じ機能があるかは分かりません。

そして、自分はMacを使っているため、下記で用意している画像素材はMacのみになります。

# 概要

自分がHTMLファイルを編集していた時に思ったこと。それは「◯行目から◯行目をまとめて△△タグで囲いたい」です。行に限らず、１行の中の「このテキストだけをタグで囲みたい」という場合にも使えます。

以前は、こんなやり方で要素を囲んでいました。

・ 囲みたい要素の先頭にタグを記述する。
・ 閉じタグをコピーして要素の一番後ろにペースト
![スクリーンショット 2020-10-31 11.17.13.png](https://qiita-image-st

フロントエンドの設計方法「BEM」

この記事はマジで見たほうがいいので共有＆メモ

https://app.codegrid.net/entry/bem-basic-1

【初心者でもわかる】CSSで画像無しで斜線背景を作る方法（2色・3色対応）

# どうも7noteです。CSSだけで斜線背景を作る方法。

背景画像のパーツを`background-repeat: repeat;`を使って斜線背景を作ることができますが、CSSだけでも作る方法があるのでやり方を書いていきます。

**2色**

**3色**

## ソース

“`css
/* 2色 */
.bg_line2 {
background-image: linear-gradient( -45deg, /* 斜線の角度 */
#f3f3f3 25%, /*グレー

CSS Stickyでサイドバーの下端を追従させる

ハマったけどググってもわからず、どうにか自己解決したのでメモ書きを残します。
お忙しい方は一番下だけ見てください。

## 普通に組む

サイドバーを追従させるのに便利なcssの `position: sticky;`
今時のcssであれば、`flex` を使って下記のように実装することが多いかと思います。
(flexを使っていない方のお役には立てません。すみません。がんばってください。)

“`HTML:

…sidebar…

…main contents…

“`

“`css:
.container {
display: flex;
align-items: flex-start;
}

.sidebar {
width: 30%;
position: -webkit-sticky;
position: sticky;
top: 20px;
}

.main {
w

メニューリストのhover時に、下線が出現するアニメーションのCSS記載例

ポートフォリオ用サイトを作る際に、記載したCSS。

“`
.gnav a {
position: relative;
text-decoration: none;
color: #333;
height: 100vh;
padding: 27px 0;
font-weight: bold;
transition: .3s;
}

.gnav a:hover {
opacity: 1;
}

.gnav a:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
content:””;
transition: .3s;
transform: translateX(-50%);
background: #333;
}
.gnav a:hover:after {
width: 100%;
}

*, *:before, *:after {
box-sizing: border-box;
}
“`

トップページ制作の時、画像の扱いで詰まったこと(超初心者)

タイトルの通り。
OSはmacで、rubyとrailsを勉強しているので.html.erbと.scssで書きました。

画像ファイルを読み込もうと思った時

“`erb:home.html.erb
<%= image_tag “Hogehogeホゲホゲ.jpg” %>
“`
↑と記述したら、ブラウザで表示されない！
sprockets::rails::helper::assetnotfound エラー

＜解決した方法＞

“`erb:home.html.erb
<%= image_tag “Hogehogehogehoge.jpg” %>
“`

にすることで表示された。つまり名前をすべてアルファベットにしたら解決した。

背景に画像を使いたいとき

“`scss:custom.scss
background-image: url(../images/hogehoge.jpg);
“`

↑だと表示されず、

＜解決した方法＞

“`scss:custom.scss
background-image: url(hogehoge.jpg);
“`

にすると表示されるよ

select属性にclass名を付与したい

railsでアプリケーション作成中にセレクトボックス関連でつまづいたため記録として残しておきます。

環境は以下のとおりです。
ruby 2.6.5
Ruby on Rails 6.0.3.
##行いたいこと
もともと営業時間のセレクトボックスは実装済み。
24時間営業のボタンを追加＋Javascriptを使ってボタンをクリックしたときに全てのセレクトボックスに’00’が入るようにしたい。(以下写真のイメージ)
<クリック前>
<クリック後>
![95f4366f509951f98ab68ff151686fa3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/c83b2b23-f1e7-3ece-3

よく使うuiパーツ(テキストリンク編)

開発においてよく使うuiパーツを残しておこうと思います。
自分はこんな感じで表現していますという程度なので、もしもっと簡単にできるよとか
こんなデザインあるよとかあれば教えてください。

—

## リンクテキスト
よくあるリンクテキストの例を紹介します。

—

### 1.矢印付きリンク

—


—

“`.html
テキストリンクです。
“`

—

“`.css
.c-link {
display: flex;
align-items: center;
}

.c-link:before {
display: inline-block;
content: “”;
border-top:

[day:12]CSSで三角形と楕円を作る

# CSSで三角形と楕円を作る

## はじめに
ページ作成のタスクの中で、背景として`三角形`と`楕円`を使用することがありました。
普段見慣れている図形でもCSSになると「あれ？どうやって作るんだっけ」となってしまうこともあるかと思います。
今回は一緒にこれらの図形を作っていきましょう！

## 三角形を作ろう
三角形ってよくデザインで見ますが、いざcssで実装となるとどうやって作るのかと考えてしまいますよね。
今回は一緒に三角形をcssで作ってみましょう！
まずは以下のようにhtmlとcssを記述して四角を用意してみましょう。

“`html

三角です

“`

“`css
width: 100px;
height: 100px;
background-color: red
“`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584171/39fe80d2-79a0-dfdf-eb60

Ruby条件分岐処理

#条件分岐処理
##比較演算子(>, >=, <, <=, ==) 比較演算子 使い方 説明 > A > B AはBより大きいか
>= A >= B AはB以上か
< A < B AはBより小さいか <= A <= B AはB以下か == A == B AとBは等しいか ##true, false ```java: # 1は20より小さいか？ irb(main):001:0> 1 < 20 => true

# 5は5以下か？
irb(main):002:0> 5 <= 5 => true

# 1は20より大きいか？
irb(main):003:0> 1 > 20
=> false

# 5は5以上か？
irb(main):004:0> 5 >= 5
=> true

# 2 × 5は10と等しいか？
irb(main):005:0> 2 * 5 == 10
=> true

# 10は20と等しいか？
irb(main):006:0> 10 == 20
=> false
“`
##論理演算子(!)
###式の真偽の確認や、真偽値に対しての演算を行うことができる演算子を論理演算

【初心者向け】HTMLとCSSの書く順番はどうすればいい？

# どうも7noteです。HTMLとCSSはどの順番で書くのか？

初心者あるあるかもしれませんが、HTMLとCSSの書き順はどのように書くのが正しいのか。

## 正しい書き順は？

①HTMLを一通り書いてから、CSSを書く
②HTMLとCSSを上から交互に書く
③必要なCSSを書いてから、HTMLを書く。

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

言うまでもなく①なのですが、では次はどうでしょうか。
○か✕かかんがえてみてください。

## HTMLとCSSの書き方は？

・common.cssやreset.cssなどの必要なcssは予め用意しておく。**（○ or ✕）**
・構造が難しそうなところがあった場合は、めんどくさそうなので飛ばして後で書く。**（○ or ✕）**
・class名や画像名はcssや画像を作成する時に入れる。**（○ or ✕）**

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

### ・common.cssやreset.cssなどの必要なcssは予め用意しておく。
答えは**【○】**。

1ページものを作る場合でも、一般的にはブラウザcssを打ち

リンクを別タブで開く(target=”_blank”)を使うときの注意点

## 概要

`target=”_blank”`のみを使うのはセキュリティとパフォーマンスに悪影響があるため非推奨

##理由
リンク先のページに悪意のあるJavaScriptが仕組まれている場合、
リンク元のページを操作できてしまうから

##対策
`rel=”noopener”` 属性または `rel=”noreferrer”` 属性と併用する
これによってリンク先のページで`window.opener`での参照が不可能になる。

“`NG例.html

“`
“`OK例.html

“`

##参考
[グーグルのデベロッパーサイト](https://web.dev/external-anchors-use-rel-noopener/
)

>原文
・ The other page may run on the same process as your page. If the other

Reactでスケルトンスクリーンを実装してみた

# はじめに

スケルトンスクリーンについて興味を持ったので、軽く実装してみました。
最先端のUIだから難しい？というイメージがありましたが、案外そうでもなかったです。

作ったもの：Web APIからユーザー一覧を表示する画面
完成：https://li8vx.csb.app/


こちらの例はReact+TypeScriptですが、別事例にも十分応用できると思います。

# TL:DR

1. HTML/CSSでスケルトン（？）を用意します。
2. JSでAPIのローディング時にスケルトンを表示する実装を書きます。

# HTML/CSS

ゼロから考えるのは面倒だったので既存コンポーネントを丸パクリしてCSSを解読しようとしました。
結果、思ったより単純でした。

コンポーネントライブラリはあの有

様々なジェネレータのまとめ

webやアプリを作成する場合にボタンやアニメーション、色合いなど様々なことを迷われると思います。
今ではフレームワークがあるのでそこまで考えなくてもそれらを使用すればいい感じのものを作成してくれます。
しかしやはり用意されているものなのでどこか違うんだよなーってのが少なからずあると思います。
ただ作成するのはめんどくさい、どう作ればいいんだろうなど考えてしまいます。
そこでそういう時に役に立つ様々なジェネレータをご紹介したいとお思います。

##グラデーションのジェネレータ
グラデーションの色や角度、位置、透明度まで指定してオリジナルのグラデーションを作成することができます。
また、グラデーションを作りたいけどどんな色合いのグラデーションを作ればいいのかわからない時はグラデーションのギャラリーがあるのでそちらから参考にして作成することもできます。

http://www.ourownthing.co.uk/gradpad.html
![スクリーンショット 2020-10-29 10.21.48.png](https://qiita-image-store.s3.ap-northeas

【備忘録】ページアクセススピードが早くならない場合

#本稿について
PageSpeed Insightsにて計測をしている際、下記のクリティカルチェーンがページ読み込みの遅延になっていると予見される場合の対応をまとめておきます。
（２０２０年10月29日時点）

#htmlファイルにpreloadとcrossoriginを記載
私はこれをすることで読み込みスピードが落ち着きました。
※下記はbootstrapを導入した際に使われるフォントになります。stylesheet読み込む前に記載

参考サイト
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/cro

ControllerとViewの関連性

#ControllerとViewの関連性
##ブラウザに返却されるビューを生成するためのファイルは、app/viewsディレクトリの中に作成する。具体的には、このディレクトリにコントローラー名と同じディレクトリを作成し、その配下にビューファイルを設置する。これにより、コントローラーとビューファイルを関連付けることができ、その関連付けされたビューファイルと「レイアウト」や「部分テンプレート」が組み合わさってブラウザへ表示されるという仕組み
##コントローラーで取得した@tweetsは、Ruby on Railsの裏側で定義される複数のメソッドを経て読み替えられ、Action Viewへ渡される。そして再度ビューファイルのインスタンス変数としてセットされ、初めて使用できるという仕組み
![dd01

【javascript】classList を使って class を操る

# 対象者
– javascript で class を追加したり削除したりなんのしたい方
– そもそも getElementById で null が返ってきて困っている方

動的に class を追加したり削除したりしたい時、
「getElementById とか classList を使うのは何となく覚えているけど、どう書くんだっけ…」
ってことがあったので、パッと見つけられるように簡単に備忘録。

# javascript で class を追加・削除

例として、下記のようなHTMLがあって、
javascript で要素に class を 追加したり削除したりしたいとき、
classList を利用するとそれができる。

“`html:HTML

犬

“`

### classに追加する
“`javascript:javascript
document.getElementById(“dog”).classList.add(“Pomeranian”)
// class=”chiwaw

2020-10-27　学習記録

##やったこと
模写コーディング

##できなかったこと
家の問題に気を取られてしまい、一日中集中できなかったと思う。マルチタスクになっていることに気づけない。

##改善したいこと
睡眠の質が悪くなっていることが原因かと思う。もし低いときは、マルチタスクにならない状況に環境を整えた方が良いかも。

【初心者向け】HTML・CSSのセルフチェック方法のポイント

#どうも7noteです。一通りコーディングが終わった後の最後のチェック方法について

やっとこさコーディングが完了したと思って油断したら、後から**「よく見たらなんか崩れてる」**なんてことも。

そうならないためにも**セルフチェックのスキルはとても重要**です。特に1人で開発している人は自分が見落とせばもう取り返しはつかないので、必須スキルになります。

でも始めたての頃はどのように何をチェックしたらいいのかわからない方も多いと思うので、**初心者の方が抜けやすいポイントを抑えながら、基本的なチェック方法を確認**していきます。

## コーディングのセルフチェック方法

### 〜必須チェック項目！〜

1. デザインと見比べて差異がないか**目視でチェック**。
2. aタグなどの**リンク先**が抜けてたり間違いが

カウントダウン機能の作成

### カウントダウン機能の作成
初期値120秒から1秒ずつカウントダウンする機能の作成。

“`html

COUNT DOWN:

“`

ページを読み込んだときにperformance.nowで変数startTimeにその時点の時間をミリ秒で代入します。
setIntervalメソッドで1秒ごとに関数tickを呼び出します。

“`javascript