FAIRWAY Engineer {Blog}
こんにちはモリです。
今回は最近ハマったスタイルについて書いていこうと思います。
背景画像のサイズを変更した時にbackground-sizeを適用したかったのですが
デベロッパー・ツールで確認すると適用されていない。。。
CSSにはスタイルが適用される以下のような優先順位ですが、
1．important
2．インライン(style指定)
3．idセレクタ
4．その他セレクタ
5．ユニバーサルセレクタ(*{})
適用される条件は以下。
・backgroundプロパティの後に記述する事。
・IEはバージョンをIE9以上にすること。
backgroundプロパティの前に記述すると[background-size:auto auto;]で上書きされてしまうらしい。。。
CSS3のブラウザ対応は以下のサイトで確認できます。
HTML5 & CSS3 Support
スタイルはハマるな～。。。でわでわ
こんにちは最近オフィスが、やけに寒いなぁ～と思ったら冷房２０℃に設定されてて驚愕したモリです。
今日のお題はPrestashopです！！
先日1.6がリリースされましたね！
という事で、今回も備忘録がてらにXAMPP環境にインストールする手順を書いていきたいと思います。
HOSTも忘れずに！
<VirtualHost *:80>
ServerName local.www.prestashop_sample.com
DocumentRoot "C:\pleiades\xampp\htdocs\prestashop_sample"
<Directory "C:\pleiades\xampp\htdocs\prestashop_sample">
AllowOverride All
</Directory>
ErrorLog logs/prestashop_sample.com_error.log
</VirtualHost>
接続チェックをしてOKなら次へ
※管理画面へアクセスする為にはInstallフォルダを削除または名前を変更する必要がある
(注意：adminフォルダの名前が自動採番で変更されます。
アクセスする場合は変更した名前でアクセスするようにしましょう
アクセス可能な状態の場合は以下のようにログイン画面が表示される
デフォルトは英語になっている為、日本語に変更します。
1.5X系からGUIが結構変わっているので見つけづらいです。。。
My preferences画面の『Language』項目をJapaneseに変更し『SAVE』
デフォルトの言語を日本語に変更
地域画面の『Default country』『Default language』項目をJapanに変更して『保存』
以上がインストールの基本的な流れでした。
でわ、また！
最近、喉風邪にやられ人と会話すら辛いモリです。
何かと役に立つコマンドがあってもすぐ忘れてしまうという事で、備忘録として残します。
GITコマンドの【DIFF】を紹介。 GITの差分を見る時ってすっっっごい見づらいですよね！？（自分だけ？
たとえば、以下のソースを変更して
<div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Sidebar</li> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="nav-header">Sidebar</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="nav-header">Sidebar</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!--/.well -->
こんな感じに。。。。
<div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Sidebar</li> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link追加した文字</a></li> <li><a href="#"></a></li> <li class="nav-header">Sidebar</li> <li><a href="#">上書かれた文字</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="nav-header">Sidebar</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!--/.well -->
【git diff】を実行したとき
【git diff --color-words --word-diff-regex='\\w+|[^[:space:]]'】を実行したとき
追加した文字は『緑』で削除した文字は『赤』で表示してくれます。
なにがどぉ～なったのかが一目でわかりますね！
ちなみに、ローカル環境でツールが使えるならEclipseやWinMergeなどに任せちゃってます （ ＾0＾；
はじめまして、モリです
入力項目でプルダウンメニューでリスト表示するときに便利なjQueryを紹介。
『chosen』というjQueryプラグイン
項目が多くなってくるとスクロールするのが大変ですよね、このプラグインを使用することで検索が出来るようになります。
見た目はこんな感じ
テキストのエリアに検索文字を入力するとドンドン絞られていきます。
単一の選択だけではなく、複数のMultiSelectにも対応しています。
使い方はClass属性に「chosen-select」を指定するだけ。
<select class="chosen-select" multiple="multiple" name="sample"><option value="">Optionを選択してください</option><option value="1">Option1</option><option value="2">Option2</option><option value="2">Option3</option><option value="2">Option4</option><option value="2">Option5</option> </select>
ダウンロードはこちらからhttps://github.com/harvesthq/chosen/releases