What's New Qiita

20191001のCSSに関する記事は12件です。

  • 投稿日：2019-10-01T22:19:35+09:00

css　2

CSSとは一体、、、

これが挫折ですかそうですか。
HTMLは書けてもCSSが反応してくれません。
教材通りに進めているのに、、、

朝もう一度試してみましょう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T19:21:14+09:00

Sass で毎回 &:active, &:hover, &.active を書くのがめんどくさい

めっちゃ今更な気はするけど、いい加減めんどくさい。

monogu.sass
$hover: '&:active, &:hover, &.active'
a
  #{$hover}
    color: #06f
monogu.css
a:active, a:hover, a.active {
  color: #06f;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T18:48:07+09:00

Memo HTML Clearfix

Memo

Clearfix

sample
<div class="box1">box1
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</div>

<div class="box4">box4</div>
css
.box1 {
  width: 500px;
  border: 5px solid #000;
}
.box2 {
  height:100px;
  width: 100px;
  background-color:#999;
  float: left;
}
.box3 {
  height:100px;
  width: 100px;
  background-color:#777;
  float: left;
}
.box4 {
  height:50px;
  width: 100px;
  background-color:#555;
  float: left;
}
/*-- clearfix --*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

サンプルでの表示はfloatした要素の親要素の高さが無い状態

See the Pen RwbzYMP by abek922 (@abek922) on CodePen.

floatした要素の親要素にクラス名clearfixをつけてclearfixのCSSを適応

sample
<div class="box1 clearfix">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="box4"></div>

高さがとれる状態になる

See the Pen Clearfix_2 by abek922 (@abek922) on CodePen.

Clearfix

clearfix
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T15:39:19+09:00

使いたいテンプレートまとめ

テンプレートはあくまでもテンプレートとして
自分でカスタマイズやアレンジをして使ってみようという気持ちです

テンプレートも素材もたくさん見て学んで
自分で作れるようにしたい

JSで作りこんだ動きのあるサイトもつくってみたいので
よいサイトがあれば随時更新します

テンプレート

◇線の細いイラストと組み合わせて
　https://alicex.jp/oysm/74/

◇きれいなバナーと組み合わせて
　http://vmeer.55950.xrie.biz/?guid=on

◇自分で撮った写真と組み合わせて
　http://vmeer.99162.blog.xrie.biz/?guid=on

◇ブログっぽい見え方をする
　http://drop.37449.xrie.biz/?guid=on

◇配色の勉強に
　http://drop.18668.xrie.biz/?guid=on

◇自分でいじっていろいろと応用が利きそう
　http://drop.11190.xrie.biz/?guid=on

お手本サイト

お手本サイト集め
テキストサイトとは趣ちがうけど、とっても参考になる
https://www.manicyouth.jp/webdesign-matome-dressing-up/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T15:39:19+09:00

テキストサイトで使いたいテンプレート

テンプレートはあくまでもテンプレートとして
自分でカスタマイズやアレンジをして使ってみようという気持ちです

テンプレートも素材もたくさん見て学んで
自分で作れるようにしたい

JSで作りこんだ動きのあるサイトもつくってみたいので
よいサイトがあれば随時更新します

テンプレート

◇線の細いイラストと組み合わせて
　https://alicex.jp/oysm/74/

◇きれいなバナーと組み合わせて
　http://vmeer.55950.xrie.biz/?guid=on

◇自分で撮った写真と組み合わせて
　http://vmeer.99162.blog.xrie.biz/?guid=on

◇ブログっぽい見え方をする
　http://drop.37449.xrie.biz/?guid=on

◇配色の勉強に
　http://drop.18668.xrie.biz/?guid=on

◇自分でいじっていろいろと応用が利きそう
　http://drop.11190.xrie.biz/?guid=on

お手本サイト

お手本サイト集め
テキストサイトとは趣ちがうけど、とっても参考になる
https://www.manicyouth.jp/webdesign-matome-dressing-up/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T13:40:43+09:00

61日目 Flexboxが使えるようになりました！

Progateにflexbox編が追加されていたのでやってみました。
PC、タブレット、スマホと画面サイズが異なる場合に
自動的にサイズを変えられるボックスみたいです。

使い方

flexにしたい要素を適当なタグでかこむ。

<ul class="flex-list">
  <li class="li1">item1</li>
  <li class="li2">item2</li>
  <li class="li3">item3</li>
  <li class="li4">item4</li>
</ul>

CSSでflexを使うと宣言する。

.flex-list {
  display: flex;
}
.flex-list li {
  flex: auto;
}

タブレットの設定をする。

例）画面サイズが1000px以下だったら、次のCSSを実行

@media (max-width: 1000px) {
  .flex-list {
    flex-wrap: wrap;
  }
  .flex-list li {
    width: 50%;
  }
}

スマホの設定をする

例）画面サイズが670px以下の場合

@media (max-width:670px) {
  .flex-list {
    flex-direction:column;
  }

  .flex-list li {
    margin:0 auto;
  }
}

なるほど、こうやってレスポンシブサイトを作っているのですね。
面白かったです。
（所要時間 21分）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T12:08:15+09:00

ASP.NET: DropDownListのスタイル変更

SAMPLE

未選択
image.png

選択
image.png

REFERENCE

出典不明

html

<div>
    <asp:DropDownList ID="List1" runat="server" Width="200px" Height="100px" BackColor="#080808" ForeColor="#ffffff" Font-Names="Andalus" CssClass="ddl" Font-Size="30px" AutoPostBack="True" >
    <asp:ListItem Value="">MENU1</asp:ListItem>
    <asp:ListItem Text="ITEM1"></asp:ListItem>
    <asp:ListItem Text="ITEM2"></asp:ListItem>
    <asp:ListItem Text="ITEM3"></asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="List2" runat="server" Width="200px" Height="100px" BackColor="#080808" ForeColor="#ffffff" Font-Names="Andalus" CssClass="ddl" Font-Size="30px" AutoPostBack="True" >
    <asp:ListItem Value="">MENU2 </asp:ListItem>
    <asp:ListItem Text="ITEM1"></asp:ListItem>
    <asp:ListItem Text="ITEM2"></asp:ListItem>
    <asp:ListItem Text="ITEM3"></asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="List3" runat="server" Width="200px" Height="100px" BackColor="#080808" ForeColor="#ffffff" Font-Names="Andalus" CssClass="ddl" Font-Size="30px" AutoPostBack="True" >
    <asp:ListItem Value="">MENU3 </asp:ListItem>
    <asp:ListItem Text="ITEM1"></asp:ListItem>
    <asp:ListItem Text="ITEM2"></asp:ListItem>
    <asp:ListItem Text="ITEM3"></asp:ListItem>
    </asp:DropDownList>
</div>

css

.ddl
{
    text-align: center;
    border:2px solid #7d6754;
    border-radius:5px;
    padding:10px;
    -webkit-appearance: none; 
/*    background-image:url('Images/任意のファイル');*/
    background-position:88px;
    background-repeat:no-repeat;
    text-indent: 0.01px;
    text-overflow: '';
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T11:56:22+09:00

CSSを使ったアニメーション

はじめに

おはようございます。こんにちは。こんばんは。
ワタタクです。
WEBサイトの1部分をアニメーションさせたいと考えるとjavascriptやjQueryが必要になると思いますよね。
少し前だとFlashを使ってアニメーションさせるのが主流でした。
しかし、現在ではCSS3の機能拡充のおかげで難しいjavascriptやjQueryやFlashなどを使わなくてもアニメーションさせることも可能です。
(アニメーションをおこなうタイミングを指定するとなると、javascriptやjQueryが必要になります。)
「簡単にアニメーションをつくりたい」「かっこいい動きを簡単に実装したい」という方にCSSでのアニメーションがおすすめです。
なので今回は、CSSを使ったアニメーションについて説明します。

keyframesを理解する

CSSアニメーションを使用する上で必要になるのが、keyframesです。
keyframesは、開始から終了までどのようなアニメーションをするのかを指定できるCSSになります。

keyframesを使用することで、より細かいアニメーションの変化やタイミングなどを指定できます。

記述法

@keyframes 任意の名前 {
    from {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }

    to {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
}

※fromがアニメーション開始時、toがアニメーション終了時
また、下記のように%指定でも記述可。

@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }

    　50% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }

    100% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
}

keyframesを使うときは、下記のように記述します。

animation-name: 任意の名前;

CSSアニメーションのプロパティを理解する

CSSアニメーションを実装するにはいくつもあるCSSアニメーションのプロパティを理解しなければなりません。

animation

animationプロパティでは、 animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction の6つのプロパティの値を、スペースで区切って指定することができます。
6つのプロパティは後述
省略された値はそれらの初期の値に設定されます。

＜初期値＞

  • animation-nameはnone
  • animation-durationは0
  • animation-timing-functionはease
  • animation-delayは0
  • animation-iteration-countは1
  • animation-directionはnormal

animation-durationプロパティ

アニメーションの時間を設定するのが、「animation-duration」です。
これは、アニメーションが始まって終わるまでの時間を指定します。
animation-durationは「s」もしくは「ms」で記述します。
「s」は、「1s」で1秒、「ms」は「1000ms」で1秒です。
このようにアニメーションを速くさせたり遅くさせたりできるのが、「animation-duration」の特徴です。

注意点)
値が「0」のときの記述です。

「padding」「margin」「top」「bottom」「left」「right」などは値が「0」のとき「0」と記述すれば大丈夫ですが、「animation-duration」の場合値が「0」のときは「0s」と記述しなければなりません。

animation-iteration-countプロパティ

「animation-iteration-count」は、アニメーションさせる回数を指定します。
仮に、アニメーションを3回したい場合は「animation-iteration-count: 3;」と記述すれば大丈夫です。

無限に繰り返したい場合は、「infinite」と指定することで繰り返しアニメーションが再生することが可能です。

animation-timing-functionプロパティ

animation-timing-functionは、アニメーションの変化の度合いを指定できるプロパティです。

「animation-duration」の値で有名なのは、以下の5つです。

  • ease(初期値)・・・アニメーションの開始時と終了時はゆっくりと変化する
  • ease-in・・・アニメーションの開始時はゆっくりと変化して、終了時は速く変化する
  • ease-out・・・アニメーションの開始時は速く変化して、終了時はゆっくりと変化する
  • ease-in-out・・・「ease」よりもアニメーションの開始時と終了時はとてもゆっくりと変化する
  • linear・・・アニメーション開始時から終了時まで一定に変化する 初心者の方はこの5つを中心に設定するのがおすすめです。

しかし、設定できるアニメーションの変化はコレだけではありません。
こちらのサイトでは様々な「animation-timing-function」の設定を紹介しているので、ぜひ参考にしてください。
https://easings.net/ja
また、「animation-timing-function」は用意された設定だけでなく、自分でオリジナルの設定をつくることも可能です。
オリジナルの設定は、easingのベジェ曲線を使って設定可能です。

ベジェ曲線の作成方法は、大きく分けて2つあります。

1つ目の方法は、Chromeの開発者ツールを使う方法です。
2つ目の方法がeasingのベジェ曲線のジェネレーターを使用する方法です。

このサイトを利用することで、自分の制作したいベジェ曲線を制作できます。
http://cubic-bezier.com/#.17,.67,.83,.67

animation-delayプロパティ

animation-delayプロパティは、アニメーションの開始時間を指定できるプロパティです。

animation-directionプロパティ

animation-directionプロパティは、アニメーションの指定方向を設定できるプロパティです。

animation-directionプロパティの値は以下の4つがあります。

  • normal(初期値)・・・指定した方向にアニメーションが毎回再生される
  • reverse・・・指定した方向とは逆のアニメーションが毎回再生される
  • alternate・・・指定した方向→指定した方向とは逆の方向の順番でアニメーションが毎回再生される
  • alternate-reverse・・・指定した方向とは逆の方向→指定した方向でアニメーションが毎回再生される

animation-fill-modeプロパティ

animation-fill-modeプロパティは、アニメーション開始前と終了後のスタイルを指定できるプロパティです。

animation-fill-modeプロパティの値は、以下の4つがあります。

  • none(初期値)・・・アニメーションの開始前と終了後には、指定したスタイルが適用されない
  • forwards・・・アニメーション終了後には、指定したスタイルが適用される
  • backwards・・・アニメーション開始時のスタイルがアニメーション開始前にも適用される
  • both・・・アニメーション開始時のスタイルがアニメーション開始前にも適用され、アニメーション終了後には、指定したスタイルが適用される(forwards+backwards)

以上。

最後に

最後まで読んでいただきありがとうございました。
もし間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T11:39:15+09:00

HTML & CSS (Flexbox編)

Flexboxとは

・縦、横並びができる。
・折り返しを付けられる。

横並び

display:flex

　指定した要素の子要素を横並びにする。
　↓
　親要素(ul)にdisplay:flexをかける。
　子要素(li)が横並びになる

ul {
 display:flex;
}

flex:auto

　要素の幅を親要素に合わせて伸縮させることができる。
　↓
　子要素(li)にflex:autoをかける。

ul {
 display:flex;
}
li {
 flex:auto;
}

flex-wrap:wrap

　子要素のサイズ(width)に応じて折り返す。
　↓
　親要素にflex-wrap:wrap
　子要素にwidthを設定する。(%で)

例えば、2列にしたいときは、子要素にwidth:50%;を付ける。

縦並び

flex-direction:column

　子要素を上から下へ並べる。
　↓
　親要素にflex-direction:columnを付ける。
　子要素にmargin:0 auto、widthを設定すると中央寄せできる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T10:04:15+09:00

メニューじゃないハンバーガーを作れるCSSをつくった。

CSSのチェックボックスなら、「チェックが入ってたら~する」って指定を行えば、
JSのクリックイベントのような使い方が出来る。

例えばハンバーガーメニューも作れる。
CSSだけで簡単にドロワーメニュー(ハンバーガーメニュー)を作る - Qiita

そしてわたしはついにハンバーガーも作れるのではと気づいてしまった、、、

See the Pen ハンバーガーが食べたいので作った by himeka223 (@himeka223) on CodePen.

できてしまった、、、

ハンバーガーを作る

image.png

<div class="hamburger">
    <div class="hamburger__body">
    <div class="topping--letus"></div>
    <div class="topping--meet"></div>
    <div class="topping--tomato"></div>
    <div class="topping--cheese"></div>
  </div>
</div>

かんたんに、構造

.hamburger…ハンバーガー自体の土台となる。
.hamburger__body…ハンバーガー自体。afterbeforeでパンの部分を指定。
.topping--{具材}…トッピング。

重なりについて

重なっていくトッピングを表現するのに、トッピングをpositionで指定しようとしたが
これだと、下のトッピングを抜いたのに、上のトッピングの位置が変わらなくなってしまう。

例えば、トマトが嫌いでトマトを抜いたら、上のチーズが浮いたままになってしまう。
そんなハンバーガーは美味しくなさそう。

★flexboxで子要素の順番を逆にする指定をする

マイナスマージンとかを使ってみるとわかるように、
HTMLは下の要素が手前に重なっていく。
↓こんな感じで下にある要素が手前に重なる。
.png

そこでflexboxの子要素の順番を逆にする指定を使い、
見た目と逆に書いたHTMLをそのまま逆にすることで、
下の要素が手前に重なっていったのをそのまま逆転させる。

flex-direction: column-reverse;
display: flex;

チーズ
トマト
肉
レタス

こうゆうふうに重ねたいから

レタス
肉
トマト
チーズ

と記載する。

そしてトッピングたちにマイナスマージンを指定して、重ねていく。

ハンバーガー自体の位置の調整

このままだと、トッピングしたときに下にバーガーが動いてしまう。
image.png
ハンバーガー自体をpositionで下に揃えることで、トッピングしても上へ重なっていくようになる。

position: absolute;
bottom: 0;
left: 0;

パンを作る

上と下のパンは、hamburger__bodyのbeforeとafter要素で作られている。

    &:after,
    &:before{
      content: " ";
      width: 100px;
      background-color: $bun;
    } 
    &:before{
      display: block;
      height: 20px;
      border-radius:30% 30% 40% 40%;
      box-shadow:0 -8px 0 0px darken($bun,8%) inset; 
    }
    &:after{
      display: none;
      margin-bottom: -10px;
      height: 30px;
      border-radius:50% 50% 40% 40%/70% 70% 40% 40%;
      box-shadow:0 -6px 0 0px darken($bun,8%) inset;
    }
  }

重なりについて説明したように、flexboxの子要素の順番を逆にする指定で、htmlの記述とは逆に表示されるので

before要素…下のパン
after要素…上のパン

の指定になる。

★after要素で上のパンを作る

まず、高さ20pxの長方形を作成。

border-radiusでパンの丸みを表現する。

border-radius:50% 50% 40% 40%/70% 70% 40% 40%;

border-radiusは角丸の半径の指定である。
左上・右上・右下・左下の順で指定。
/で区切ることで、水平方向/垂直方向の指定ができる。

box-shadowで影をつける。

box-shadow:0 -8px 0 0 darken($bun,8%) inset;

影の指定方法は
box-shadow:横の位置 縦の位置 影のぼかし度 影の広さ 色 insetで中へ影を広げる;
となる。
darken($bun,8%)はSCSSの機能で$bun（変数で色コードを指定）を8%暗くした色になる。

★before要素でも下のパンを作る

作り方は上のパンと同様
角丸を平たくして平たいパンにした。

トッピングをつくる

トッピングは基本としては平たいパンと同じ。

width: 100px;
height: 20px;
margin-bottom: -10px;
border-radius:30% 30% 40% 40%;

高さ20px幅100pxで、丸みを付ける。

margin-bottom: -10px;とすることで、重ねることができる。

★チーズを作る

image.png

&--cheese{
    @extend %topping;
    background-color: $cheese;
    height: 10px;
    box-shadow:0 0px 0 2px $cheese ;
    &:after{
      display: block;
      content: " ";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20px 50px 0 50px;
      margin-top:5px;
      border-color: $cheese transparent transparent transparent;
    }
  }

基本は普通のトッピングと同じ。

左右のトロッとした部分は、
box-shadow:0 0px 0 2px $cheese ;でチーズを他のトッピングより大きくして表現。
widthでサイズを変えなかったのは、中央からおおきくしたかったため。
widthだと、左を支点として、右に大きくなってしまう。

チーズの前のトロッとした部分は、
after要素で表現する。

borderプロパティで三角形を作り

border-style: solid;
border-width: 20px 50px 0 ;
border-color: $cheese transparent transparent transparent;

margin-top:5px;で少し下にずらしている。

★レタスを作る

image.png

こちらのサイトを参考に作りました。

  &--letus{
    @extend %topping;
    height: 15px;
    background-color:$letus;
    background:
      linear-gradient(-45deg, darken($letus,4%) 10px,  darken($letus,0%) 0) 10px;
    background-color: $letus;
    background-position: left bottom -3px;
    background-repeat: repeat ;
    background-size: 10px 20px;
  }

45°のグラデーションをぼかし無しでつけて、そのサイズを決めてリピートさせることでギザギザを指定する。

ボタンの装飾

CSSで作る！押したくなるボタンデザイン100（Web用）
こちらのコードをそのまま使用させていただきました。
作り方は割愛。

inputとlabelを連動させる

<input id="letus" type="checkbox">
<!-- ~省略~ -->
<label class="button" for="letus">letus</label>

inputとlabelはidとforを同じ値に指定することで紐付けることができる。
これでfor="letus"のlabelをクリックすると、id="letus"のinputのチェックをつけることができる。

#bun,#cheese,#tomato,#letus,#meet{
  display: none;
}

inputのチェックボックスは必要ないのでdisplay: none;で非表示にする。

:checkedでチェック後の動作を指定

#letus:checked~{
  .hamburger{
    .topping{
      &--letus{
        display: block;
      }
    }
  }
  .button-area{
    .button[for="letus"]{
      /*ボタンを押したとき*/
        -webkit-transform: translateY(4px);
        transform: translateY(4px);/*下に動く*/
        box-shadow: 0px 0px 1px rgba(red, 0.2);/*影を小さく*/
        border-bottom: none;
    }
  }
}

まず、#letus:checkedとすると、#letusにチェックが入ってた場合の動作を指定できる。
~セレクタは、すべての隣接する要素なので、
隣接している、.hamburgerの.topping--letusを表示するという動作にが実行される。

ボタンも、同様に指定している。

まとめ

ハンバーガーがおいしそうだから、作るのが楽しかった
マクドナルドの、一番安い薄いハンバーガーがたべたくなった

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T08:19:15+09:00

CSSもスタート

あれですね

最初にトマトとかナスとかきのことか食べた人すごいとか思ってたけど、、、

初めてコードを書いた人はヤバイ
それをルールとして作った人もヤバイ
それを使いこなしてる人達って、、、
なんでも無いです。

完璧な答えはないのに成り立つ不思議な世界

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T01:06:13+09:00

【エラー】HTMLのメニューアイコンが表示されない

練習用のメニューをchromeで開くとアイコンが表示されない
エラーが発生

error1.png

今回学習した項目

  • HTML5
  • CSS

エラーの原因を調査

F12を押下しElementsからアイコンのソース部分を確認。cssファイルの【content: '\f0c9';】の箇所にあたりをつけてぐぐったらFont Awesomeというワードを検索。
　Font Awesomeというフォントを使用したい場合下記のコードをヘッダーに記述しサイトから直接、CSSを読み込ませるとアイコンが正常に表示された。

　記述するコード

xxxx.html
 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

error2.png

所感

　今回のエラーは解決するのにあたりを早めにつけ解決することができた。しかし、Font Awesomeなどのネット上から直接CSSを読み込ませることが知識としてなくCSSの学習が足りないことも実感した。

参考URL

https://web-design-cafe.com/archives/320
https://fontawesome.com/icons?from=io

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧