2020-07-05から1日間の記事一覧
React Formのドキュメントを読んで見る ja.reactjs.org 元のソース class Test extends React.Component { constructor(props) { super(props) } render () { console.log(this) return ( <div className="App" > </div> ); } } export default Test; thisをみて見る thisの中身にはprops…
基本レイアウト 実装 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="wrapper"> <div class="header"> </div> <div class="main"> <div class="left"> </div> <div class="right"> </div> </div> <div class="footer"> </div> </div> </body> </html>
box-shadowの使い方 box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; 四角形に影をつけてみる .box{ width: 100px; height: 100px; background-color: skyblue; box-shadow: 3px 3px 4px; } 参考記事 saruwakakun.com
opacityの使い方 要素を透明にする事ができる よく使うケースは、hoverと組み合わせるケースがほとんどな気がします。 hoverとopacityを組み合わせた場合 li { list-style: none; } .link { color: blue; } .link:hover{ transition: .3s; opacity: 0.5; }
擬似要素の使い方 Hello worldの前と後ろに『』をつける 『Hello World』と一つのタグに入れる事もできるけど、記事要素を使うと分けられる .text::before{ content: '『'; font-weight: 10px; } .text::after{ content: '』'; color: skyblue; } これにはpo…
word-break 文字の折り返し の使い方 over flowとの違い over flowははみ出した要素を、非表示にしたりスクロールしたりします。 word-breakの場合は、記事などの文字など折り返しが必要な時に利用します。 everydayproguramming.hatenablog.com
zoverflowとは 要素ボックスからはみ出た部分を扱うcss 英語でも見るとそのままですね。 値の種類 visible はみ出たまま hidden はみ出た部分が隠れる scroll はみ出た部分が隠れてスクロールできる auto ブラウザーにより変動するラッシい 初期状態 横幅が5…
z-indexの使い方 キャプチャーのように、背面にある要素を前にだす事ができる .black{ z-index: 10; } .yellow{ } 黒の要素が前にくる
