What's New Qiita

20200524のCSSに関する記事は8件です。

  • 投稿日：2020-05-24T20:40:35+09:00

HTML/CSSの自分流基礎

HTMLの基礎

HTMLには、ブロック要素とインライン要素がある。
ブロック要素の中にインライン要素を書くことはできるけど、その逆はできない

ブロック要素同士を連続で書くと縦に並ぶことになります。 一方、インライン要素のタグを連続で書くと横に並びます。

属性について

id属性：様々なHTMLタグで使われる。要素に好きな「固有名」を付ける
class属性：様々なHTMLタグで使われる。要素に好きな「分類名」を付ける
src属性：imgタグ（画像を表示するタグ）で使われる。画像ファイルの置き場所を示す
href属性：aタグ（ハイパーリンク）で使われる。リンク先を示す

要素について

コンテンツエリア…内容が表示される部分
padding…要素の中に割り当てられている余白
border…要素の境界
margin…隣接する要素との余白

box-sizing

border-boxは指定したwidth,heightはborder,padding,コンテンツエリアの合計になる。

line-height

高さというよりは、行間を開けるイメージ

vertical-align

text-alignが水平方向で、vertical-alignは垂直方向

letter-spacing

文字の間隔の調整

float

floatを使うと横並びにできる、clear:bothとすればfloatをクリアできる。

flex

flexはfloatより自由に要素の位置を指定できる。
まず、要素の親にdisplay:flexと指定。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-24T17:29:40+09:00

Vue.jsで頑張るハンバーガーメニュー

はじめに

「ハンバーガーメニューは古臭い」

最近、僕はその言葉を聞く機会が増えた。
それでも、僕はハンバーガーメニューが好きだ。

確かに、ハンバーガーメニューにはメニュー項目を探しにくいという欠点がある。
しかし、コンテンツを表示するエリアを広く使える、つまり表示エリアをほぼ占領しないというメリットがあるので時と場合によってはまだまだ現役で使えると僕は思っている。

ということで、Vue.jsを使ってハンバーガーメニューを実装してみる('ω')

とりあえず、完成形はこんな感じになる。

Humberger-Google-Chrome-2020-05-23-19-10-24.gif

サンプルサイトはこちらから
https://helloworld753315.github.io/vue_hamburger/

GitHubのリポジトリはこちらから
https://github.com/helloworld753315/vue_hamburger

では、実際に手を動かしてみよう！！

参考ページ

必要な知識（使う知識）

  • HTML,CSS
  • Vue.js
    • classの操作
    • イベントハンドリング
    • トランジション

書く前に

まずは、classをバインドする方法の復習を少し...

class_bind.html
<div id="app">
    <h1 v-bind:class="{'color':color_bind}">色を変える</h1>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        color_bind:true
      }
    })
  </script>
style.css
.color{
  color: blue;
}

Vue.jsでclassを操作したい場合、v-bind:classを使うことでそれが可能になる。

例えば、上記のコードではcolorというclass名をcolor_bindというプロパティと結び付けている。
なので、color_bindがtrueならcolorクラスが付与され、falseなら付与されない。つまり、color_bindがtrueなら文字色が青になりfalseなら黒色のまま！

1.trueの場合

image.png

2.falseの場合

image.png

実際に書いてみる

だらだらと説明しても面白くないので、とりあえず完成形。

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hamberger</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="app">
    <!--ハンバーガーメニューのボタン-->
    <div class="hamburger_btn" v-on:click='ActiveBtn=!ActiveBtn'>
      <span class="line line_01" v-bind:class="{'btn_line01':ActiveBtn}"></span>
      <span class="line line_02" v-bind:class="{'btn_line02':ActiveBtn}"></span>
      <span class="line line_03" v-bind:class="{'btn_line03':ActiveBtn}"></span>
    </div>
    <!--サイドバー-->
    <transition name="menu">
      <div class="menu" v-show="ActiveBtn">
          <ul>
              <li><a href="#">項目1</a></li>
              <li><a href="#">項目2</a></li>
              <li><a href="#">項目3</a></li>
              <li><a href="#">項目4</a></li>
              <li><a href="#">項目5</a></li>
          </ul>
      </div>
  </transition>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        ActiveBtn: false
      }
    })
  </script>
</body>

</html>
style.css
/*ボタン*/
.hamburger_btn {
  position: fixed; /*常に最上部に表示したいので固定*/
  top: 0;
  right: 0;
  width: 70px;
  height: 72px;
  cursor: pointer;
  z-index: 50;
}

.hamburger_btn .line {
  position: absolute;
  top: 0;
  left: 20px;
  width: 32px;
  height: 2px;
  background: #333333;
  text-align: center;
}

.hamburger_btn .line_01 {
  top: 16px;
  transition: 0.4s ease;
}
.hamburger_btn .line_02 {
  top: 26px;
  transition: 0.4s ease;
}
.hamburger_btn .line_03 {
  top: 36px;
  transition: 0.4s ease;
}


.btn_line01 {
  transform: translateY(10px) rotate(-45deg);
  transition: 0.4s ease;
}
.btn_line02 {
  transition: 0.4s ease;
  opacity: 0;
}
.btn_line03 {
  transform: translateY(-10px) rotate(45deg);
  transition: 0.4s ease;
}

/*サイドバー*/
.menu-enter-active, .menu-leave-active {
  transition: opacity 0.4s;
}
.menu-enter, .menu-leave-to {
  opacity: 0;
}
.menu-leave, .menu-enter-to{
  opacity: 1;
}

.menu li {
  list-style: none;
  line-height: 1;
  padding: 1rem;
}
.menu {
  background-color: rgba(197, 197, 197, 0.671);
  z-index: 30;
  padding: 2rem 1rem;
  position: fixed;
  width: 20rem;
  height: 80rem;
  top: 0;
  right: 0;
}
.menu a {
  color: rgb(66, 66, 66);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0 2rem;
}
.menu ul{
  margin: 1rem;
  padding: 0;
}

必要な機能

Vueを使ってハンバーガーメニューを作るには、次の２つの機能が必要

  • ボタン
    • ボタンを押したときにボタンが×に変わる
    • もう一度押したときに元に戻る
  • サイドバー
    • ボタンが押されたらメニューを表示する
    • もう一度が押されたらメニューを閉じる
    • 表示切替のときのアニメーション

手順

共通部分

v-on:clickを使うと、イベントの制御ができるので「ボタンがクリックされたらActiveBtnの真偽値を逆にする（反転する）」という処理を書く。

v-on:click='ActiveBtn=!ActiveBtn'

ボタン

最初にやったv-bind:classを使ってActiveBtnがtrueだったらbtn_line01,
btn_line02,btn_line03のそれぞれのクラス属性を付与するようにする。
ざっくり表にするとこんな感じ。

ActiveBtn class属性
true 付与する
false 付与しない

あとは、cssで開閉時のアニメーションを書いていくだけ。

cssの方を簡単に説明すると、classが付与されたらtranslateとrotateでline_01とline_03の位置と角度を変更して、line_02の透明度を0にしているシンプルなものだ。

サイドバー

v-showディレクティブを使ってサイドバーの表示切替の部分を作ろう!
共通部分として作ったActiveBtnのデータをv-show="ActiveBtn"と書いて紐づける。
そうすることで、ボタンを押したときに表示を切り替えることが可能になる。

最後に、サイドバーの表示切替時のアニメーションを作ろう!

表示切替のアニメーションにはVue.jsのトランジションという機能を使う。
わからない方のためにざっくり説明すると、cssトランジション・アニメーションを簡単に使えるようにした機能だ。
使う際は、<transion>タグで囲んで使う。名前を付けられるので今回はmenuとしておく。

<transion>タグで囲んだ場所には、トランジションクラスを使ってアニメーションを適用できる。
対象をDOMに追加するとき（表示するとき）のアニメーションはenter~、DOMから削除されるとき（非表示にするとき）はleave~を使う。

言葉で説明してもわかりにくいので、簡単な図を使って見ていこう(;・∀・)

transiton_enter.png

transiton_leave.png

図を見ると、サイドバーを表示するときは、.menu-enterで透明度0から始めて.menu-enter-toで透明度が1へと変化しているのが分かる。
また、サイドバーを非表示にするときは、.menu-leaveで透明度1から始めて、.menu-leave-toで透明度1に変化している。

書いたコードはこんな感じだ。

.menu-enter-active, .menu-leave-active {
  transition: opacity 0.4s;
}
.menu-enter, .menu-leave-to {
  opacity: 0;
}
.menu-leave, .menu-enter-to{
  opacity: 1;
}

補足しておくと、enter-activeとleave-activeのところは透明度を0.4秒で変化させるという意味だ。

こんな感じの手順でコードを書いていけば、ハンバーガーメニューの完成(*'▽')

最後に

長々と書いてしまいましたが、以上です
普段はTwitterでいろいろ呟いたりしてるので何か聞きたいこと、指摘などあればどんどん送ってほしいです!
https://mobile.twitter.com/helloworld193

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-24T17:20:46+09:00

cssで縦書き

https://www.webcreatorbox.com/tech/writing-mode
参考記事。
p
{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
これでok

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-24T13:17:49+09:00

Day18~22 中間試験~基礎カリキュラム本試験

本試験で学んだことについて

本試験は5/22に突破。

学んだことは詳細は後日まとめる。

CSS上のwidth 100%と100vw、またheight 100%と100vhについて、詳しくまとめておきたい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-24T12:49:06+09:00

絶対配置で中央寄せにする方法

絶対配置の場合、margin 0 auto では、中央揃えにならないので、
どうすれば良いか、試行錯誤していたら、やっと中央揃えができたので、
備忘録として、記録しておく。

  <section class="modal"></section>


.modal {
 position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

left rightとそれぞれ0にする

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-24T12:39:32+09:00

fontawesomeのプロパティ

fontawesomeを使う時にサイズは位置の調整で
よくハマることがあったので備忘録としてメモしておきます。

スタイルシートであれこれするよりも
タグの中で指定したほうが管理が楽でした・・・

フォントサイズ

タグの中で以下のサイズ指定ができます。

    <i class="fas fa-star fa-xs"></i>.75em<br>
    <i class="fas fa-star fa-sm"></i>.875em<br>
    <i class="fas fa-star fa-lg"></i>1.33em<br>
    <i class="fas fa-star fa-2x"></i>2em<br>
    <i class="fas fa-star fa-3x"></i>3em<br>
    <i class="fas fa-star fa-4x"></i>4em<br>
    <i class="fas fa-star fa-5x"></i>5em<br>
    <i class="fas fa-star fa-6x"></i>6em<br>
    <i class="fas fa-star fa-7x"></i>7em<br>
    <i class="fas fa-star fa-8x"></i>8em<br>
    <i class="fas fa-star fa-9x"></i>9em<br>
    <i class="fas fa-star fa-10x"></i>10em<br>
    <i class="fas fa-star fa-11x"></i>11em<br>

Image from Gyazo

アイコンの回転

これもタグの中で回転を指定できます
twitterアイコンを回転させることはないと思いますが・・・

  <i class="fab fa-twitter"></i>通常<br>
  <i class="fab fa-twitter fa-rotate-90"></i>90度回転<br>
  <i class="fab fa-twitter fa-rotate-180"></i>180度回転<br>
  <i class="fab fa-twitter fa-rotate-270"></i>270度回転<br>
  <i class="fab fa-twitter fa-flip-horizontal"></i>水平反転<br>
  <i class="fab fa-twitter fa-flip-vertical"></i>垂直反転<br>
  <i class="fab fa-twitter fa-flip-both"></i>水平垂直反転<br>

Image from Gyazo

パルスとスピン

アイコンには点滅と回転のアニメーションをつけることができます。
向き不向きはありそうですね。

<div class="fa-2x">
  <i class="fas fa-spinner fa-pulse"></i>パルス<br>
  <p><i class="fa fa-spinner fa-spin"></i>スピン</p>
  <p><i class="fa fa-cog fa-pulse"></i>パルス</p>
  <p><i class="fa fa-cog fa-spin"></i>スピン</p>
</div>

Image from Gyazo

ボーダーで囲む

ボーダーで囲むことができるらしいですが結果が残念すぎました...

<div class="fa-4x">
  <p><i class="fab fa-twitter fa-border"></i></p>
</div>

Image from Gyazo

ここからはJSシートで読み込みが必要です

アイコンを重ねる

デザインによって外枠が欲しかったりする場合は２つのロゴを重ねられます

  <i class="fas fa-square"></i>これと
  <i class="fas fa-star"></i>これを
  <span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-star fa-stack-1x fa-inverse"></i>
  </span>重ねる

Image from Gyazo

アイコンのサイズを指定

背景の要素を無視してサイズを設定することができます。

  <!-- 全体サイズ指定 -->
  <div class="fa-8x">
    <!-- 縮みを設定 -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5" style="background:gray"></i>
    <!-- 無指定 -->
    <i class="fab fa-twitter" style="background:gray"></i>
    <!-- はみ出しを設定 -->
    <i class="fab fa-twitter" data-fa-transform="grow-8" style="background:gray"></i>
  </div>

Image from Gyazo

アイコンの位置調整

拡大縮小と配置を指定することもできます。

  <div class="fa-6x">
    <!-- 無指定 -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5" style="background:gray"></i>
    <!-- ５縮ませて左に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 left-6" style="background:gray"></i>
    <!-- ５縮ませて下に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 down-6" style="background:gray"></i>
    <!-- ５縮ませて右に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 right-6" style="background:gray"></i>
    <!-- ５縮ませて上に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 up-6" style="background:gray"></i>
  </div>

元気にはみ出していますね

Image from Gyazo

アイコンを重ねる

マスクを使ってアイコンを重ねることができます

<div class="fa-4x">
    <i class="fab fa-twitter" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
</div>

私はTwitter依存症ですというアイコンができました

Image from Gyazo

アイコンにテキストを入れる

少し強引ですがテキストを入れることもできます。

  <span class="fa-layers fa-fw">
    <i class="fas fa-comment"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-13" style="font-weight:900">message</span>
  </span>

Image from Gyazo

メールのカウンターを作る

組み合わせると下のようなメールのカウンターを作ることができます。

   <span class="fa-layers fa-fw" style="background:gray; width:80px;height: 80px;">
    <i class="fa-4x fas fa-envelope"></i>
    <span class="fa-3x fa-layers-counter" style="background:white;color: black;">245</span>
  </span>

Image from Gyazo

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-24T00:08:57+09:00

Spring Security loginページにcss適用できない(because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled)

Spring Securityを使用してloginページでcssを適用とした際に以下エラーが発生

console
Refused to apply style from 'http://localhost:8080/login' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
login.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/css/public/login.css}" rel="stylesheet" />

type="text/css"は不要だが念のため指定したりしても変化なし。
パスのエラーでもない。と少し悩んでいたところ・・・・

結論

Spring Securityでアクセス制限の対象になっていた。
セキュリティ対象外に追加してあげるとうまくいく。

SecurityConfig.kt
@Configuration
@EnableWebSecurity
class SecurityConfig : WebSecurityConfigurerAdapter() {

    override fun configure(web: WebSecurity) {

        // セキュリティ設定無視の設定
        web.ignoring().antMatchers(
                "/images/**",
                "/css/**"  // ←これを追加して解決
        )
    }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-24T00:08:57+09:00

Spring Security loginページにcss適用できない(MIME type ('text/html') is not a supported...)

Spring Securityを使用してloginページでcssを適用とした際に以下エラーが発生

console
Refused to apply style from 'http://localhost:8080/login' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
login.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/css/public/login.css}" rel="stylesheet" />

type="text/css"は不要だが念のため指定したりしても変化なし。
パスのエラーでもない。と少し悩んでいたところ・・・・

結論

Spring Securityでアクセス制限の対象になっていた。
セキュリティ対象外に追加してあげるとうまくいく。

SecurityConfig.kt
@Configuration
@EnableWebSecurity
class SecurityConfig : WebSecurityConfigurerAdapter() {

    override fun configure(web: WebSecurity) {

        // セキュリティ設定無視の設定
        web.ignoring().antMatchers(
                "/images/**",
                "/css/**"  // ←これを追加して解決
        )
    }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧