
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
ITコラム
2017.05.19
visibilityプロパティは、HTML要素の表示(visible)と非表示(hidden)を指定する際に使用するプロパティです。
非表示の指定をした場合でも、要素の領域は確保されているので、ページのレイアウトに影響を及ぼすことはありません。
今回は、visibilityプロパティについてまとめたいと思います。
1.visibilityプロパティの値
2.visibility: hidden と display: none
3.visibility: collapse
visibilityプロパティの値は、次の通りです。
visible デフォルト値
表示するhidden 非表示にする collapse テーブルのセルを非表示にする
(テーブル専用の値で、他の要素に使うとhiddenと同じ結果となる)
visibilityプロパティの値は、継承されます。
また、visibilityプロパティは、全ての要素で使用できます。
visibilityプロパティにhiddenを指定すると、要素が非表示になります。
そして、displayプロパティにnoneを指定しても、要素が非表示となります。
両者は、要素が非表示になる際にその要素の領域がどうなるかという点で違いがあります。
display: noneは、領域ごとなくなりますが、visibility: hidden は、領域を残したまま要素のみ非表示となります。
3つのsection要素の内、真ん中の要素をvisibility:hiddenとdisplay:noneによってそれぞれ非表示に指定すると、次のように表示されます。
ソースは次の通りです。
(CSS) div#sample {margin:0; padding:0;} div#sample section { display: inline-block; text-align:center; margin:0 10px 0 0; border-radius:10px; padding:1em; width:20%; background:pink;} /*visibility:hiddenで非表示にする場合*/ div#sample section:nth-child(2) {background:skyblue; visibility:hidden} /*display:noneで非表示にする場合*/ div#sample section:nth-child(2) {background:skyblue; display:none} div#sample section:nth-child(3) {background:tomato} (HTML) <div id="sample"> <section>1</section> <section>2</section> <section>3</section> </div>
visibilityプロパティにcollapseを指定すると、テーブルのセルが非表示になります。
キーワードのcollapseは、テーブル関連の要素専用の値です。
(テーブル関連の要素以外の要素にcollapseを指定すると、visibility:hiddenと同じ結果となります。)
テーブルでカレンダーを作成する際に、当月の日付が入らないセルを非表示にすると、すっきりとした見た目になりますs。
2017/5 | ||||||
---|---|---|---|---|---|---|
日 | 月 | 火 | 水 | 木 | 金 | 土 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
ソースは次の通りです。
(CSS) table#sample { background:whitesmoke; margin: 0; padding:0; table-layout:fixed; border-spacing:5px; width:100%;} table#sample tr th, table#sample tr td {text-align:center;} table#sample tr th { font-size:120%; background:rgba(255,255,255,0.5);} table#sample tr td { padding:5px; background:white;} table#sample tr.youbi td {font-size:small; padding:1px; background:pink; border:none;} table#sample tr td:nth-child(1) {background:tomato;} table#sample tr td:nth-child(7) {background:skyblue;} table#sample tr.hide, table#sample tr td.hide {visibility:collapse;} (HTML) <table id="sample"> <tr> <th colspan="7">2017/5</th> </tr> <tr class="youbi"> <td>日</td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> <td>土</td> </tr> <tr> <td class="hide">30</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> </tr> <tr> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td colspan="3" class="hide"></td> </tr> </table>
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.