フロントエンドメモ

項目

1. コンテナにトリミングせず良い感じに画像をはめ込む
2. アンカー使ったリンクでPOSTしてvalueを渡す
3. PDFを表示する
4. 縦中央寄せ(毎回検索してる気がする)
5. コンテナ内改行
6. リンクの下線消す
7. 区切り線を引く
8. テーブルにスクロールバー

1.コンテナにトリミングせず良い感じに画像をはめ込む

• object-fit: contain;

css

img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

2.アンカー使ったリンクでPOSTしてvalueを渡す

html

<form  name="form_ex" action="/index method="post">
 <input type="hidden" name="test_send" value=0>
 <a href="javascript:フォームのname.submit()">リンク名</a>
</form>

3.PDFを表示する

• embed

html

<!--この世で最も優れたタグ-->
<embed src="file_name.pdf" width="800px" height="2100px" />

4.縦中央寄せ(毎回検索してる気がする)

css

.test {
  height: 150px;
  line-height: 150px;
}

5.コンテナ内改行

css

.test{
  word-wrap: break-word;
}

6.リンクの下線消す

css

.test{
  text-decoration: none;
}

7.区切り線を引く

• hrタグ
• alignにleft,center,rightが入れられる

html

<hr size="1px" width="600px" color="gray" align="center">

8.テーブルにスクロールバー

• overflow-y:scroll テーブル横にスクロールバー
• overflow-x:scroll テーブル下にスクロールバー
• overflow:scroll テーブル横・下にスクロールバー
• overflow-y:auto 内容に応じて横にスクロールバー
• overflow-x:auto 内容に応じて下にスクロールバー
• overflow:auto 内容に応じて横・下にスクロールバー

html

<div style="height:~~~px; width:~~~px; overflow-y:scroll;">
<!--テーブルタグ-->
</div>