- 1. bootstrapだけでdiv内の要素を上下左右中央に寄せる
- 2. Railsで画像を表示する方法、Bootstrapのスタイルの当て方
- 3. CSSがパワーアップ！:has()セレクタでフォームバリデーションを視覚化する
- 4. GoogleColaboratoryはjavascript・htmlも使用できる
- 5. VScodeでhtml.erbファイルを編集する際入力補正を使いたい
- 6. HTML CSS 備忘録
- 7. HTMLのaタグのセキュリティ
- 8. プログラミング勉強会256times「フロントエンド案件修行 256times Media編」に参加しました
- 9. DOM
- 10. HTML/CSSにおける画像のリサイズモードをマスターする
- 11. WordPressのレイアウト：サイドバー が下にずれる
- 12. disabledを使わずにボタンを無効化する方法 pointer-events:noneとcursor: not-allowedを同時に使う時の注意点
- 13. HTML要素の右寄せのやり方（style="text-align: right"）
- 14. スクロール時に背景画像を固定する方法と注意点
- 15. サバイバルTypeScriptのlikeButtonをAngularで実装するよ
- 16. CSSの優先度には気をつけようの話
- 17. 【JSは使わない】HTMLとCSSのみで動く変身ベルトを作る【画像も使わない】
- 18. Swiperで自動で動くスライドリストを作る（jQuery不要）
- 19. 【プルリクを出す前に】figmaからのマークアップ チェックリスト【チーム開発効率UP】
- 20. ElectronでHTMLコンテンツをPDF出力する方法
bootstrapだけでdiv内の要素を上下左右中央に寄せる
# 結論
中央に寄せたい要素の親となるdivの要素に対して、class属性に`d-flex align-items-center justify-content-center`をもたせれば上下左右を中央に寄せることができます。# バージョン
bootstrap 4.4.1# サンプルコード
Railsで画像を表示する方法、Bootstrapのスタイルの当て方
Railsでアプリを作成時、探し出すのに苦労したのでここに残します。
### Railsで画像を表示させたいとき
Railsでは、HTML方式も使えるし、Rubyも使えるので迷いがち画像を表示させようと、
を使用すると、うまく画像が表示させられない。
そんなとき、画像はimage_tagを使うべし!
assets/imagesフォルダに画像を入れ下記のように記述で表示できる。
“`
<%= image_tag 'star.png' %>
“`
※ <%= image_tag 'ファイル名' %>サイズを変えたければ,size: 変えたいサイズで可能
“`
<%= image_tag 'star.png', size:'80x80' %>
“`
※<%= image_tag 'ファイル名', size:'変えたいサイズ' %>cssで変えたい場合は、下記のようにすればクラスが当てられる。
“`
<%= image_tag 'star.png', class:"logo" %>
“`
通常通りcssでクラス別に変更できる。
“`
.l
CSSがパワーアップ！:has()セレクタでフォームバリデーションを視覚化する
# 目次
1. [はじめに](#introduction)
2. [CSS :has() 擬似クラス](#has-pseudo-class)
3. [フォームバリデーションの視覚化](#visualizing-form-validation)
4. [注意点](#caution)
5. [まとめ](#conclusion)## 1. はじめに
Web開発の中で、フォームのバリデーションは重要な役割を果たします。ユーザからの入力が期待通りの形式であることを確認し、不適切なデータの送信を防ぐことができます。そして、それらのバリデーション結果をユーザに視覚的にフィードバックすることで、ユーザ体験を向上させることができます。
本記事では、CSSの`:has()`擬似クラスを利用して、フォームバリデーションの結果を視覚的に表示する方法を紹介します。
`:has()`はCSSの擬似クラスで、引数として渡されたセレクターに該当
GoogleColaboratoryはjavascript・htmlも使用できる
# 結論
セルマジックを使うことでjavascript・htmlが使用できます# セルマジックとは
下記の記事が参考になります。https://qiita.com/mgsk_2/items/437656b8ce42c03e41a6
https://qiita.com/kazoo04/items/a0bd374199a7783ca0e
# サンプルコード
### javascript“`.js
%%javascript
const div = document.createElement(‘div’);
div.textContent =’Hello world!’;
document.body.appendChild(div);
“`
—–
### html
“`.html
%%htmlhello wVScodeでhtml.erbファイルを編集する際入力補正を使いたい
■学習内容
VScodeの拡張機能について■理解したポイントや参考になった情報
rails課題２からローカル環境で開発することにしたのでVScodeでコーディングしていたところ、html.erbファイルのスニペットが有効ではなかったので自分なりに調べて有効化してみた。1.拡張機能でrailsと検索し、プラグインをインストール
html.erbの拡張子で文法チェックとスニペットが使えたがhtmlタグのスニペットは有効化されなかった2.settings.jsonに変更を加えた
html.erbでhtmlのスニペットを有効化するために、settings.jsonのemmetにhtml.erbにhtmlをインクルードした左下の設定を開く
検索でemmetと入力し「setting.jsonで編集」を選択
変更を記述
“`settings.json
“emmet.includeLanguages”: {
“html.erb”: “html”
“`HTML CSS 備忘録
・wrapperとcontainerについて曖昧だった のでまとめる
wrapperは横幅指定しないで縦のデザインを整えていく
containerは縦の指定しないで横のデザインを整える（margin:autoやwidth100%,max-width:~pxなど）・object-fit:containとwidth:fit-content
前者は画像などのアス比変えずにおやボックスに合わせる、後者は幅を子要素に合わせる・vw,vh,vm,
viewport基準＝１００vw・imgタグのサイズ変更
直親＞自身{ で指定しないと変更されない
祖先＞自身ではダメ見返したら何書いてあるか全然わからなかったため後日調べて書き直します
HTMLのaタグのセキュリティ
HTML
aタグのrel属性のnoopenner,noreferrerについて
どちらもセキュリティの観点から入れた方が良い
noopennerはリンク先からの操作を防ぐ
古いブラウザには対応していないことがあるnoreferrerはリンク先にリファラを渡さず、noopennerの機能も備えている
アフィリエイトを運営している場合、情報が取得できない場合があるnoreferrerだけでも良さそうだが、どちらもつけとけば問題ない模様
参照https://blog.ojisan.io/noreferrer-noopener/
プログラミング勉強会256times「フロントエンド案件修行 256times Media編」に参加しました
## フロントエンド案件修行 256times Media編に参加しました。
フロントページから詳細ページへ移動することができる、Webサイトを初めて作り、とても楽しかったです。
こちらが４日目に作成した、256times Mediaのサイトです。### 工夫したところ
– SP版では、ハンバーガーメニューを設置しました。
– PC版では、ヘッダーに検索窓を設置しました。
– 日付が何日前と表記されるようにしました。
– PC版では、2カラムにし、人気記事と広告を配置しました。
– ヒーローエリアトップにも、広告を配置しました。
– WordPressのように、人気記事のアイキャッチをクリックすると、記事詳細ページに飛ぶように作りました。
– 記事詳細ページのJavaScriptは、そのページ内の“`