カルメラ焼き

カルメラ焼き

内部スクロールを行う

「overflow: auto;」の指定で内部スクロールを作成できる。 <style> .scroll{ height: 80px; overflow: auto; }</style><body> <div class="scroll"> あああああ <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

カルメラ焼き

    • 「table」を作成する

      「align」で配置場所を指定できる。 「width」で横幅を指定できる。 <body> <table border="1"> <tr> <th width="300" align="left">タイトル1</th> <th width="300" align="right">タイトル2</th> </tr> <tr> <td align="center">タイトル1データ1</td> <td>タイトル2データ1<

      カルメラ焼き

      • グラデーション「border-image-source」で角丸を作れない

        特に指定しない場合、角丸で表示される。 <style> .border{ padding: 20px; border: 10px solid blue; /* border-image-source: linear-gradient( 135deg, red, blue ); */ border-image-slice: 1; border-radius: 10px;}</style><body> <div class="border"></div></bod

        カルメラ焼き

        • 要素を固定表示する

          特に何も指定していない場合、 <style> .sita{ background-color: red; height: 20px; width: 100%; }</style><body> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div class="sita"></div></body>

          カルメラ焼き

        内部スクロールを行う

        カルメラ焼き

          英単語やURLを折り返すには

          英単語やURLは折り返されない <body> <div> aiueokakikukekosashisusesoaiueokakikukekosashisusesoaiueokakikukekosashisuseso aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div></body> 「word-break」の指定で折り返される。 「word-break: break-all;」では単語の途中であっても、枠内で折り返される。 <sty

          カルメラ焼き

          英単語やURLを折り返すには

          カルメラ焼き

          両端に要素を配置する

          <style> .ryotan { display: flex; justify-content: space-between; } .left-area { width: 20px; height: 20px; background-color: red; } .right-area { width: 20px; height: 20px; background-color: blue; }</style><bod

          カルメラ焼き

          両端に要素を配置する

          カルメラ焼き

          グラデーションを作る

          linear-gradient()で線形のグラデーションを作る。 <style>.linear-gradient { background: linear-gradient(red, blue); width: 500px; height: 300px;}</style><div class="linear-gradient"></div> radial-gradient()で円形のグラデーションを作る。 <style>.radial-g

          カルメラ焼き

          グラデーションを作る

          カルメラ焼き

          デザインを回転させる

          transform: rotate()で回転させることができる。 <style>.rotate { background-color: #00ff00; width: 50px; height: 50px; transform: rotate(-15deg);}</style><div class="rotate">aa</div> transform: rotateX()で軸を回転することも出来る。 <style>.rotate {

          カルメラ焼き

          デザインを回転させる

          カルメラ焼き

          cssで変数を使ってみる

          var()を使用すると、変数としてcssの値を定義することができる。 <style>:root { --main-text-color: red; // 変数 --main-bg-color: blue; // 変数}.main-text { color: var(--main-text-color);}.main-bg { background-color: var(--main-bg-color); width: 100px;}</style><div cla

          カルメラ焼き

          cssで変数を使ってみる

          カルメラ焼き

          cssで円グラフを作成

          cssで円グラフを簡単に作成することが出来る。 扇形グラデーションを作成できるconic-gradientを使用する。 <style>.circle-graph { background-image: conic-gradient(red 0% 10%, blue 10% 50%, green 50% 100%); // グラフの色 width: 200px; height: 200px; border-radius: 50%; // 形を円にする}

          カルメラ焼き

          cssで円グラフを作成

          カルメラ焼き

          横並びに表示させたいときは「display: flex」を使用する

          <div>タグで要素を作ると次の改行されてしまう... <div>あいうえお</div><div>かきくけこ</div> 「display: flex」を親要素に設定することで、横並びにすることが出来る。 <style>.display-flex { display: flex;}</style><div class="display-flex"> <div>あいうえお</div> <div>かきくけこ</div></div> 「display

          カルメラ焼き

          横並びに表示させたいときは「display: flex」を使用する

          カルメラ焼き