最近

最近はコロナのせいで引きこもっています。楽しみがパンケーキを作ることしかないです。何かちょうど良い趣味教えてください。

bootstrapでプラスからマイナスに変化するアイコンを作る

まずはHTML

index.html

<div class="" id="collapseListGroupHeading">
  <a href="#switch" class="collapsed" data-toggle="collapse"></a>
  <div class="collapse" id="switch" aria-expanded="false">
  </div>
</div>

そしてCSS

style.css

#collapseListGroupHeading a[data-toggle="collapse"]{
  padding: 10px;
  text-decoration: none;
  position: relative;
}
#collapseListGroupHeading a[data-toggle="collapse"]::before,
#collapseListGroupHeading a[data-toggle="collapse"]::after{
  content:"";
  width: 8px;
  height: 0;
  border-top: #000000 1px solid;
  border-bottom: #000000 1px solid;
  position: absolute;
  right: 15px;
  top: 12px;
  bottom: 12px;
  margin: auto;
}
#collapseListGroupHeading a[aria-expanded=false]::after{
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transition-duration: 0.3s;
}
#collapseListGroupHeading a[aria-expanded=true]::after{
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-duration: 0.3s;
}

HTML/CSSのみでサイト模写したものをherokuでデプロイする方法をまとめています。

ruby on railsでの簡単なWEBアプリケーションのデプロイ経験がありましたが、
HTML/CSSのみの模写サイトのデプロイの仕方が分からずに苦労しました。

静的サイト（HTML/CSS）のデプロイの仕方がまとめられているものが少なかったので、
以下に備忘録として手順をまとめてみました。

1.composer.jsonを作る。

composer.jsonファイルを作成する。中身は{}のみ

composer.json

{}

2.index.phpを作る

index.phpファイルを作成する。中身は↓

index.php

<?php include_once("index.html"); ?>

ここまでのディレクトリ階層

app
 ├ index.html
 ├ style.css
 ├ composer.json
 └ index.php

ここまでの作業はHTML・CSSだけではアプリケーションとして認識されないようなので、
PHPアプリケーションとしてデプロイする準備。
色々調べてみるとrailsアプリケーションとしてもデプロイできそうだったが、
phpでのこの手順が一番簡単そうでした。

3 herokuでデプロイ

該当のアプリケーションで↓

ターミナル

$ heroku login

アプリを命名する↓

ターミナル

$ heroku create <アプリケーション名>

githubと、作成したレポジトリを紐付けたら
git remoteでherokuが含まれているか確認↓

ターミナル

$ git remote
heroku
origin

リモートに命名したアプリケーションのディレクトリでを設定する↓

ターミナル

$ git remote add heroku https://git.heroku.com/<アプリケーション名>.git

ターミナル

$ vim .git/config

上記コマンドを実行し
[remote "origin"]のurlに、githubの該当リポジトリが当てはまっていればOK
[remote "heroku"]のurlに、先ほど命名したアプリケーションのurl
（https://git.heroku.com/<アプリケーション名>.git）が入っていればOK

または、下記のコマンドでherokuとgithubのレポジトリが一致していればOK

ターミナル

$ git remote -v
heroku  https://git.heroku.com/<アプリケーション名>.git (fetch)
heroku  https://git.heroku.com/<アプリケーション名>.git (push)
origin  https://github.com/hoge/<gitのアプリケーション名>.git (fetch)
origin  https://github.com/hoge/<gitのアプリケーション名>.git (push)

これでpushする↓

ターミナル

$ git push heroku master

以上で、実際に起動すれば完了。

CSSのプロパティの順番わからない！！

滅茶苦茶分かります。

ということで簡単な調査をしてみました。
結論、

明確なルールは存在しない

ようです。

しかしながら、各企業の提唱する順番はあるようです。

①役割順

firefoxでお馴染みのMozillaさんが提唱しており、サイバーエージェントさんも似た形式を取っているとか。元リンクが削除されていたので、こちらから引用致しました。大まかには、

1.display
2.配置場所
3.ボックスモデル
4.背景
5.テキストなど中身関連

という順番のようです。

②アルファベット順

語る必要もないですが、アルファベット順にプロパティを並べる方法。Google社はこちらを提唱しているようです。

とはいえ面倒...

そんな怠惰なあなたにオススメが「CSScomb」。
VScodeの拡張ツール、プラグインになります。
勝手に順番変えてくれる楽ちんツール。

「gulp-CSScomb」などは、自分好みに設定もカスタマイズできるようです。

100日チャレンジの277日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
277日目は、

おはようございます
277日目
・xdデザインカンプからのサイト模写
・FLOU設計
・sass、git
・お問い合わせフォーム作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 30, 2020