LemonteaのUnity部屋

UnityとかC#のおはなしです~

CSS はみ出した要素の処理 overflow

こんにちは。レモンティーです。

今回は、はみ出した要素をどう扱うかを選べる
overflowについてです。

この間このブログで
一つの記事を表示しているときは問題なくても
ブログのトップページで最近の記事が並んで表示されているときに
枠から中身がはみだすことがありました。

こんな感じです

わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。

したにある文ともかぶってしまいます





これを解決してくれるのがoverflowプロパティです。

overflowプロパティには以下のような値が設定できます

・visible…そのまま表示。背景色とかつけなければこれがデフォルトです。

・hidden…はみ出た部分は表示しません。

・scroll…はみ出た部分はスクロールでみれるようになります。

・auto…自動。しばしばスクロールになります。

visibleはデフォルトなので先ほどの例と同じです。
他の三つを実際にみてみます。

・hidden

わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。

・scroll

わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。

・auto

わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。


中身はこんな感じです

HTML

・hidden

<p class="test test1">わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。</p>

・scroll

<p class="test test2">わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。</p>

・auto

<p class="test test3">わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。</p>

CSS

.test{border:solid 2px black; width:180px; height:50px;}
.test1{overflow:hidden;}
.test2{overflow:scroll;}
.test3{overflow:auto;}


今回はこれでおしまいです
sawalemounity.hatenablog.com




CSS 要素が半透明に透ける opacity

こんにちは。レモンティーです。

今回は要素を半透明にします。
使うのはopacityです。

.test{opacity:0.5;}

のように書くと、指定した要素が透けます。

要素の透明度は0~1で指定でき、0に近いほど透明です。
アルファ値みたいですね。

さっそく↓を透けさせてみます。

Opacityテスト


opacity:1

Opacityテスト


opacity:0.8

Opacityテスト


opacity:0.5

Opacityテスト


opacity:0.3

Opacityテスト


opacity:0.1

Opacityテスト


opacity:0

Opacityテスト


1だと全く透過せず、0だと完全に透明で見えなくなってますね。


今回はこれでおしまいです。
sawalemounity.hatenablog.com




CSS 要素を隠す・非表示 display none と visibility hidden

こんにちは。レモンティーです。

今回は、CSSで要素の非表示をやります。
使うのは display : nonevisibility : hidden です。

これらはともに要素を見えなくしてくれますが違いがあります。
display : noneだと
そもそも存在しないかのように扱われますが

visibility : hiddenだと
表示されていた領域はあいかわらず確保されるので
本当にただ見えなくなる、という感じです。

実際にみたほうがピンときやすいかもしれません
↓の三つの四角のうち、真ん中の灰色のものを
両方のやり方で見えなくしてみます。

cubeAcubeBcubeC


display : noneの場合

cubeAcubeBcubeC


visibility : hiddenの場合

cubeAcubeBcubeC


確かにdisplay : noneの場合は無かったようになり
visibility : hiddenの場合は見えなくなっただけのようですね。

中はこうなっています

HTML

display : noneの場合
<span class="cube RED">cubeA</span><span class="cube GRAY dsp">cubeB</span><span class="cube BLUE">cubeC</span>

visibility : hiddenの場合
<span class="cube RED">cubeA</span><span class="cube GRAY vsb">cubeB</span><span class="cube BLUE">cubeC</span>

CSS

.RED{background:red;}
.BLUE{background:blue;}
.GRAY{background:gray;}
.cube{border:solid 2px black; margin:10px; padding:10px; color:white;}
.dsp{display:none;}
.vsb{visibility:hidden;}


肝心の、要素を見えなくしているのはこの部分ですね

.dsp{display:none;}
.vsb{visibility:hidden;}

これで、セレクタで指定した要素を非表示にできます。

今回はこれでおしまいです。

sawalemounity.hatenablog.com




CSS セレクタ ~ で以降の要素を指定

こんにちは。レモンティーです。

今回は~セレクタについてです。

これは↓のように書くと

X ~ Y{  }

X以降で同じ階層の全てのYにCSSを適用できます。
同じ階層、というのは親が同じということです。
つまりXと親が同じで、Xより後ろにあるYに適用されます。

たとえば次のような場合は…
HTML

<div>
<p>前のp(対象外)</p>
<a href="http://sawalemounity.hatenablog.com/archive">aタグ(記事一覧)</a>
<p></p>
<p></p>
<p></p>
<span>span(対象外)</span><br>
<p>p(間に別のタグ↑があっても関係なし)</p>
</div>

<div>
<p>別の階層のp(対象外)</p>
</div>

CSS

a ~ p{color:blue;}

…このようになります


前のp(対象外)

aタグ(記事一覧)

span(対象外)

p(間に別のタグ↑があっても関係なし)


別の階層のp(対象外)



たしかにaと同じ階層で後ろにあるpにだけ
CSSが適用されています。
関係あるのはこの条件だけで、あいだにspanやbrといった
別のタグがあってもなんら関係ありません。
慣れたら便利そうなセレクタですね。


今回はこれでおしまいです。


sawalemounity.hatenablog.com





CSS セレクタ + で隣接している要素を指定

こんにちは。レモンティーです。

今回は+セレクタについてです。

これを使うと
ある要素のうしろで隣接している要素にCSSを適用できます。

例えば

X + Y {  }

と書けば、
Xのうしろで隣接しているYにのみCSSを反映させられます。
(X Yの順番で隣接している場合に反映…といったほうが書式から見て直感的かも。)

次のような場合では…
HTML

<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>

CSS

div + p {color:blue;}

…↓のようになります。

p

p

div

p

p


今回はこれでおしまいです
sawalemounity.hatenablog.com





HTML リストをつくる olとulとli

こんにちは。レモンティーです。

今回はリストの作成についてです。
つかうのはOL・UL・Liの3種類のタグです。

OLOrdered Listの略で
名前の通り、順番に数字がついたリストです。

ULUnordered Listの略で
順番の数字無しのリストです。

Liタグはこれらのlistの内容です。

言葉ではピンときにくいので実際に見てみます

OL
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
UL
  • あいうえお
  • かきくけこ
  • さしすせそ

たしかに数字の有無が違いますね。
HTMLは↓のようになっていて、olとulが違うだけです。

<ol>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol>

<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>


さらにこれらにはTypeという属性があって
数字や黒丸を別のものに変更できます

まずはULからみてみます
ULの場合はTypeにはdisc,circle,squareのいづれかが設定できます。

例えばTypeをdiscにすると、↓のように黒丸になります。(デフォルトでした笑)

  • あいうえお
  • かきくけこ
  • さしすせそ
HTMLは↓のようになってます。

<ul type="disc">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>

他にもcircleで白丸、squareで四角になります。

↓circle

  • あいうえお
  • かきくけこ
  • さしすせそ

↓square

  • あいうえお
  • かきくけこ
  • さしすせそ


次にOLの場合です。
OLの場合はtypeには1、A、a、I、iのいづれかが設定できます
それぞれ
数字、アルファベット大文字、アルファベット小文字、ローマ数字大文字、ロー
マ数字小文字
になります

↓のような感じです。

typeが1の場合

  1. あいうえお
  2. かきくけこ
  3. さしすせそ
typeがAの場合
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
typeがaの場合
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
typeがIの場合
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
typeがiの場合
  1. あいうえお
  2. かきくけこ
  3. さしすせそ

今回はこれでおしまいです。
sawalemounity.hatenablog.com




CSS はてなブログのタイトル下にカテゴリのリンクをつける

こんにちは。レモンティーです。

今回は、タイトル下にカテゴリ別のリンクのボタンをつけます。

読者になってる他の方のブログとかを見てると
タイトル下におおまかなカテゴリごとのボタンがある方が
ちらほらいたわけです。

これが見る側からするとかなり便利なんですよね~。
というわけで思い切ってHTMLとCSSをかじってみることにしました。

PCで見ている方は今も上のほうに表示されていると思います。
こんなやつです。
f:id:sawalemontea:20171124112545p:plain
字体とかは環境によって異なるかもしれません
もしあまりにも見え方が違う方がいたら教えてくださると嬉しいです。


やり方は
①デザイン>カスタマイズ>ヘッダ>タイトル下 にHTMLでリンクを作る
②デザイン>カスタマイズ>デザインCSS に↑を飾るCSSを書く
です。後述のようなコードを直に書けます。

①のコードは

<a href="http://sawalemounity.hatenablog.com/entry/2017/10/27/160000"
   class="TopCategory">
    Unity
</a>

②のコードは

.TopCategory{
color:#4a3c24;
background:#ffffff;

font-size:30px;
font-family:cursive;
text-decoration:none;

border:solid 4px lightblue;
-webkit-border-radius: 10px;

padding:5px;
margin:7px;
}

.TopCategory:hover{
color:white;
background:blue;
}

となっています。

①はリンク本体です。これでシンプルなリンクができるのでそれをCSSで装飾します。
詳しい解説はここにあります。
sawalemounity.hatenablog.com

以下で紹介する②は①の装飾です

CSS自体についてはここにあります
sawalemounity.hatenablog.com

文字と背景の色を変えているのがこれらです
color:#4a3c24;
background:#ffffff;

自体を手書き風にしているのがこれです
font-family:cursive;
解説はここにあります
sawalemounity.hatenablog.com

これが文字の大きさを変えています。
font-size:30px;

text-decoration:none; は
リンクの下にでる線をけすためです…が、
はてなブログではデフォルトっぽいです。
書かなくていいと思いますが消し忘れていました笑

枠線を引いているのがこの部分です
border:solid 4px lightblue;
これはここに解説があります。
sawalemounity.hatenablog.com

そしてその枠線の角を丸めているのがこれです

余白や隣のボタンとの感覚はこの部分です
padding:5px;
margin:7px;
ここで説明されています
sawalemounity.hatenablog.com

マウスポインタが乗っている間だけ色をかえるのがこの部分です
.TopCategory:hover{
color:white;
background:blue;
}
これについてはここで解説しています
sawalemounity.hatenablog.com




今回はこれでおしまいです。
sawalemounity.hatenablog.com