PC版のTwitterのようなサイトを作ろうと思って調べたことをまとめていきます
要素をきっちり3分割
target{
width : calc(100% / 3) ;
}
参考：【CSSで3等分】要素をきっちり三分割するスタイルシートの書き方
画面サイズ取得
画面取得するには以下を使用する
この取得したサイズに応じて表示する内容を変更したりする
どちらもスクロールサイズを除くサイズ
縦サイズ
document.documentElement.clientWidth
横サイズ
document.documentElement.clientWidth
画面サイズ変更の監視
window.addEventListener('resize',()=>{
//処理
}
入力ボックス
入力ボックスはHTML5の contentEditable 属性を使う
この属性をtrueにすると編集できるようになる
inputを使うよりもシンプルな入力画面になる
<div contentEditable="true">入力ボックス</div>
aの下線部を消す
text-decoration: none;
Twitterのようなタイムラインの形のテンプレート
<body style="background-color:rgb(54, 3, 3)">
<div style="background-color: rgb(107, 107, 2);width: 500px;display: inline-flex;">
<!-- ユーザ情報 -->
<div style="background-color: rgb(104, 101, 101);">
<img src="image/bell.png" alt="" style="width: 50px;">
</div>
<!-- 投稿内容 -->
<div style="display: block;">
<div style="background-color: rgb(109, 65, 65);">あああ</div>
<div style="background-color: rgb(69, 65, 109);">いいい</div>
<div style="background-color: rgb(65, 109, 88);">ううう</div>
<!-- <div contenteditable="true" style="background-color: rgb(65, 109, 88);">ううう</div> -->
</div>
</div>
</body>
block要素を上下左中央に配置
.outer{
position: relative;
}
.inner{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
フォーカスインとフォーカスアウト
addEventListenerでコントロールするものいいが特定のタグであれば
onfocusとonblur属性がいい仕事をしてくれる
| 属性 | 説明 |
|---|---|
| onfocus | フォーカスしたとき |
| onblur | フォーカスアウトしたとき |
例
<input placeholder="キーワード検索" type="text" onblur="focusOut(this)" onfocus="focus(this)">
thisでその要素自体を取得できる
文字を中央に持ってくる
<div align="center"><p>中央</p><div>
部分スクロールを可能にする
<div style="overflow: auto;>
高さ調整も忘れずに
画像を幅に合わせてトリミング
img {
width: 250px;
height: 250px;
object-fit: cover; /* この一行を追加するだけ！ */
}
引用：1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
好きな場所でトリミングするときはobject-position: 値 値;を使う
画像の左下でトリミング
object-position: 0 100%;
画像の右下でトリミング
object-position: 100% 100%;
気になったcssプロパティなど
flex-basis
コンテンツボックスの寸法を定義