Railsのtext_fieldにCSSをあてる方法
## text_fieldにCSSってどうやってあてるんだっけ？
Railsアプリケーション作成時にフロント部分を作成していた時に
“`ruby:example.haml.html
.item__name
商品名
.name–input
= f.text_field :name, placeholder: “40文字まで”
“`
のようなhamlを作成していざscssを記述しようとしたときに
この`text_filed`にどうやってCSSをあてるのかが
ふと考えると分からなかったんです。
同じような`number_field`や`submit`などにも使えるやり方なので
是非覚えておいたほうがよいです。
##そもそも`text_field`で作られるHTMLは何なのか？
上の`= f.text_field :name, placeholder: “40文字まで”`で作られるHTMLを
chromeの検証で確認してみると
`
# はじめに
皆さん、Electron触っていますでしょうか？
私は最近Electronの存在を知ったので、JavaScriptの勉強も兼ねてカレンダーアプリを作成してみようと思った次第です。
# とりあえずElectronプロジェクトを作る。
“`
$ mkdir ElectronCalender
$ cd ElectronCalender/
$ npm init -y
$ npm install -D electron ※
“`
これでディレクトリ内にElectronを使う準備は整った。
※npm install -D ~ はpackage.jsonに書き込みらしい。
# 画面を作ってアプリを立ち上げる。
package.jsonにエントリーポイント(main.js)を指定しとく。
“`package.json
{
“name”: “ElectronCalender”,
“version”: “1.0.0”,
“description”: “”,
“main”: “main.js”,
“scripts”: {
“test”: “echo
## submitボタンの表記を変えたい
submitボタンを実装した場合、デフォルトの日本語表記は下記のような形で表示されます
（色付けなどはCSSで加工済み）
‘登録する’ というのがデフォルトのsubmitボタンとなります。
例えば、作成しているアプリで商品出品するページでは当然、’出品する’という表記にしたいですよね。
しかし、商品を編集して更新する場合は、’出品する’だと違和感があるので
‘更新する’と表記をしたいところです。
しかし、出品も更新も同じフォームを流用しているので
分岐分けで記入する必要があるところになります。
単純にsunmitボタンのテキストを変えたい場合なら
`
Webサイト/アプリケーションを実装する上で独自のフォーム部品を実装する場合、キーボード操作のサポートは意外と忘れられがちではないでしょうか？（これまで僕自身もあまり対応できていませんでした…）
今回は標準のHTMLコンポーネントがどのようにキーボード操作できるのかを把握し、自身でキーボード操作を実装する場合に参考となる情報をまとめました。
# なぜ、キーボード操作をサポートするのか
– 運動障害を持つ多くのユーザーはキーボードに依存している（これは健常者が怪我した場合も含まれる）
– 視覚障害のあるユーザーも通常、ナビゲーションにキーボードを使用する
– 一部のユーザーはキーボードを模倣した別のハードウェアを使う場合がある
– もしかしたら、マウスが壊れてキーボードしか使えない状況もありうる
– というか、普通にキーボードで操作できると便利じゃないですか？
[WCAG 2.1の「ガイドライン2.1 操作可能」](https://waic.jp/docs/WCAG21/#keyboard-accessible)では以下のように記載されています。
> すべての機能をキーボード
## タブとは何か？
タブとはドキュメントを切り替えて表示するためのGUIウィジェットである。一般的には長方形のボックス中にテキストラベルを表示する形で画面上部に表示され、タブの選択により**管理するドキュメントを切り替えて表示させる**仕組みとなっている。
>wikipedia
https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%96_(GUI)
**<完成品>**
*タブが作成されます！*
初心者によるプログラミング学習ログ 267日目
#100日チャレンジの267日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
267日目は、
JSじゃなくてRuby派だという方は[こっち]
(https://qiita.com/nownabe/items/aeac1ce0977be963a740)をご覧ください。（僕の記事じゃないです。）
完成したサイトは[こちら](http://kyweb.html.xdomain.jp/)
#OpenWeatherMap APIとは#
世界中の都市の気象情報を表示できるWeb APIで、DarkSkyAPIなどと比較されることが多い。時たまとんでもなく外れた気象予報を出すことがある。
#HTMLに表示する手順#
###1. API Keyを取得する###
[OpenWeatherMap公式サイト](https://openweathermap.org/)にてサインアップし、マイページでAPI Keyを確認する。
（Rakuten Rapid APIでも登録できるがクレカ登録など色々めんどいので公式からの手順を書いておきます）
###2. fetchメソッドとjQueryで横浜の現在の天気を表示する###
公式サイトで言うところのCurrent weather dataをHTML
よく使うので忘備録として・・
##パターン１
一番シンプルなやつ
＃は環境に応じて使い分ける。
“`HTML
“`
“`SCSS
.blog-list {
>li >a[href=”#”] {
pointer-events: none;
}
}
“`
##パターン２
一番ありがちなやつ
“`HTML
-
スクロール時にヘッダーの背景色を変える
割とよく使うので忘備録として・・。
##スクロール時にヘッダーの背景色を変える
1. タブレット画面幅以下の時のみ
2. ヘッダーが固定
3. ヘッダー透明でトップビジュアルの上にあるが、スクロールしたら透明は見難いから色をつけたい。
“`html
“`
“`javascript
$(function(){
var breakPoint = 768;
if ($(window).innerWidth() <= breakPoint) {
var mainVisualHeight = 420;
var header = $('header');
$(window).scroll(function () {
$(this).scrollTop() > ma
### やりたいこと
web上で動画を再生したい
### 問題
.mp4や.movの拡張子がついているファイルを再生しようとした時に再生できるものとできないものが存在する。
### 結論
ファイル形式(拡張子)で判断するのではなく、コーデックをブラウザが対応するものに変換する。
—
### 動画の構造
動画は大きく**映像と音声という2つの構造**でできている。
動画は容量が大きいファイルなので圧縮してやる必要がある。
(基本的に動画を録画した時点で勝手に圧縮されたファイルが作成される)
### コーデック
圧縮する行為を**エンコード**
圧縮したままでは再生できないので、圧縮をもとに戻すのが**デコード**と呼ぶ。
エンコードとデコードの2つを組み合わせて**コーデック**と呼ぶ。
動画の場合は映像と音声の2つのコーデックが必要になる。
#### コーデックの種類
代表的な**映像コーデック**
MPEG-4・ MPEG-1・MPEG-2・ Xvid・Divx・H.263・H.264・HEVC(H.265) など
代表的な**音声コーデック**
MP3・
#100日チャレンジの266日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
266日目は、
