「HTML/CSS」カテゴリーアーカイブ

HTML/CSSに関する記事です。

HTML/CSS

[HTML][CSS]display flexを使い画像を配置する。

例：画像4つをdisplay flexを使って折り返すよう配置する。

●HTML
画像全体をdivで囲い、親要素としてclass=”flexImageBox”を設定する。
個々の画像に対して子要素としてclass=”flexImageItem”を設定する。

<div class="flexImageBox"> 
　<img src="../img/01.jpg" class="flexImageItem"> 
　<img src="../img/02.jpg" class="flexImageItem"> 
　<img src="../img/03.jpg" class="flexImageItem"> 
　<img src="../img/04.jpg" class="flexImageItem"> 
</div>

●CSS
○親要素.flexImageBoxに対する設定は主に配置や揃え方
display: flex;　　　　フレックス化する
flex-wrap: wrap;　　折り返しをする　これを設定しない場合は横一列に並ぶ
を今回は設定

.flexImageBox {
　　display: flex;
　　flex-wrap: wrap;
}

.flexImageItem {
　　padding:  10px;
}

そのほかに、
align-items:　 center 　縦方向に中央ぞろえ
justify-content: 　 flex-end; 　子要素を右寄せ
justify-content: space-between; 　 子要素を 等間隔配置　など有り

○子要素.flexImageItemに対する設定、主にそれぞれの幅の調整
padding: 10px;　個々の画像にパディングを設定

そのほかに、
width: 50%;と設定で個々の画像が全体の50%の幅となり、2列ずつの配置となる。

その他のCSS設定は以下も参考に
並び方の順序や揃え方を指定可能になる
https://web-bruno.com/flexbox-css3/
https://www.sejuku.net/blog/56401

HTML/CSS

[HTML][CSS]スマホでのテーブル表示、横スクロールできるようにする。

スマホでテーブルを表示した際に、縦に間延びしたり横にはみ出て見えなくなったりすることを防ぐ。テーブルが画面外にはみ出して横スクロールで見れるようにする。

[HTML]
横スクロールさせたいtableの前後をdivで挟みクラスを指定する（例）<div class=”tableScroll> 

<div class="tableScroll">
     <table>
              <tr>
                <th>都道府県名</th>
                <th>2014</th>
                <th>2015</th>
                <th>2016</th>
                <th>2017</th>
                <th>2018</th>
                <th>2019</th>
              </tr>
              <tr>
                <td>東京都</td>
                <td align="right">20</td>
                <td align="right">32</td>
                <td align="right">45</td>
                <td align="right">70</td>
                <td align="right">112</td>
                <td align="right">85</td>
              </tr>
     </table>
</div>

CSSに以下を記述する

.tableScroll{
overflow:auto;　/* テーブルをスクロールさせる */
}
.tableScroll{
width:100%;
}
.tableScroll::-webkit-scrollbar{
height: 5px; /* スクロールバーの高さ */
}
.tableScroll::-webkit-scrollbar-track{
background: #F1F1F1; /* スクロールバーの背景色 */
}
.tableScroll::-webkit-scrollbar-thumb {
background: #d6d6d6; /* スクロールバーの色 */
}
.tableScroll td, .tableScroll th{
white-space: nowrap; /* 文字の折返しを禁止 */
}

HTML/CSS, 未分類

[HTML]tdタグにrow span・row colspanで縦・横のセル合体

tdタグにrowspan=”数値”　で設定したタグから数値分の縦方向のセルを結合する。

<table border="1">
<tr>
<td rowspan="3">結合した</td>
<td>結合しない</td>
</tr>
<tr>
<td>結合しない</td>
</tr>
<tr>
<td>結合しない</td>
</tr>
</table>

結合した 結合しない
結合しない
結合しない

tdタグにcolspan=”数値”　で設定したタグから数値分の横方向のセルを結合する。 

<table border="1">
<tr>
<td colspan="2">結合したセル</td>
</tr>
<tr>
<td>結合しない</td>
<td>結合しない</td>
</tr>
</table>
結合する
結合しない 結合しない
HTML/CSS

[HTML・CSS]box-shadow（ボックスシャドウ、ドロップシャドウ）の注意点


Fatal error: Uncaught Error: Call to a member function id() on array in /home/users/2/happy-on/web/pzz.jp-blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php:34 Stack trace: #0 /home/users/2/happy-on/web/pzz.jp-blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(537): CrayonFormatter::format_code('', Array, Object(CrayonHighlighter)) #1 [internal function]: CrayonFormatter::delim_to_internal(Array) #2 /home/users/2/happy-on/web/pzz.jp-blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(515): preg_replace_callback('#()#msi', 'CrayonFormatter...', '<!DOCTYPE html ...') #3 /home/users/2/happy-on/web/pzz.jp-blog/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(187): CrayonFormatter::format_mixed_code('<!DOCTYPE html ...', Object(CrayonLang), Object(CrayonHighlighter)) #4 /home/users/2/happy-on/web/pzz.jp-blog/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(207): CrayonHighlighter->process() #5 /home/us in /home/users/2/happy-on/web/pzz.jp-blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 34