- 1. Rails6でHTMLとCSSのみを使ってシンプルにフォームをつくるメモ
- 2. [Rails]カスタムフォントの設定
- 3. CSS セレクターでの大文字小文字区別について
- 4. 【初心者でもわかる】簡単！ラベルデザインの作り方
- 5. 【改訂】Gatsbyでページごとに個別にCSSを読み込む方法
- 6. 懐かしい？もう使われなくなったHTMLタグたち
- 7. 【初心者でもわかる】ハンバーガーメニューをハンバーガーにする。
- 8. オンラインイナズマ 追加ワーク6日目 模範解答
- 9. Googleが「QUIC」で切り開くインターネットの未来
- 10. Tsハロトレ28日目
- 11. 通知がしたいだけならPWAでいいじゃない【iOS非対応】
- 12. そのページ、ちゃんと魚拓できてませんよ？
- 13. 画像高さをキープしたまま画面の幅いっぱいに背景画像を表示させる方法
- 14. 【検証】checkboxとlabelを使えば切り換え機能を伴うUIは全てjavascriptを使わずに実装できる説
- 15. FrontEndのいくつ技術の用途の取り纏め
- 16. 【作ってみた】js不使用。CSSだけでマウスホバーで動く自動ドア作った。
- 17. 複数チェックボックスを全選択した時のみ押せるボタン
- 18. 画面の解像度で画像を切り替える
- 19. HTMLで文字化けを直す方法（UTF-8、Shift_JIS）
- 20. 社会行動リズム表アプリを作成する【作成中】
Rails6でHTMLとCSSのみを使ってシンプルにフォームをつくるメモ
## はじめに
Railsで bootstrapなどのCSSフレームワークを使わない、素のコードが意外とみつかないので、そのメモ## 前提
Receptionモデルがあり、カラムは名前と目的。## 目標
このようなシンプルなフォームをHTMLとCSSのみをつかってシンプルに書く
##HTML
* フィールドはtext_field,select_field,submitの3つ“`:html
<%= form_with model: @reception do |f| %>
- <%= f.label :name, "名前" %>
[Rails]カスタムフォントの設定
# はじめに
アプリ開発でフリーフォントを使用してデザインを変えたのでその使用方法をまとめました。# 目次
1 フリーフォントの準備
2 フォントの読み込み# 1 フリーフォントの準備
まず、フリーフォントサイトから自分が使用したいものをダウンロードします。
その後、ダウンロードしたファイル(拡張子ttfまたはotf)をapp/assets/fonts下に配置します。### 注意事項
フォントはそれぞれ利用条件が異なります。商用可能であっても利用できる範囲に制限があったり、使用時に報告が必要なものもありますので、ご利用の際には必ず配布ページをご確認ください。# 2 フォントの読み込み
CSSファイルに以下を記述します。“`css
@font-face {
font-family: “abcdefg”;
src: url(‘/assets/abcdefg.ttf’) format(“truetype”);
font-weight: normal;
font-style: normal;
}
“`フォントを適用したい箇所にfont-family
CSS セレクターでの大文字小文字区別について
# はじめに
ちょっと気になったので実際に調べてみました。
# 用意した HTML とその結果
“`html
Document
target
## 検証する説
今回お持ちした説は、こちらです。
※ [devroom](https://devroom.azurewebsites.net/Generator/Wednesday)さんを使わせていただきました。## どのような仕組みか
* ``の`id属性`と、`
FrontEndのいくつ技術の用途の取り纏め
FrontEndではいろいろな技術が創造されています。その中に、幅広く使ったものはHTML、JavaScript、CSS、DynamicHTML、DOM、AJAXです。
以下、用途により、説明します。
##HTMLの用途はなんですか##
今はWEB開発が流行しています。WEB開発以前はデスクトップアプリケーションが流行でした。WEB開発に変わってから、何の技術でブラウザにコンポーネントを表示しますか、画面でどのような効果を表示しますか。
この場合、HTMLが登場しました。
HTMLでは、テキストコンポーネント、ボタンコンポーネントが定義されています。文字色、背景色が指定できます。script、cssも組み込めます。
つまり、以下の二点の用途があります。
・画面でデータの輸出と輸入及びユーザ体験のために効果の表示
・script、cssなどほかの技術のインターフェースを持つ
##JavaScriptの用途はなんですか##
HTMLで生成されたページが固定です。変えたい場合、JavaScriptを使ったほうがいいです。例えば、検索した結果、一般的に、テーブル見たいなフォーマットで結果を表示
【作ってみた】js不使用。CSSだけでマウスホバーで動く自動ドア作った。
# どうも7noteです。電車に乗っていてふと突然、「そうだ自動ドア作ろう」って思ったので作ってみた。
**完成予定イメージ**
閉じてるとき↓
開いたとき↓
## ソース
予想していたよりも短くコンパクトに書けました。
```index.html
```
```style.css
.doors {
wid
複数チェックボックスを全選択した時のみ押せるボタン
```HTML
確認ボタン
HTMLで文字化けを直す方法（UTF-8、Shift_JIS）
#はじめに
ソースコードなどのテキストファイルを他のエンコードタイプでブラウザ表示させると文字化けしてしまいます。
HTMLで文字エンコーディングを指定し、文字化けを直す方法を説明していきます。#目次
1.文字エンコードって何？
2.エンコードタイプとは、コードと文字の対応表
3.HTMLでエンコードタイプを指定する
4.エンコーディングを変換する#1.文字エンコードって何？
一言でいうと、「文字データを数値へ変換させること」です。
コンピューターはデータを「数値」でしか理解できません。そのため、「文字」を扱う場合には、「数値」に変換して処理を行います。この変換のことを文字エンコードと言います。#2.エンコードタイプとは、数値と文字の対応表
コンピューターに「文字」を理解させるためには、「数字」と「文字」の対応表が必要です。
この対応表にはいくつかの種類があって、OSの種類によって、扱う対応表も異なります。例えば、WindowsはShift_JIS、UNIXやMacはUTF-８など異なった対応表でテキストを扱います。
この対応表のことをエンコードタイプといい、アルファベット
社会行動リズム表アプリを作成する【作成中】
[もうすぐあの季節！tableでタイムテーブルを作る方法](https://qiita.com/pitapan/items/5cf96dc3084c997a99d7)
