day41

矢立

cssでちょっと面白いのをメモ。
デザイン力に自信がないからあんまり真面目にやってないけど、今回のスマホ画面作るのに何回か同じ事調べたヤツとりあえず書き出す

//単位
width: 100vw;　
width: 100%;

//サイズ
width: calc(100vw - 8px );　便利
font-size: clamp(12px, (1rem + 5vw), 50px);　とっても便利　widthにも使える

//要素の値　
block 要素　=>　p, div, ul, h1〜
inline 要素　=>　<a> div/ p/ img/ h1 </a>　　<div> img</div>　　<div> span</div>     (text-align/vertical-alignできない？)
結局困ったら display: block; にしてる( ᐛ )良くないらしいが．．．まぁ。　

<!-- ------------------------------- -->

//div 要素の中央よせ
/*親*/ .parent {　　　　　
background-color: #eee ; /* 背景色指定 */
position: relative; /* 位置指定の基準点にする */
}
/*子*/.item {
background-: #666 ; /* 背景色指定 */
position: absolute; /* 位置指定 */
top: 50%; /* 親要素の半分下にずらす */
left: 50%; /* 親要素の半分右にずらす */
transform: translate(-50%, -50%);
}

<!-- ------------------------------- -->

//消したい時（リセットcss使えよな^_^）
list-style: none;
text-decoration: none;
border: none;
outline: none;

<!-- ------------------------------- -->

//グラデーション　（あんま使わなから毎回調べる( ͡° ͜ʖ ͡°)）
background: linear-gradient(135deg, #2c3e50 , #2c3e50 min(20vw, 60%), #3498db );

<!-- ------------------------------- -->

//基本の　display: flex;　justify-content:
  <style>
.parent{width: 100%;height: 300px;background:#eee;display: flex; justify-content: space-between;}.item{margin: 2px;width: 40px;}
</style>
<div class="parent"><!-- justify-content:付けるのどっちだっけ？になる（╹◡╹） -->　
　<div class="item">aaa</div>
　<div class="item">bbb</div>
　<div class="item">ccc</div>
</div>

<!-- ------------------------------- -->

<style> <!-- css別シートにかけよ自分(๑╹ω╹๑ ) -->
.parent{width: 100%;height: 160px;background:#eee;position: relative;}.item{margin: 2px;width: 40px;list-style: none;text-decoration: none;border: none;outline: none;position: absolute;}
.item:nth-child(1){    <!-- 名前付けに悩まなくて済む -->
background: #000 ;right: 40px;
}
.item:nth-child(2){
background: #ff00b3 ;right: 160px;top: 40px;
}
.item:nth-child(3){
background: #ffd000 ;left: 60px;bottom: 20px;
}
</style>
<div class="parent">
  <div class="item">aaa</div>
  <div class="item">bbb</div>
  <div class="item">ccc</div>
</div>

<!-- ------------------------------- -->
<!-- onclickの使い分けがわからなかったのでメモ -->
<!-- 悩んだら丸ごとコピペして確認できる用 -->

<body>
<!-- リセットcssとして -->
<style>html,body{margin: 0;width: 260px;}a,div,input{width: 100vw;height: 50px;background: #8b8b8b ;color: #333 ;margin: 14px 0;line-height: 50px;text-align: center;}h1,p{text-align: center; background: #ccc ;}span{background: #eee ;}</style>
<!-- 体裁整える用css -->
<style>.parent{width: 100%;height: 140px;background:#eee;display: flex;justify-content: space-between;}.item{margin: 2px;width: 60px;list-style: none;text-decoration: none;border: none;outline: none;}
img{height: 140px;}</style>

<!-- ------------------------------- -->
<p>JavaScriptでボタンをつけて画像を読み込む</p>
<div class="parent">
<div id="div1" class="item">Click</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
</div>

<script>
const $div1=document.getElementById('div1');
$div1.addEventListener('click',()=>{
$div1.outerHTML='<img src="../08.jpg">';
});
</script>

<!-- ------------------------------- -->
<p>HTMLのonclickで画像を読み込む</p>
<div class="parent">
<div id="div2" class="item" onclick="delayExec();">Click</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
</div>

<script>
function delayExec(){
document.getElementById('div2').outerHTML='<img src="../08.jpg">';
};
</script>

<!-- ------------------------------- -->
<!-- outerHTML知らなかった -->
<p>outerHTMLをinnerHTMlにすると</p>
<div class="parent">
<div id="div3" class="item" onclick="delayExec2();">Click</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
</div>

<script>
function delayExec2(){
document.getElementById('div3').innerHTML='<img src="../08.jpg">';
};
</script>
</body>

※　src="../08.jpg"もちろんこの画像は手持ちのDTのを使ったよね




弄ってるとどんどん面白い。これも沼なのだわね(๑╹ω╹๑ )
と、今（家事もしてなくて、だから部屋汚いんだけど．．．）無事に爪が伸びててキーボードがメタクソ打ちづらい

でもさ、邪魔くさいのが面白くって折りたくねーのよ