citron syrup

HTML,CSS,js,Ruby,Swift

clearfixでfloatを解除する

clearfixでfloatを解除する、と言っても原理は全くわかっていないのですが
偉い人が"floatする要素のclassのCSSにこれを書いておけばclearfixできるよ"と教えてくれたのでメモ。

.cf {
  zoom: 1;
}
.cf::before {
  content: "";
  display: table;
}
.cf::after {
  content: "";
  display: table;
  clear: both;
}

HTMLではこれ(class=“cf”)を親のclassに追加します。

imgを中心に配置したい時

imgを中心に配置したくて、imgタグに直接classを追加しmarginをautoにしたのに
反映されなくてとても悲しい思いをしました。

imgはインライン要素というもので、ブロック要素というものでないとmarginを指定できないらしい。
imgを中心に配置したい際は

HTML

<img class="citron" src="images.jpg">

CSS

.citron {
  display: block; //ଘ(ㆁvㆁ)<ブロック要素に変換
  margin: 0 auto;
}

もしくは

HTML

<div class="citron">
   <img  src="images.jpg">
</div>

CSS

.citron {
  text-align: center;
}

と書くとできました。

ulタグのpadding-leftについて

最近、実はバイトでHTMLとCSSのコーディングをしているのですが
ulタグを使った際左側に謎のpaddingがあって涙が止まりませんでした。

考えた結果、左側についていた点の幅がpaddingとして勝手に空いているからだという結論に至ったのですが
実際どうなのかは調べてないのでわからないです。

と言いたかったのですが、間違った情報をネットに垂れ流すのは良くないと言われたので調べました。

もともとリストの左側には余白があるものらしいです。
list-style:none;によって点を消したことによってpaddingも消えると思っていた私が間違えでした。
ちなみにulにpadding-leftを振ると普通に消えます。

こちらからは以上です。
ただの自分用のメモです。

prog-8を始めました

タイトルままです。

prog-8.com

バイトで必要になるため、こちらのサイトでHTMLを勉強し始めました。
私はどうにも継続力がなく、ブログで宣言でもして置かないとやらないと思うのでしておきます。

毎日一項目ずつ終わらせていき(たいと思ってい)ます!!

脱獄したロック画面に使用したアプリ

お久しぶりです。いろいろサボってました
iPhone 5s iOS 9.3.2にインストールした、ロック画面に使用した無料脱獄アプリを紹介します。

f:id:CitronCockatiel:20160824042342j:plain:w300

f:id:CitronCockatiel:20160824042635j:plain:w300

miniTime

通常ロック画面の時計は上部中央に表示されていますが、miniTimeを使用するとさまざまな表示に変更することが可能。

*インストール方法

Cydiaから通常通りインストールできます。
Searchタブより「miniTime」と検索。

*設定方法

設定アプリ内に追加される『miniTime』項目より行います。
私はこう設定しています。

f:id:CitronCockatiel:20160824044612j:plain:w300

f:id:CitronCockatiel:20160824044627j:plain:w300

HotDog

ロック解除テキストやパスコード画面の各種テキストを好きな文章に変更できます。

*インストール方法

Cydiaから通常通りインストールできます。
Searchタブより「HotDog」と検索。

*設定方法

設定アプリ内に追加される『HotDog』項目より行います。
僕はこう設定しています。

f:id:CitronCockatiel:20160824045417j:plain:w300

f:id:CitronCockatiel:20160824045456j:plain:w300

f:id:CitronCockatiel:20160824045503j:plain:w300

f:id:CitronCockatiel:20160824045509j:plain:w300

RomanPasscode

パスコードの英語をローマ数字にしてくれます。

*インストール方法

Cydiaから通常通りインストールできます。
Searchタブより「RomanPasscode」と検索。

ステータスバーもいろいろ弄りましたがそれはまた今度...。
いつかきっと。

それではまた。

髪の毛を今話題のことりベージュに染めました。

髪の毛を今話題のことりベージュに染めたので載せます。

ことりベージュとは

kai-you.net

http://mery.jp/207762mery.jp

この辺読んでね

染めてみた

ブリーチかけると髪溶けるとか散々脅されましたが屈せずかける。

f:id:CitronCockatiel:20160218203427j:plain:w300

すごいオレンジ。
色を入れると

f:id:CitronCockatiel:20160218203535j:plain:w300

こんな感じ。
外で見ると

f:id:CitronCockatiel:20160218203602j:plain:w300

とても可愛い色に染まっている。

ことりベージュを始めたのはWille渋谷店の志賀尚之さん。
SNSで調べてこちらの美容院に行ったのですが、アニソンがずっと流れていたのが最高でした。
今回やっていただいたのはWカラー+トリートメントで、ホットペッパーで予約すると¥16500→¥15000になります。

beauty.hotpepper.jp

一ヶ月に一度美容院へ行き、2日に一回ほど紫のシャンプーを使用すると良いそうです。
気になる方は是非!

2月27日 追記

紫シャンプーを二日に1回ほどしていましたが、二週間経った今限りなく金髪に近くなっています。
明日紫トリートメントと紫コンディショナーが届くので試してみますが、痛みそうで怖い。