環境 ruby 2.6.5 rails 6.0.0 やりたいこと 画像をアップロードする際に，アイコンをクリックするとファイル選択に移るようにしたい 実装 <%= f.label :image, class: "far fa-image" do %> <%= f.file_field :image, style:"display:none;" %> <% end %> 上記のコードを任意のforループの中に挿入する．このときid値は同様のものにしておく必要がある． あとがき labelについての理解が浅いことがわかって良かったです． 参考文献 railsのfile_fieldで画像クリックによりアップロード Railsのfile_fieldで画像クリックでアップロードしてプレビューを差し替える
ruby 2.6.5 rails 6.0.0
画像をアップロードする際に，アイコンをクリックするとファイル選択に移るようにしたい
<%= f.label :image, class: "far fa-image" do %> <%= f.file_field :image, style:"display:none;" %> <% end %>
上記のコードを任意のforループの中に挿入する．このときid値は同様のものにしておく必要がある．
labelについての理解が浅いことがわかって良かったです．
railsのfile_fieldで画像クリックによりアップロード Railsのfile_fieldで画像クリックでアップロードしてプレビューを差し替える
ある日、僕の元に渡ってきたコードに普通に書いてあった display:grid; あかん！！ flexじゃねぇ！！！ ヒゲダン鼻歌歌ってる場合じゃねぇ！ ヤバい、、、と思いました。 なんとなく聞いたことはあった、どうにか調べて解決したけど、その場しのぎで全くわかってねぇ！ これは次きたらマズイと思い、自戒の念も含めこの記事を書こうと思います。(書くと理解するから) １、flexboxと何が違うの？使い分けは？ どうやらGrid Layoutを使うと、 HTMLの記述がシンプルで短くなる(flex用のdivがめっちゃ増えるのを防げる) シンプルな横並びとか、タイルのレイアウトならflexboxでいいけど 複雑なtableみたいなレイアウトだと、display:grid;のが向いてるみたい。 入門 これはflexでも簡単そうだけど、、基本として 2、display:grid;ってどこに指定するの？ flexと一緒で親要素に指定するそうです。 また、親要素（いつもdisplay:flex;かけてたとこ）を Gridコンテナ それぞれの子要素を Gridアイテム と呼ぶそうです！ ３、さぁまずはHTMLや！ HTML書きます！簡潔！ <div id="container"> <div id="item_header">ここヘッダー</div> <div id="itemA">A</div> <div id="itemB">B</div> <div id="item_footer">ここフッター</div> </div> ４、そしてCSS これで準備完了！！！！ #container { display: grid; width: 500px; height: 300px; } ５、まずは行の縦幅の調整 grid-template-rows #container { display: grid; width: 500px; height: 300px; grid-template-rows: 50px auto auto 100px; /* それぞれのheight ピンクが50px、肌色と青可変、グレー100px */ } こんな結果になります！ autoは#containerの高さに応じて、可変します！便利！ ６、次はgrid-template-columnsで列の横幅調整！ #container { display: grid; width: 500px; height: 300px; grid-template-rows: 50px auto auto 100px; grid-template-columns:1fr 100px; } こんな感じになりました！（レイアウトがぶっ壊れましたね。。このあと調整します。） ここであえて使った 1fr というのは、残り全て という意味です。 今回だったら、100px意外全てのwidthという意味ですね。 肌色の部分はちゃんと100pxになってますね！ そしてここで検証ツールで出てきてくれた数字がすっごく役にたちます(神) ７、バラバラになったアイテムの位置を指定する(grid-row、grid-column)ここが曲者、、 アイテムの配置指定は、 grid-row grid-column を使用します。 これは番号で指定するようなのですが、 例えばheaderの赤い部分 横（行）の幅が番号でいうと、 1番 ~ 2番なので、grid-row:1/2; という風に指定するそうです。 縦(列は)全ての列を含んでいて、1番~4番なので grid-column:1/4; と指定するそうです！ ↑ 難しいので手を動かさないとわからないと思います この部分は、この記事がわかりやすかったです。(全体的にも) 正直慣れるまで難しいと思ったので、これは検証ツール見ながらやった方がいいと思いました！！！！ こんな感じですね。 コード全て載せときます <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container { height: 300px; width: 500px; display: grid; /* グリッドレイアウト */ grid-template-rows: 50px auto auto 100px; grid-template-columns:1fr 100px; } #item_header{ background: #E16162; grid-row: 1/2; grid-column: 1/4; } #itemA{ background: #FFEED0; grid-row: 2 / 4; grid-column: 1/2; } #itemB{ background: #72A6EF; grid-row: 2/ 4; grid-column: 2/4; } #item_footer{ background: #B2AFAF; grid-row: 4 / 5; grid-column: 1/5; } </style> </head> <body> <div id="container"> <!-- コンテナ --> <div id="item_header">ここヘッダー</div> <!-- アイテム --> <div id="itemA">A</div> <!-- アイテム --> <div id="itemB">B</div> <!-- アイテム --> <div id="item_footer">ここフッター</div> <!-- アイテム --> </div> </body> </html> 以上！ あとは先ほどの記事とか見ながら上級版をやってみてください。 ざっくり入門の記事でした！ 変なとこあったらコメントいただけると嬉しいです。
ある日、僕の元に渡ってきたコードに普通に書いてあった
あかん！！ flexじゃねぇ！！！ ヒゲダン鼻歌歌ってる場合じゃねぇ！ ヤバい、、、と思いました。
なんとなく聞いたことはあった、どうにか調べて解決したけど、その場しのぎで全くわかってねぇ！ これは次きたらマズイと思い、自戒の念も含めこの記事を書こうと思います。(書くと理解するから)
どうやらGrid Layoutを使うと、 HTMLの記述がシンプルで短くなる(flex用のdivがめっちゃ増えるのを防げる)
シンプルな横並びとか、タイルのレイアウトならflexboxでいいけど 複雑なtableみたいなレイアウトだと、display:grid;のが向いてるみたい。
入門
これはflexでも簡単そうだけど、、基本として
flexと一緒で親要素に指定するそうです。 また、親要素（いつもdisplay:flex;かけてたとこ）を Gridコンテナ それぞれの子要素を Gridアイテム と呼ぶそうです！
HTML書きます！簡潔！
<div id="container"> <div id="item_header">ここヘッダー</div> <div id="itemA">A</div> <div id="itemB">B</div> <div id="item_footer">ここフッター</div> </div>
これで準備完了！！！！
#container { display: grid; width: 500px; height: 300px; }
#container { display: grid; width: 500px; height: 300px; grid-template-rows: 50px auto auto 100px; /* それぞれのheight ピンクが50px、肌色と青可変、グレー100px */ }
こんな結果になります！ autoは#containerの高さに応じて、可変します！便利！
#container { display: grid; width: 500px; height: 300px; grid-template-rows: 50px auto auto 100px; grid-template-columns:1fr 100px; }
こんな感じになりました！（レイアウトがぶっ壊れましたね。。このあと調整します。） ここであえて使った 1fr というのは、残り全て という意味です。 今回だったら、100px意外全てのwidthという意味ですね。 肌色の部分はちゃんと100pxになってますね！ そしてここで検証ツールで出てきてくれた数字がすっごく役にたちます(神)
アイテムの配置指定は、 grid-row grid-column を使用します。 これは番号で指定するようなのですが、 例えばheaderの赤い部分 横（行）の幅が番号でいうと、 1番 ~ 2番なので、grid-row:1/2; という風に指定するそうです。 縦(列は)全ての列を含んでいて、1番~4番なので grid-column:1/4; と指定するそうです！
↑ 難しいので手を動かさないとわからないと思います
この部分は、この記事がわかりやすかったです。(全体的にも)
こんな感じですね。
コード全て載せときます
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container { height: 300px; width: 500px; display: grid; /* グリッドレイアウト */ grid-template-rows: 50px auto auto 100px; grid-template-columns:1fr 100px; } #item_header{ background: #E16162; grid-row: 1/2; grid-column: 1/4; } #itemA{ background: #FFEED0; grid-row: 2 / 4; grid-column: 1/2; } #itemB{ background: #72A6EF; grid-row: 2/ 4; grid-column: 2/4; } #item_footer{ background: #B2AFAF; grid-row: 4 / 5; grid-column: 1/5; } </style> </head> <body> <div id="container"> <!-- コンテナ --> <div id="item_header">ここヘッダー</div> <!-- アイテム --> <div id="itemA">A</div> <!-- アイテム --> <div id="itemB">B</div> <!-- アイテム --> <div id="item_footer">ここフッター</div> <!-- アイテム --> </div> </body> </html>
以上！ あとは先ほどの記事とか見ながら上級版をやってみてください。 ざっくり入門の記事でした！
変なとこあったらコメントいただけると嬉しいです。
buttonタグにはoutline: none;をつけておく クリックしたときに緑色の枠が表示されてしまうから気を付ける
CSSとは HTMLに装飾を加えるための言語です。 例 indexファイル <!DOCTYPE HTML> < html> < head> < meta charset="UTF-8"> < title>HTML学習用ウェブサイト< /title> < link rel="stylesheet" href="style3-3.css"> < /head> < body> < h1> これは見出しです < /h1> < p> １つ目の段落です < /p> < p class="second-message"> 2つ目の段落です < /p> < p> 3つ目の段落です。< b>この部分は太字になります。< /b> < /p> < a href="クリックすると、Googleへ移動します。" class="autolink">https://www.google.com/">クリックすると、Googleへ移動します。 < /body> < /html> cssファイル p { font-size: 24px; color: red; } .second-message { color: orange; font-size: 12px; } p{}は< p>〜< /p>の部分をp{}のようにすること .second-messageはclass = "second-message"となっているところを.second-message{}のようにすること
HTMLに装飾を加えるための言語です。
<!DOCTYPE HTML> < html> < head> < meta charset="UTF-8"> < title>HTML学習用ウェブサイト< /title> < link rel="stylesheet" href="style3-3.css"> < /head> < body> < h1> これは見出しです < /h1> < p> １つ目の段落です < /p> < p class="second-message"> 2つ目の段落です < /p> < p> 3つ目の段落です。< b>この部分は太字になります。< /b> < /p> < a href="クリックすると、Googleへ移動します。" class="autolink">https://www.google.com/">クリックすると、Googleへ移動します。 < /body> < /html>
p { font-size: 24px; color: red; } .second-message { color: orange; font-size: 12px; }
