What's New Qiita

20190523のCSSに関する記事は10件です。

  • 投稿日：2019-05-23T23:23:56+09:00

左に寄せつつ、左にスペースを保ちつつ、左のスペースは縮み、要素を折り返すCSS

https://codesandbox.io/embed/vue-template-oheq5

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

実装したcssまとめ

画像の指定

background:url(asset_path('present.png')) no-repeat;

画像のサイズ

background-size: 60%;

要素の位置を相対的に指定

position: relative;

要素の位置を絶対的に指定

position: absolute;

行の高さを指定

line-height: 16px

高さを自動で

height: auto;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-23T22:48:15+09:00

フロントエンド未経験のSEがポートフォリオ作ってみた

はじめに

普段はSEとしてJavaでバックエンドの開発を行っているのですが、最近フロントエンドの学習を始めました。
学習の一環として自身のポートフォリオを作成しました！
私と同じ様にフロントエンドの経験が浅い方で、何か作ってみたいと考えている方の参考になれば幸いです。

作ったもの

https://masayuki777.github.io/
portfolio.png

作り方

以下の記事を参考にしてテンプレートベースに作成を行いました！
・エンジニアでポートフォリオ作りました
・うちゅういちかんたんなポートフォリオのつくりかた

↓テンプレートはこちら
・テンプレート
スクリーンショット 2019-05-23 22.39.57.png

編集したのはhtml(index.html)とcss（style.css）で後は画像の差替えなどです。

アイコンは以下のサイトのもを利用しました。
https://fontawesome.com/
スクリーンショット 2019-05-23 22.37.20.png
無料で利用できるのと登録などが不要な点が良かったです。

また、ヘッダーのグラデーションに関しては以下のサイトのCSSを利用しました。
https://uigradients.com/#Lunada
右上のGet cssからCSSをコピーして利用できる点が良かったです。

ホスティングに関してはgithub.ioを利用しました。
公式サイトは以下ですが、他にも分かりやすくまとめられている記事はたくさんあるので簡単に公開できました。
https://pages.github.com/

まとめ

今回初めてWEBサイトを作成したのですが、学ぶことが多くとてもいい経験になりました。
中身はスカスカですし、実力不足でデザインを諦めた部分もあるので、継続的にアップデートしていきたいと思います。（小さく作って大きく育てるの精神大事）

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

CSSセレクター

セレクターの基本書式

書式 内容
* すべての要素
要素名 要素名の要素
.クラス名 クラス名をつけた要素
#id名 idをつけた要素

セレクター同士の関係を指定する書式

書式 内容
セレクター, セレクター 列挙された複数のセレクター
セレクター セレクター 下の階層の子孫要素
セレクター > セレクター 直下の階層の子要素
セレクター + セレクター 同じ階層で直後に隣接している要素
セレクター1~セレクター2 セレクター1からセレクター2までの要素

セレクターの属性による指定書式

書式 内容
要素[att] 特定の属性名を持つ要素
要素[att="val"] att属性にvalという値を持つ要素
要素[att~="val"] att属性の値候補val(ホワイトスペース区切り)に一致した要素
要素[att ="val"]
要素[att^="val"] att属性の値がvalで始まる要素
要素[att*="val"] all属性の値にvalを含む要素
要素[att]$="val" att属性の値がvalで終わる要素

位置や状態を指定する書式

書式 内容
要素:root ルートとなる要素
要素:nth-child(n) n番目の子となる要素
要素:nth-last-child(n) 後ろからn番目となる要素
要素:nth-of-type(n) n番目のその種類の要素
要素:first-child 子として最初の要素
要素:last-child 子として最後の要素
要素:first-of-type 最初のその種類の要素
要素:last-of-type 最後のその種類の要素
要素:only-child 子として唯一の要素
要素:only-of-type 子として唯一の種類の要素
要素:empty 要素内容が空となる要素
要素:lang(code) 特定の言語にcodeを指定された要素
要素:not(s) s以外の要素
要素:enabled 有効となっている要素
要素:disabled 無効となっている要素
要素:checked チェックされている要素
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-23T19:24:30+09:00

value を変えずに input に3桁カンマを振る

value を変えずに input に3桁カンマを振る

「数値に3桁カンマを振りたい」って要望は結構あって、ググると js で value 自体をゴリゴリいじる実装が多いですが、今回はちょっと違ったアプローチをしてみます。

コード

<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<style>
    /* number-input と number-overlap をまとめるコンテナ */
    .number-container {
        position: relative;
    }

    /* カンマ区切りにしたい input 要素 */
    .number-input {
        position: relative;
    }
    /* 普段は z-index:1 で number-overlap の後ろに居る。色は被ってしまうので transparent */
    .number-input:not(:focus) {
        z-index: 1;
        color: transparent;
    }
    /* フォーカス中は z-index:3 で number-overlap の前に来る。色も戻す */
    .number-input:focus {
        z-index: 3;
        color: #555;
    }

    /* number-input に覆い被さる要素。 pointer-events:none でクリックを透過させる */
    .number-overlap {
        position: absolute;
        top: 1px;
        left: 0px;
        display: inline-block;
        background: transparent;
        width: 100% !important;

        pointer-events: none;
        z-index: 2;
    }
</style>
<script>
    $(function () {
        // フォーカスを抜けたり値が変わったりしたら覆い被さっているテキストをカンマ区切りにする
        $('#hoge').on('blur change input', function () {
            const $this = $(this);
            if ($this.val() !== '') {
                $this.next().text((+$this.val()).toLocaleString());
            }
        });
    });
</script>

<form class="form-inline">
    <div class="form-group">
        <div class="number-container">
            <input type="text" id="hoge" name="hoge" class="form-control number-input" placeholder="自動でカンマが付きます">
            <span class="number-overlap form-control"></span>
        </div>
    </div>
</form>

</body>
</html>

殴り書きしたのでかなり荒いですが、コメントを読めば何をしているかは分かると思います。
一応説明を加えると下記のような感じです。

.number-container

position で要素を重ね合わせる必要があるので、そのためのコンテナです。
それ以上の意味は特にありません。

.number-input

input に付与します。
普段は z-index で後述の .number-overlap の後ろに隠れていますが、フォーカスすると前面に出てきます。

.number-overlap

実際に3桁カンマの文字列が設定される要素です。
普段は z-index で前述の .number-input に被さっていますが、フォーカスされると後ろに引っ込みます。
pointer-events:none なのでクリックを透過します。これが今回のキモです。これによって「被さっているんだけど後ろの要素がクリック（フォーカス）できる」が実現できます。

javascript

フォーカスとか見え方とかは css だけで完結しますが、「カンマを振る処理そのもの」はどうしても js の力を借りる必要があるのでそれをしています。
できれば html + css だけでやりたい・・・。

注意点

ただし上記はかなりサボっています。実際はいろいろ調整しないと使い物になりません。

まず .number-overlap のスタイルは number-input に完全に合わせる必要があります（padding や font-size など多岐にわたる。合わせないとすぐズレる）。
上記は bootstrap を使っていますが form-control は input に限定されないので流用してるだけです。しっかりやろうとすると結構めんどくさいです。
実際、上記は chrome で確認しましたが、他のブラウザではズレたりします。そういった微調整が必須になります。

また、個人的に数値入力は type=number を使うことが多いです。さらに右寄せにしたいですが、スピンボタンがくっつくのでブラウザごとの調整が必要です（幅がブラウザごとに全く異なります）。
正直かなり大変なので、いっその事スピンボタンは消したほうが良いです。

js サイドも上のコードだと数値以外を入れると NaN になるので、もっといろいろな分岐が必要です。
NaN は type=number でサボったり出来ますが e の罠があったりして、正直「ロケール指定ができる type=number があればいいのに・・・」と思います。

まとめ

注意点で記載した所が調整・クリアできれば変換の面倒をまったく見なくて済むようになるので結構有用だと思います。
（js で値をゴリゴリいじるのはなんか好かん）。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-23T18:50:02+09:00

【Sass】導入と使い方

はじめに

ポートフォリオを作るにあたりcssを書こうと思ったのですが、
sassというものがあると知ったので導入しました。
途中、エラーが出たところもまとめます。

sassとは何か

sassの導入

私はmacを使っているのでRubyの導入では何もしてません。

sassインストール

Sassを使ってCSSを爆速コーディング！Sassの導入方法と使いかた。に書いてある通り、
下記コマンドを実行するが

$ gem install sass

ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory.

エラー...

gem installでpermissionエラーになった時の対応方法
こちらの記事の現状確認と同じコマンドを実行すると、全く同じ結果が返ってきました。

なので私もrbenvというやつを入れます。（rubyのバージョン管理をしてくれるものなのかな..）
記事の通り、最新版のrubyをインストールしたので、私の場合は2.6.3です。

$ rbenv install 2.6.3

$ rbenv versions
* system (set by /Users/hoge/.rbenv/version)
  2.6.3

この後からは先ほどの記事とは違うことを行いました！

記事では、rbenvでインストールしたrubyのバージョンをglobalにしていますが、
他のアプリに影響を与えたくないので今回はlocalで利用します。

$ cd ver2.6.3のrubyを使いたい作業ディレクトリ
$ rbenv local 2.6.3

$ rbenv versions
  system (set by /Users/hoge/.rbenv/version)
* 2.6.3

その後パスを通します。
~/.bash_profileにeval "$(rbenv init -)"を追記します。

パスを更新したいので、

$ source ~/.bash_profile
$ ruby -v
  ruby 2.6.3

できました！

今回はglobalでなくlocalにしているので、
rbenv local 2.6.3コマンドを実行したディレクトリ下でのみこのバージョンが適応されます。

今度こそSassインストール

$ gem install sass

できた...

使い方

Sassを使ってCSSを爆速コーディング！Sassの導入方法と使いかた。
こちらの記事の実際に使ってみるを参考にしました！
私はscssにしました。

参考にしたサイト（ありがとうございます><）

これからはcssはSassで書こう。
Sassを使ってCSSを爆速コーディング！Sassの導入方法と使いかた。
gem installでpermissionエラーになった時の対応方法
rbenvでバージョンがうまく切り替わらなかった時にやったこと

使ってみて

cssで書くよりもきれいに書けるのと、みやすいのでこれからもガンガン使っていきたいです！
参考になるサイトがたくさんあって助かりました。ありがとうございます。

ポートフォリオサイトを少しだけ更新しました。
FontAwsomやtwitterタイムラインを載せたので、手順やメモをまた投稿しようと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-23T16:41:11+09:00

CSSだけで「もっと見る」ボタン(使い切り)を実装

こんなときに使える

  1. 連続するアイテムがあり、その表示数を最初の数個に制限し、それ以降を隠したい。
  2. 「もっと見る」ボタンを置いておき、それを押すことで全表示させる。
  3. 「もっと見る」ボタンは押すと消え、折り畳む必要はなし。使い切りタイプ。
  4. jsは使わず、cssだけでサラッと作りたい。

ソースコード (pug, scss

.wrap
  input.check#isMore(type="checkbox", name="")
  label.label(for="isMore") もっと見る
  .itemWrap
    .item アイテム1
    .item アイテム2
    .item アイテム3
    .item アイテム4
    .item アイテム5
    .item アイテム6
    .item アイテム7
    .item アイテム8

.wrap {
  position: relative;
}

.itemWrap {
  margin: 30px auto;
}
.item {
  color: #fff;
  width: 100px;
  height: 100px;
  background-color: #555;
  margin: 0 auto 30px;
  &:nth-child(n+5) {
    display: none;
  }
}

.check {
  display: none;
  &:checked {
    & + .label {
      display: none;
    }
    & ~ .itemWrap .item:nth-child(n+5) {
      display: block;
    }
  }
}
.label {
  border: 1px solid #444;
  padding: 8px 12px;
  border-radius: 20px;
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
  &:hover {
    background-color: #444;
    color: #fff;
  }
}

解説

基本

inputタグによるチェックボックスを使う。
「もっと見る」ボタンを、inputタグのラベルとして用意する。

ラベルとは、
クリックすると対応するinputタグに自動フォーカスするタグ。
http://www.htmq.com/html/label.shtml

ボタンを押すとチェックボックスがオンになる。
チェックボックスがオンの状態のとき、隠れているアイテムを表示するようcssを書く。

詳細

HTML

.wrap
  input.check#isMore(type="checkbox", name="")
  label.label(for="isMore") もっと見る
  .itemWrap
    .item アイテム1
    .item アイテム2
    .item アイテム3
    .item アイテム4
    .item アイテム5
    .item アイテム6
    .item アイテム7
    .item アイテム8

表示したいアイテム部分を囲うdivとの兄弟要素として、inputや labelを置く。
input側にはidを指定し、それをlabelのfor属性でid名を記述する。これによりラベルがチェックボックスに紐づく。

これらはアイテム部分を囲うdivの前に書く。
label部分の配置は、絶対配置を使いたいため、更に外側にdivを用意しておく。

itemの非表示

.item {
    //省略
 &:nth-child(n+5) {
    display: none;
  }
}

今回は、初期表示を4個とする。（=5個以降を非表示

チェックボックス

.check {
  display: none;
  &:checked {
    & + .label { //---1
      display: none;
    }
    & ~ .itemWrap .item:nth-child(n+5) {//---2
      display: block;
    }
  }
}

チェックボックスは、今回の機能実装のために用意した要素なので、見えている必要はない。よって、まずデフォルトでdisplay: none;。

チェック状態は :checkedで取れる。
この中で、チェックon状態のCSSを記述する。

  1. まず、ラベル（＝もっと見るボタン）は使い切りなので、チェックonでは消す。隣接セレクタ（+）を使って指定。
  2. itemの表示を指定。サンプルでは、チェックボックスの以降にある兄弟要素の、itemWrapの中にあるitemの5番目以降…と書いている。 兄弟セレクタ（~）を使っている。

※セレクタではあくまで兄弟を指定することしかできないため、itemを指定する際も、兄弟(itemWrap)の中にある〇〇(item)という書き方をしなければいけない。

セレクタの使い方、チートシート
https://webliker.info/css-selector-cheat-sheet/

ラベル

.label {
  //省略
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
}

ラベルはボタンぽい見た目に。
絶対配置で、itemWrapの下辺りに置いておく。

実装サンプル in codepen

https://codepen.io/dorara_css/pen/xNpovK?editors=1100

一度ボタンを押すと消えてしまうので、ボタンを復活させるときはリロードを。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-23T16:41:11+09:00

【CSS】「もっと見る」ボタン(使い切り)をCSSだけで実装

こんなときに使える

  1. 連続するアイテムがあり、その表示数を最初の数個に制限し、それ以降を隠したい。
  2. 「もっと見る」ボタンを置いておき、それを押すことで全表示させる。
  3. 「もっと見る」ボタンは押すと消え、折り畳む必要はなし。使い切りタイプ。
  4. jsは使わず、cssだけでサラッと作りたい。

ソースコード (pug, scss

.wrap
  input.check#isMore(type="checkbox", name="")
  label.label(for="isMore") もっと見る
  .itemWrap
    .item アイテム1
    .item アイテム2
    .item アイテム3
    .item アイテム4
    .item アイテム5
    .item アイテム6
    .item アイテム7
    .item アイテム8

.wrap {
  position: relative;
}

.itemWrap {
  margin: 30px auto;
}
.item {
  color: #fff;
  width: 100px;
  height: 100px;
  background-color: #555;
  margin: 0 auto 30px;
  &:nth-child(n+5) {
    display: none;
  }
}

.check {
  display: none;
  &:checked {
    & + .label {
      display: none;
    }
    & ~ .itemWrap .item:nth-child(n+5) {
      display: block;
    }
  }
}
.label {
  border: 1px solid #444;
  padding: 8px 12px;
  border-radius: 20px;
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
  &:hover {
    background-color: #444;
    color: #fff;
  }
}

解説

基本

inputタグによるチェックボックスを使う。
「もっと見る」ボタンを、inputタグのラベルとして用意する。

ラベルとは、
クリックすると対応するinputタグに自動フォーカスするタグ。
http://www.htmq.com/html/label.shtml

ボタンを押すとチェックボックスがオンになる。
チェックボックスがオンの状態のとき、隠れているアイテムを表示するようcssを書く。

詳細

HTML

.wrap
  input.check#isMore(type="checkbox", name="")
  label.label(for="isMore") もっと見る
  .itemWrap
    .item アイテム1
    .item アイテム2
    .item アイテム3
    .item アイテム4
    .item アイテム5
    .item アイテム6
    .item アイテム7
    .item アイテム8

表示したいアイテム部分を囲うdivとの兄弟要素として、inputや labelを置く。
input側にはidを指定し、それをlabelのfor属性でid名を記述する。これによりラベルがチェックボックスに紐づく。

これらはアイテム部分を囲うdivの前に書く。
label部分の配置は、絶対配置を使いたいため、更に外側にdivを用意しておく。

itemの非表示

.item {
    //省略
 &:nth-child(n+5) {
    display: none;
  }
}

今回は、初期表示を4個とする。（=5個以降を非表示

チェックボックス

.check {
  display: none;
  &:checked {
    & + .label { //---1
      display: none;
    }
    & ~ .itemWrap .item:nth-child(n+5) {//---2
      display: block;
    }
  }
}

チェックボックスは、今回の機能実装のために用意した要素なので、見えている必要はない。よって、まずデフォルトでdisplay: none;。

チェック状態は :checkedで取れる。
この中で、チェックon状態のCSSを記述する。

  1. まず、ラベル（＝もっと見るボタン）は使い切りなので、チェックonでは消す。隣接セレクタ（+）を使って指定。
  2. itemの表示を指定。サンプルでは、チェックボックスの以降にある兄弟要素の、itemWrapの中にあるitemの5番目以降…と書いている。 兄弟セレクタ（~）を使っている。

※セレクタではあくまで兄弟を指定することしかできないため、itemを指定する際も、兄弟(itemWrap)の中にある〇〇(item)という書き方をしなければいけない。

セレクタの使い方、チートシート
https://webliker.info/css-selector-cheat-sheet/

ラベル

.label {
  //省略
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
}

ラベルはボタンぽい見た目に。
絶対配置で、itemWrapの下辺りに置いておく。

実装サンプル in codepen

https://codepen.io/dorara_css/pen/xNpovK?editors=1100

一度ボタンを押すと消えてしまうので、ボタンを復活させるときはリロードを。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-23T16:35:54+09:00

html/css トレーニング

htmlの基礎

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href=" ">
  </head>
  <body>
    <div class="header">

    </div>
    <div class="main">

    </div>
    <div class="footer">

    </div>
  </body>
</html>

基本はこのフォーマットで全てが始まる！

headタグについて

初心者の僕が解釈するにこのheadの中に入れる内容は、
ソース全体の設定みたいなものだと思う。

bodyタグについて

ここにページの主な内容を書き込む

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

Good Good Study,Day Day Up.

日々更新予定

2019/05/22

2019/05/23

2019/05/24

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

日付別

タグ一覧