What's New Qiita

20191203のCSSに関する記事は14件です。

  • 投稿日：2019-12-03T20:34:22+09:00

初心者によるプログラミング学習ログ 175日目

100日チャレンジの175日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

175日目は

最近ただのログとりになってますね。
まあ、しょうがありません。

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

Extendを使う

Extendって何に使うやつ？

  • セレクタのプロパティを他のセレクタにコピーができる。
  • Extendは参照先がCSSのセレクタになっており、参照元のセレクタのプロパティを書き換えた時に連動して書き換わってしまうので慎重に扱う。

SCSSでかく

//extend参照元
.hoge {
  width: 10px;
  height: 10px;
  .add {
    display: inline-block;
  }
}

//extendを使う対象
.target {
  @extend .hoge;
  display: block;
}

CSSにすると…

.hoge, .target {
  width: 10px;
  height: 10px;
}

.hoge .add, .target .add {
  display: inline-block;
}

.target {
  display: block;
}

使い道について

Mixinでだいたい片付けてしまうので、
「この場合はMixinよりExtendの方が使いやすいよ！」
てのがあればコメントしていただけると助かります…！

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

vue.jsとfirebaseを使って、パスワードマネージャを作った話

今回は、いつものGASと違って、firebaseを利用してパスワードマネージャのアプリケーションを作成しました。

きっかけ

きっかけは、自分が利用しているサービスのパスワードが同じパスワードで管理しているのに、こののままやったら危ないなー。と思ったのがきっかけです。

1passwordやトレンドマイクロ等がパスワードマネージャのアプリを提供しているのですが、せっかくなら、firebaseの勉強を兼ねて作ってみようと思いました。
完成している画面はこのようになっています。

白枠で塗りつぶしている部分は、アカウントIDを表示しています。

スクリーンショット 2019-12-03 16.20.12.png

イメージフロー

下記のようなイメージで今回は作成を行いました。

スクリーンショット 2019-12-03 16.23.41.png

①：firebaseのgoogle認証機能を利用してログイン処理を行う。

②：ログインしていきたアカウントがfirebaseのユーザデータベースに登録しているアカウントか？の確認を行う。

③：登録されていないアカウントの場合、ログイン画面にエラーメッセージを表示する。

④：登録されているアカウントの場合、パスワードデータからアクセストークンが一致するコレクションからデータを抽出し、一覧で表示する。

⑤：登録しているデータは編集削除が可能であり、また新規で登録も可能。

⑥：ログアウトを行うと、ログイン画面に移動する。

実際のデータ保持や、画面

ここからは、上記のイメージフローの実際の画面やデータベースの中身を説明したいと思います。

ログイン画面

ログイン画面はとてもシンプルになっています。「sign with google」のボタンをタップすると、googleアカウント選択ポップアップ画面が表示されます。
スクリーンショット 2019-12-03 16.33.04.png

firebaseのgoogle認証の使い方は以下の通りになります。(公式サイトに詳細に記載されていますので、詳しく知りたい方は、公式サイトを参考にすると良いと思います。)

//google認証を行うために必要
const provider = new firebase.auth.GoogleAuthProvider();

//google認証のポップアップ表示からのアカウント選択後の処理
firebase.auth().signInWithPopup(provider).then((result)=> {
    //[result]にgoogleの情報が入っている
    //ex. result.user.email => googleアカウント

    //認証に成功した場合の処理...

}).catch((error) => {      
    //認証に失敗した場合の処理...
});

認証後、firebaseのデータベースに作成したユーザデータに登録しているアカウントかの確認を行います。

もし、登録されていない場合は下記のようなメッセージが表示されてログイン画面から動かない状態です。

スクリーンショット 2019-12-03 16.54.51.png

スクリーンショット 2019-12-03 16.52.06.png

firebaseのデータベースの一覧データの取得方法は以下の通りとなります。 

//firebaseconfigはfirebaseの設定、Firebase SDK snippetから取得してください。
const firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXXXXXXXXXXXXXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
    appId: "x:XXXXXXXXXXXXXXXXXXXXXXXXXX:xxx:XXXXXXXXXXXXXXXXXXXXXXXXXX",
    measurementId: "x-XXXXXXXXXXXXXXXXXXXXXXXXXX"
};

//firebaseのデータベースを使用する
const firebase_app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore(firebase_app);

//アクセスしたいコレクションを指定する。
const docRef = db.collection("colection");

//データベースにアクセスし、データ取得に成功した場合の処理
docRef.get().then((querySnapshot) => {
    querySnapshot.forEach((doc)=> {

        //[data].オブジェクトキーで保存しているデータの取得できます。
        let data = doc.data();

    })
    .catch((error) => {
        //データ取得時にエラーが発生した場合の処理

    })
});

データ一覧画面

登録しているアカウントからアクセスした場合、データ一覧の画面に移動します。
移動した際に、データをパスワードを保持しているデータにアクセスを行い、アクセストークンが同じコレクションの中に保持しているデータを一覧で表示します。

nosqlでこういうデータの持ち方が良いのかわからないのですが、今回はこのようにデータを保持しています。

スクリーンショット 2019-12-03 17.22.58.png

一覧画面は下記のようになります。（最初に紹介した画像と同じになります。）

スクリーンショット 2019-12-03 16.20.12.png

詳細を表示したいアカウントをタップすると詳細内容を表示します。

スクリーンショット 2019-12-03 17.29.27.png

ピンクのボタンをタップするとコピーを行うことができます。

主にパスワードをコピーして使用することが多いです。

スクリーンショット 2019-12-03 17.31.20.png

編集タブをオンにすると登録している内容の編集を行うことが可能です。

登録しているデータの更新の方法は以下の通りになります。

//更新したいドキュメントまでアクセスし、[set]で更新することができる。
db.collection("xxxxxx").doc(this.user.uid).collection("xxxxxx").doc(this.detail_data.doc_id).set({

    //キーと内容を全て記載する。更新したい内容だけ記載した場合、記載してない内容は消えるので注意です。
    /*
      キー : 値　
     ,キー : 値
     ,キー : 値 ...
     */

}).then(()=> {
    //データが更新した場合の処理
})
.catch((error)=> {
    //データ更新に失敗した場合の処理

});

データ登録

ヘッダーにある「+」ボタンからパスワードの新規登録が可能です。

「+」の左にあるボタンが一覧画面に移動、右側にあるボタンがログアウトボタンになります。

スクリーンショット 2019-12-03 17.40.31.png

入力する内容は入力欄に記載している通りとなります。

「icon」は今回は、fontawesomeのフリーアイコンを表示できるようにしています。

ただ、アイコンを使用するには、使用したい、classを検索して貼り付ける必要があるため少し面倒です。ここは改良する必要があるかなと考えています。

パスワードは「CREATEPASS」をタップすることで自動で生成してくれるようになっています。
パスワードの長さも大文字を含むのか、数字を含むのかも設定可能です。

スクリーンショット 2019-12-03 17.44.43.png

登録からデータを登録することができます。
ランダム生成の一意キーで登録する方法は以下の通りです。

//登録したい、コレクションまでアクセスを行い、[add]でランダムキーで登録することができます。
db.collection("xxxxxx").doc(this.user.uid).collection("xxxxxx").add({
    /*
      キー : 値　
     ,キー : 値
     ,キー : 値 ...
     */
})
.then((docRef)=> {
    //データを登録完了した場合の処理

})
.catch((error) => {
    //データ更新に失敗した場合の処理
});

個人的な課題

今回、パスワードをデータベースに保存するので、「crypto-js」を利用して暗号化を行おうと試みました。

しかし、実際に暗号化を行ってデータを新規登録を行おうとすると、ランダム生成されるキーがなぜか、毎回おんなじキーになってしまい、上手く利用することができずに課題になっているため、これは改善する必要があると考えています。

PWA化

GASのアプリケーションでは不可能だった、PWA化を今回実装を行いました。

こちらのサイトを参考にさせて頂き、実装を行いました。

最後に

意説明は以上となります。

firebaseのサービスは本当に便利だと感じ、もっとfirebaseFunctionsとかを学びたいと思いました。

まずは、このアプリケーションの課題を克服したいと思います。

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

CSScombについてのおさらい

CSScombとは？

CSScomb

CSScomb is a coding style formatter for CSS. You can easily write your own configuration to make your style sheets beautiful and consistent.
（CSScombは、CSSのコーディングスタイルフォーマッタです。 独自の構成を簡単に記述して、スタイルシートを美しく一貫性のあるものにすることができます。）

https://github.com/csscomb/csscomb.js README.mdより抜粋

つまりCSSのプロパティを決められたルールで並び替えることができるツールです。
現在、CSSはたいてい何かしらのメタ言語で書かれていると思いますが、CSScombはコンパイル後のCSSだけでなくSCSSにも対応1しているので、作業中の並び順を意識しなければならない煩わしさや、ルールを記憶する学習コストから開放されます。

3種類のプリセット

CSScombにはデフォルトで以下の3つの設定が用意されています。
csscomb
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
yandex
https://github.com/csscomb/csscomb.js/blob/master/config/yandex.json
zen
https://github.com/csscomb/csscomb.js/blob/master/config/zen.json

とはいえ所属するグループやプロジェクトごとにルールが決められている場合にはプリセットでは対応しきれません。
その場合、上記の設定などを参考に独自の.csscomb.jsonを用意する必要があります。

上記のプリセットはいずれもプロパティの種類ごとに分別していますが、googleのCSSガイドはアルファベット順になっています。
Google HTML/CSS Style Guide
https://google.github.io/styleguide/htmlcssguide.html#Declaration_Order

ちなみにアルファベット順にする設定は

.csscomb.json
{
  "sort-order-fallback": "abc",
  "sort-order": []
}

です。
sort-orderの記述がないと動作しない2ようです。下記サービスにて作成される場合は手動で追加する必要がありますのでご注意ください。

CSScomb: Build config
https://csscomb.herokuapp.com/config
こちらは24個の質問に答えるだけで簡単にオリジナルの.csscomb.jsonが作成できる便利なサービスです。

VSCodeで使う

以下の拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb

プリセットではなく自分で用意した.csscomb.jsonを使用する場合には
⌘ + Shift + Pでコマンドパレットを開き、「settingjson」と入力し候補から「Preferences: Open Settings(JSON)」を選択し、settings.jsonを開きます。
コマンドパレット
そこに用意した.csscomb.jsonのパスを追記します。
たとえばMacintosh HD > ユーザ > (ユーザ名)ディレクトリ直下に置く場合は、

.csscomb.json
{
  "csscomb.preset": "~/.csscomb.json"
}

となります。

あとは並べ替えたいCSS（SCSS）で⌘ + Shift + Pでコマンドパレット3を開き、「csscomb」と入力し候補から「CSSComb: Format styles」を選択します。

Gulp(ver.4)で使う

gulp
https://www.npmjs.com/package/gulp

gulpfile.js
const csscomb = require('gulp-csscomb');
const sass = require('gulp-sass');

// SCSSの並び替え
function scsscomb() {
  return gulp
    .src('./src/_scss/**/*.scss')
    .pipe(csscomb())
    .pipe(gulp.dest('./src/_scss'));
}

// SCSSのコンパイル
function styles() {
  return gulp
    .src('./src/_scss/**/*.scss')
    .pipe(sass())
    .pipe(csscomb())
    .pipe(gulp.dest('./build/css'));
}

直接、csscombタスクを実行してもいいですが、個人的にはgulpのbuildタスクあたりに含めておくのが、実行忘れ防止になっておすすめです。
watchタスクも試してみたのですが、scssファイルの入力途中でcsscombが実行されてしまうと、ネスト化しているときなど、大きく崩れてしまったりして使い勝手が悪かったです。またwatch時では処理の無限ループ回避のためにgulp-cached4を利用する必要があります。

まとめ

コンパイル後のCSSにはすでにCSScombを活用している方は多いと思いますが、SCSSには適用していない方が意外と多い（※個人的所感です）のではないかと思い、この機会におさらいしてみました。
SCSSにも適用することは、学習コストの低減、属人性の解消、作業効率の向上が見込めるので、よいのではないかと思いました。

参考サイト

  1. 【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する | バシャログ。 http://bashalog.c-brains.jp/14/12/01-202258.php
  2. [CSScomb] sort-order-fallback が効かない - Web - HomeMadeGarbage https://homemadegarbage.com/csscomb-sort-order-fallback-notwork
  3. gulpで編集中のscssファイルをwatchしてCSScombした話 | MAISON MARC Tech blog https://www.wantedly.com/companies/maisonmarc/post_articles/138053
  4. [Gulp]コンパイル前のsassファイル（*.scss）をcssCombする - Qiita https://qiita.com/s-kato/items/c58af68057d6105dd648

  1. Sass、Stylus、LESSは未対応です。 ↩

  2. 詳しくは参考サイト2を参照ください。 ↩

  3. ショートカットキーを割り振るのも便利かと思いますが、個人的には学習コストの低さから、基本的にはコマンドパレットからの操作がよいと思っています。 ↩

  4. 詳しくは参考サイト3を参照ください。 ↩

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

ハーイ、バブー、ちゃーん

まじでこの世の全てのイクラ好きに教えてあげたいんだが

このQiitaの記事には全ての人間を虜にする禁断のイクラのレシピがある。
これが美味しそうでもなく、もはや食べられないのだが、
HTMLとCSSだけでイクラを再現したからぜひ全国のイクラ好き、
イクラを愛する者たち、イクラを憎む者たち、全てのイクラ関係者に伝われ

イラストチックなイクラを作った

スクリーンショット 2019-12-03 18.01.55.png

イクラのレシピ

HTMLを用意する

イクラの枠組みを作る

<div class="container">
  <div class="ikura">
    <div class="ikura_inner">
      <div class="ikura_luster">
        <div class="ikura_lusterInner"></div>
      </div>
    </div>
  </div>
</div>

スタイルシートを用意する

イクラに命を捧げましょう
まずは色を適当につけます。

スクリーンショット 2019-12-03 17.51.11.png

なんだか、心もとないですね。
イクラの色は箇所によって薄いところと、濃い色の箇所があるので、
そこを linear-gradient で再現しましょう。

.ikura {
  background: linear-gradient(#D83F28, #FB8B00 95%);
  &_inner {
    background: rgba(246, 74, 7, 0.5);
  }
}

スクリーンショット 2019-12-03 17.52.07.png

少しイクラ感出てきました。
ただ、なんかまだイラスト感がありますね。
外側のイクラの色と内側のイクラの色の境目がパキっとなっているので、
box-shadowで境目のパキっと感をぼかしてあげましょう。

.ikura_inner {
  box-shadow: 5px 5px 10px 0px rgba(246, 74, 7, 0.5);
}

スクリーンショット 2019-12-03 17.54.27.png

少し柔らかい印象になりました。

最後に、白い光沢の部分に若干影をつけてあげるとより近づきます。

.ikura_luster {
  background: #fff;
  box-shadow: -7px 2px 7px 11px #DA8151;
}

スクリーンショット 2019-12-03 17.57.00.png

イクラーーーー！チャーーーーーーン！！！！

最後に全体のscssを置いておきますね。（汚いとかはちょっとすみません）

.ikura {
  background: $ikura;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  transform-style: preserve-3d;
  perspective-origin: 0% 50%;
  &_inner {
    background: rgba(246, 74, 7, 0.5);
    box-shadow: 5px 5px 10px 0px rgba(246, 74, 7, 0.5);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transform: translateX(5px) translateY(3px);
  }
  &_luster {
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 30px;
    margin: auto;
    transform: translateX(-70%) translateY(90%) rotate(-40deg);
    box-shadow: -7px 2px 7px 11px #DA8151;
    position: relative;
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 30px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      transform: rotate(118deg);
      right: -6px;
      top: -4px;
    }
  }
}

おわりに

か、カレーは明日から()

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-03T17:49:12+09:00

WordPressでのjQuery導入（セレクトボックスのカスタマイズが上手くできない）

WordPressサイトにフォームを作成しているのですがこちら（https://www.seleqt.net/programming/open-source-css-javascript-select-box-snippets/）
のページを参考にして選択項目をカスタマイズしようとしているのですがjQueryが上手くできません。
もう2日もこれにハマってしまいどうしていいのかわからないためどなたか分かる方がいらっしゃいましたら教えてください。
これを作りたいです。
スクリーンショット 2019-12-03 17.46.59.png

＜環境＞
MacOS Catarina
WordPress使用

作りたいのは上記サイトの２番目のタイプです。特にエラーが出るわけではなく、読み込みも確認していますがちゃんと読み込めていました。原因がなんなのかお手上げです。
一応コード載せておきます。

＜HTML＞
<div class="container">
    <span class="choose">Choose Gender</span>

      <div class="dropdown">
        <div class="select">
          <span>Select Gender</span>
          <i class="fa fa-chevron-left"></i>
        </div>
        <input type="hidden" name="gender">
        <ul class="dropdown-menu">
          <li id="male">Male</li>
          <li id="female">Female</li>
        </ul>
      </div>

  <span class="msg"></span>
</div>

＜CSS＞

* {
  outline: 0;
  font-family: sans-serif
}
body {
  background-color: #fafafa
}
span.msg,
span.choose {
  color: #555;
  padding: 5px 0 10px;
  display: inherit
}
.container {
  width: 500px;
  margin: 50px auto 0;
  text-align: center
}

/*Styling Selectbox*/
.dropdown {
  width: 300px;
  display: inline-block;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  transition: all .5s ease;
  position: relative;
  font-size: 14px;
  color: #474747;
  height: 100%;
  text-align: left
}
.dropdown .select {
    cursor: pointer;
    display: block;
    padding: 10px
}
.dropdown .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 20px
}
.dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
    background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 5px 5px 0 0;
    background-color: #f8f8f8
}
.dropdown.active .select > i {
    transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 5px 5px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}

jsファイル

/*Dropdown Menu*/
$('.dropdown').click(function () {
        $(this).attr('tabindex', 1).focus();
        $(this).toggleClass('active');
        $(this).find('.dropdown-menu').slideToggle(300);
    });
    $('.dropdown').focusout(function () {
        $(this).removeClass('active');
        $(this).find('.dropdown-menu').slideUp(300);
    });
    $('.dropdown .dropdown-menu li').click(function () {
        $(this).parents('.dropdown').find('span').text($(this).text());
        $(this).parents('.dropdown').find('input').attr('value', $(this).attr('id'));
    });
/*End Dropdown Menu*/


$('.dropdown-menu li').click(function () {
  var input = '<strong>' + $(this).parents('.dropdown').find('input').val() + '</strong>',
      msg = '<span class="msg">Hidden input value: ';
  $('.msg').html(msg + input + '</span>');
});
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-03T15:37:03+09:00

SweetAlert2(swal2)のcss適応方法〜ゴリ押しでできてしまった?〜

はじめに

こんにちは。
記事を書くのは何ヶ月ぶりだろうか…。
最近、SweetAlert2使ってるんだけど、毎回調べてる気がするから備忘録兼記事として。

やりたいこと

・Swalのコンテナにボーダーをつけたい！
・タイトルの文字色などを変えたい！
etc...

1.そもそもSweetAlertってなんやねんって話

SweetAlert2.png
SweetAlert2

SweetAlertというのは、とある方（多分Limon Monte氏）によって開発されたJSのライブラリである。
主な機能としては、JSで出すアラートを綺麗にカッコよく可愛く装飾、表示してくれるライブラリである。
売りはそれだけじゃなくて、綺麗以外にもレスポンシブに対応していたり、使いやすかったり、カスタマイズが簡単だったり。

See the Pen mdydaBJ by 至極色のひかる (@sigoku14) on CodePen.

とこんな感じで、簡単にアラートをデコレーションすることができます！

2.どうやってcss弄るの？（基本編）

これはライブラリ側でほとんどやってくれているようなもの。
ドキュメントを読めば大体のことは書いてくれている。

その上、下みたいにクラスを追加してアニメーションや微細なところまでいじれるようにしてくれているのだ！

customClass: 'customizable'

とか、

customClass: {
  container: 'container-class',
  popup: 'popup-class',
  header: 'header-class',
  title: 'title-class',
  closeButton: 'close-button-class',
  icon: 'icon-class',
  image: 'image-class',
  content: 'content-class',
  input: 'input-class',
  actions: 'actions-class',
  confirmButton: 'confirm-button-class',
  cancelButton: 'cancel-button-class',
  footer: 'footer-class'
}

みたいな感じで、アラート自体にクラスを付与することができ、cssを記入してあげれば動かすことができます。

そもそもこのcustomClassというのが強いのですが、なぜか二つ目の書き方をすると、classが効かないという。
多分、僕の問題なんだろうけど、調べて解決するつもりが、何となくでやったらできてしまったので、それを綴ります。

3.どうやってcss弄るの？（class分解編）

まず、Swal2のclassがどうなっているか調べましょう。
version 9.4.1時点での構成を見てみましょう。

swal2.png

まぁ、これ見れば大体のことはわかるんだけど、正直読むのめんどくさいわ！！
っていう人が大半でしょう。

  • swal2-container
    • swal2-title
      • swal2-header
        • swal2-icon　とか　swal2-progress-steps
      • swal2-content
        • swal2-html-container とか swal2-range とか swal2-check
      • swal2-actions
      • swal2-footer
      • swal2-timer-progress-bar

と、分解したらこんな感じ（かなり端折ってはいますが）。
なら、これに書き込めば良いじゃん！
初心者の私はそう思いましたが、もちろん動くはずもなく...。
では、どうしたか。

4.どうやってcssを弄るの？（ゴリ押し編）

多分、様々なところに応用できるとは思うので、今回は自分が解決したかったことを中心に書いていく。

1.Swalのコンテナにボーダーをつけたい！

→解決法
まず、

customClass: 'customizable'

のような感じで、アラート自体にclassを付与します。
で、次はcssに

div.customizable{
    border: 3px solid black !important;
}

と記述します。
すると、class名がかかっている要素にcssをかけることができます。ただ、それだけでは動かずcssに

!important

を追加してあげる必要があります。
これにより、優先度を上げることができる！

2.タイトルの文字色などを変えたい！

→解決法

先ほどと、解決法にさほど変わりはないが、
付与したclassの階層下の要素がどうなっているかをよく見ましょう。

すると、 h2 とか、label とかが存在しています。
それらにcssを直に付与すれば良いわけです。

.customizable h2{
    color: red !important;
}

と今回も同様に

!important

は必要です。

5.〆

わかったことは、cssは割とゴリ押しでもどうにかなる。
そして、このやり方はだいぶキモイ。

正規のやり方があるなら、正規のやり方でやりたい。
でも、英語しかなくてわからない。

つまり、英語を翻訳した方が良さそうということがわかった。
最近、英語の翻訳系ばっかやってる気がするw

長々としょうもない備忘録にお付き合いいただきありがとうございました。

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

Excelって名前しか知らないPCに不慣れな感覚派22歳プログラミング完全未経験者がRubyを習得するまでの軌跡。Part4

【HTML-CSS編】

はじめはpart2,3のように用語の説明や文型をまとめようとおもったがprogateの説明だけで完成されており、理解することが可能。最低限大事なことだけまとめる。

1.HTMLとCSSってなんなのか　CSSは色、大きさ、形などデザインに関するプログラミング　HTMLが素材でCSSが職人。
2.CSSはHTMLとは別にファイルを作って記述する。
3.プロパティはCSSの機能　ex.color.font-size,background-color,width,height

やってて感じたこと

HTML-CSSはRubyと比べると内容自体はすごく簡単で意味がわからないということはほぼないと想う。ただRubyが詩だとするとHTML-CSSは単文といった感じで1文1文で完結していて面白みはあまりない。

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

HTML+CSS ドロップダウンメニュー

ドロップダウンで表示するメニューの要素に”display: none”を設定しておき、ホバー時に、displayを切り替えるだけ。

HTML

index.html
<!DOCTYPE html>
<html>

<head>
  <title>transarent nav bar</title>
  <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>

  <ul>
    <li>
      <a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="">profile</a></li>
      </ul>
    </li>
    <li><a href="#">Category</a>
      <ul>
        <li><a href="">category1</a></li>
        <li><a href="">category2</a></li>
        <li><a href="">category3</a></li>
        <li><a href="">category4</a></li>
      </ul>
    </li>
    <li><a href="#">Contents</a>
      <ul>
        <li><a href="">content1</a></li>
        <li><a href="">content2</a></li>
      </ul>
    </li>
    <li><a href="#">New</a></li>
  </ul>

</body>

</html>

CSS

styles.css
body {
 background-size: none;
 margin-left: 10%;
}

ul {
 margin: 0px;
 padding: 0px;
 list-style: none;
 font-family: arial;
}

ul li {
 float: left;
 width: 200px;
 height: 40px;
 background-color: black;
 opacity: .8;
 line-height: 40px;
 text-align: center;
 font-size: 20px;
}

ul li a {
 text-decoration: none;
 color: white;
 display: block;
}

ul li a:hover {
 background-color: green;
}

/*非表示にしておく*/
ul li ul li{
 display: none; 
}

/*ドロップダウンの要素を表示*/
ul li:hover ul li {
 display: block;
}

スクリーンショット 2019-12-03 11.57.52.png

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

中スクロールで右側のpaddingが入らない問題の対応

はじめに

中スクロールを実装する際に時々以下のような右側のpaddingが入らない時の対応について紹介します。

スクリーンショット 2019-12-03 11.38.49.png

解決方法

結論を言うと、親要素も inline-block にしたらpaddingが入るようになりました。

原因

デフォルトのblock要素の横幅は親要素の幅一杯が限界で、ただ横を突き抜けてしまっているだけでした。
突き抜けちゃっているので、右側のpaddingの設定が効いていないように見えます。
（試しにoverflow: hiddenとかしたら途切れるのが分かると思います）
スクリーンショット 2019-12-03 11.42.33.png

inline-blockにすると親の幅関係なく子要素で作られた幅だけ伸びてくれるので、paddingもキチンと一番後ろのところで効くようになります。
スクリーンショット 2019-12-03 11.43.01.png

（ちなみこれが分からない時は擬似要素を入れて対応してました・・・）

まとめ

とりあえずinline-blockで横に並べる場合は親要素もinline-blockにしましょう！と言うことでした。
サンプルコードは以下に置きますので参考にして貰えますと幸いです。

See the Pen 横に並べる by wintyo (@wintyo) on CodePen.

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

CSS要素の指定の仕方

x y{ ... }　　※xとyに半角スペースありxで指定した要素の中のy
xy{ ... }　 　※xとyに半角スペースなしxかつyの要素
x,y{ ... }　　※xとyにカンマありxおよびyの要素
x>y{ ... }　　※xとyに>ありxの要素直下にあるyの要素

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

cssドロップダウンの表示�・非表示

◆ドロップダウンリスト
クラス名
:hover でオンマウスを指定

/メインメニュー/
ul.globalnav a{
color: white; /メインメニューのデフォルトの色/
font-size: 0.8em;
padding-top: 20px;
}
.globalnav li:hover > a{
color: red; /メインメニューをオンマウスした時に変わる色/
}
/サブメニュー/
/サブメニューのスタイル/
ul.globalnav ul{
list-style-type: none;
background-color: blue; /ドロップダウンしたときの背景の色/
display: none;　/非表示/
margin:0px;
padding:10px;
position: absolute;
z-index: 30;
}
/サブメニューに出てくる文字の色/
li.submenu a {
color: white;
}
/オンマウスした時に出るサブメニュー（リスト）/
ul.globalnav li:hover ul{
display: block;
z-index: 30;
}
/サブメニューのメニューにオンマウスした時の色/
.submenu li:hover > a{
color: yellow;
}

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

文字の装飾

◆文字のぼかし

text-shadow: 1px 2px 3px red;
　　　　　　　　横　縦　ぼかし　色

◆文字の境界線
stroke: #000000;　/境界線の色/
stroke-width: 3;　/境界性の太さ/
stroke-opacity: 0.5;　/境界線の透明度/
stroke-linecap: round;　/線の端の表示の仕方（他にbutt/square）/
stroke-linejoin: round;　/線の頂点部分の表示の仕方（他にmiter/bevel）/

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

新卒がHTML5プロフェッショナル認定試験レベル１に合格した方法

Advent Calenderも技術投稿もはじめまして！

ALH Advent Calender4日目です。
技術的な投稿もAdvent Calenderもはじめてですが、ぜひ、温かいまなざしで見ていただけたら幸いです…！

丸腰の新卒、Web系試験に合格できました

2019年11月2日に、HTML5プロフェッショナル認定試験レベル1に無事（ぎりぎり）、合格することができました。
この機会に、知識0の状態から始まった試験対策や実際のテストについてまとめてみようと思います。

HTML5プロフェッショナル認定試験とは？

テスト概要

所要時間：90分
問題数：60問
受験料：15,000円（税別）
日時・会場：全国各地のテストセンターから自由に選択できる
試験方式：コンピュータベーストテスト（CBT）
キーボード入力問題がいくつか出題される。
認定の有効期限：5年間
HTML5プロフェッショナル認定試験公式サイト

HTML5,CSS3,JavaScriptなど最新のマークアップに関する技術力と知識を認定する認定資格で、デザイン・Web・開発に関わる幅広い職種が対象となっています。
レベルは1と2があり、私はレベル1を受験しました。

受験動機

  • 初心者でも受験しやすい
  • コーディングベースのWeb基礎知識を身につけたかった

Webデザイン系の試験はいくつかありますが、日常の業務でコーディングを中心に行っているので、すぐに現場で生かせることが資格取得のきっかけになりました。

試験対策

  • 参考書を読む
  • LPI主催の試験対策セミナーに参加★
  • Ping-tのオンライン問題集をひたすら解く★
  • 社内のWeb系ワークショップに参加★

以上の4点を中心に、7月末から11月の試験まで、約3か月ほど勉強しました。
勉強は、平日は通勤時間に、休日は自宅で1,2時間ほど行いました。
★が付いたものは特に役立った勉強法なので、時間がない方はそちらから読んでいただけたら幸いです。

参考書を読む（7月末～8月末）

  • すぐにとりかかりやすい勉強法
  • 毎日取り組む分量を決めやすい
  • まず情報をインプットしたい初期には最適

最初のうちは、参考書を読んで、練習問題を解く、ということを繰り返しました。
私が使っていたのは、マイナビ出版のHTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　Ver2.0対応版です。
HTML、CSS、レスポンシブWebデザイン、API概要、Web関連の規格と技術の5つのチャプターに分かれています。

勉強法としては
・平日：隙間時間で5ページ前後読み進めていく。
・休日：章末の問題を解き、間違った問題をノートにとる。
といった感じです。
個人的にアウトプットにはあまり向かなかったので、最初の導入とわからない時に調べるための辞書的な役割として私は重宝しました。

LPI主催の試験対策セミナーに参加★(8/25)

  • 参加費無料
  • APIやレスポンシブWebデザインなど独学では勉強しにくい部分を講義でカバーしてくれる
  • 参加特典として試験の割引と学習サイトの有料コンテンツを1か月無料で使える

HTML5プロフェッショナル認定試験公式サイトから事前に参加予約が必要ですが無料で参加することができます。

3時間ほどの実施で、私が参加した8月の回はAPIについての集中的な講義でした。APIなどの概念については、少し事前知識があるとその後の勉強がかなりしやすくなりました。
各回の内容を見たところ、APIやWebレスポンシブデザインに関する講義が多い印象です。

また、参加特典として、認定試験を10％割引きで受験できる割引クーポンと、オンラインで試験勉強が出来る学習サイトPing-tの有料コンテンツを無料で30日間使える権利を獲得できます。
私はこのPing-tでほとんど試験勉強をカバーできたので、とてもおすすめです。

Ping-tのオンライン問題集をひたすら解く★(8月末～10月末)

Ping-tとは
  • Ping-tは、問題を解いたり、模擬試験を受けることができる学習サイト
  • 学習ログが残るので得点率の遷移をみることができる
  • HTML5の他にもCCNA ICND1、LinuC、Oracle Master Bronze SQL基礎、ITILファンデーション、ITパスポートなどユーザー登録をすれば無料で利用できるコンテンツもある

Ping-t公式サイト

勉強法としては
・問題を一通り解いていく。
・エディターなどを使ってコードを書いて動きを確認する。
・解ける問題が増えてきたら模擬試験を行う。
・よく間違える問題は簡単にまとめておいて隙間時間に見返す。
・試験前までに全問題を2回以上正答の状態、模擬試験の正答率を90%以上にしておく。

HTMLやCSSの分野に関しては、似たような要素やプロパティなどを使った問題は実際にソースを書いて動かしてみることが記憶にも残りやすくて効果的でした。

レスポンシブWebデザインやAPI概要など、用語を覚える時にはネットで分かりやすく言い換えているサイトを探したり、間違いやすい用語は内容を書き起こして隙間時間に見るという受験生っぽい勉強をしました。

模擬試験は実際の試験同様、60問で90分間時間を自動的に計ってくれますが、解答を確認する時間を含めても実施時間は1時間ほどでした。

最初は全ての問題が銅のステータスですが、正答率を上げていくごとに銀、金とレベルが上がっていくので、得意、苦手なカテゴリーが分かりやすいのと、何よりモチベーションが上がります。頑張るとランキングに入れたりするのも嬉しいところです。

全問題を金の状態にするとくす玉みたいでうれしい。
1.png
学習ログが残るので、自分の得点率の遷移がわかりやすい。
2.png

社内のWeb系ワークショップに参加★(10/21)

  • 実際にWeb制作をしてみて根本が理解できた。
  • 暗記だけではつまずいていた部分が解消された。
  • Webデザインってわくわくする！ということに気が付いた。

ざっと暗記はしたけれど、模擬試験の正答率に伸び悩んでいた停滞期があり、ちょうどそのタイミングで社内イベントのWeb系ワークショップに参加しました。

HTMLとCSSを使って実際にWeb制作をしてみたことで、暗記していただけではよくわからなかった部分が体感的にわかるようになりました。

勉強して煮詰まってきていた時だったので、Webサイトを作ってみるのって楽しいということも実感できた大事な一日でした。
そういった機会を作ってくださって大感謝です…！

実際の試験

  • 獲得点数70点(最低点)
  • 回答時間は充分
  • キーボード入力問題が2問ほど
  • 自信のある問題が50%、少し自信がない問題20%、かなり自信がない問題20%、わからない問題10%

問題は45分ほどで解き終わり、2.3回はゆっくり見直せる時間がありました。

問題の内2問ほどキーボード入力式の問題がありましたが、基礎的な単語と、数字を入力するものだったので、そんなに難しさはなかったです。

聞き方は違うものの、Ping-tで解いたレベル感の問題が多かった印象でした。解答に書いてある細かな補足情報までインプットできていればもう少し自信を持って解答できたかなと思います。完全に見たことない問題は全体の10%ほどありました。

私は本当にギリギリの合格だったのでもっと確実に得点を取得するためには、Ping-tの問題の解答部分の補足もよく読み込む必要があるかと思います。私が正答率を7、8割超えてきたタイミングが試験の一週間前くらいだったので、もう少し早い段階で合格県内に入っておくと安心だと思います。

ただ、問題集の章末問題や、公式サンプルの問題は実際の試験より難しかった印象なので、Ping-tをやっている場合は、他のテキストで勉強するよりはPing-tを極めていくのが効率が良さそうだと感じました。

受験してよかったこと

  • ソースコードに苦手意識を感じなくなった
  • ウェブサイトを作るイメージが沸くようになった

ソースコードの読み書きに前ほど苦手意識がなくなって、Webサイトを自作してみるなどできることが広がりました。

今は話題のGASを使ったWebサイトをCSSのフレームワークのBootstrapを導入して見よう見まねで作成しています。こちらの記事を参考に私も好きなエディタでやってみようかな、、！

もちろんわからないことはたくさんありますが、調べて分かることが少し増えたのは成長かなと思います。

全体的にPing-tの回し者かのような書きっぷりになってしまいましたが、全くそんなことはありませんので、ご安心ください。
ただ、本当に使いやすくておすすめなので、もしも気になる方がいたら是非試してみてください。

文章が多くなってしまいましたが、最後まで読んでくださり、ありがとうございました。

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

日付別

タグ一覧