今扱っている画像で、拡張子を間違えたのか
「psbファイル」となっているものがあって
これのせいでエラーがでるのかな？といったん消してみたけど
実はちゃんとした拡張子で
psdの打ち間違いでうっかりエラーがおきる
バグ拡張子じゃないよ。てことがわかった。
「Photoshopビックドキュメント（psb形式）」とは
「Photoshopドキュメント（psd形式）」と同じように
レイヤーやフィルターなどの機能がついたままで
なおかつ巨大な画像データだった場合に使用する形式
らしい。
なるほど！と思いつつ
知らなかったので、バグか！と
思ってしまったので（実際重すぎて動かない）
無知なことを自覚できたいい機会だなーとかんじた。
ほかにも拡張子がどんなものがあるのか
気になってきたのでこんど調べてみようと思う。
コーディングをしていると
「あれ、これなんだっけ？？？」と
おもわずボケてしまったのでメモメモ。
画像の右揃え
display:inline-block;
text-align:right;
右揃えが、できない！と延々と悩んでしまっていたので
わすれないように…！
新しいことを覚えると古いことを忘れる
キャパ少ないあたまだな…と反省。
なんとか、知識としてのこっててほしい。
とあるショップのバナーを作っているとき
どうしても「JAとか農協のわたしが作りましたっていう写真」
みたいなバナーになってしまうときがあった。
逆に考えると、そういう構図、フォントにするだけで
イメージが浮かんでくる、ということは
そのイメージを定着させるように戦略が組まれていた
ということなんじゃないだろうか。
改めて大手企業のイメージ戦略がすごいことを実感する。
そして、なんとかそのイメージを崩そうと
ちまちまフォントや写真の位置を変える作業に没頭。。。
おもったようにいかないですね。
画像を上下左右中央に寄せる方法
.sampleWrap{
position: relative;
}
.sample{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
親要素にrilativeをかけて
実際に浮かせる画像があるタグにクラスをふると
上下左右の真ん中に文字や画像をもってこれる。
どうしてもうごかせない！というときに使うと
ちょっと便利。
リストなどでくくって、画像を任意の位置に配置する方法。
ulにまずrelativeをつけて固定。
各リストにクラスをふって、top・bottom・left・rightで位置を指定。
これで好きな位置に設定できる。
▼例▼
.select_box ul{
position: relative;
display: block;
padding-top:15%;
}
.select_box .select01{
position: absolute;
top:30%;
left:5%;
}
.select_box .select02{
position: absolute;
top:5%;
left:25%;
}
今日教えてもらった感動ショートカット。
【 Shift + Ctrl + Alt + v 】
書式のまるっとコピーができる！！！！
感動。。。
適当に打ち込んで、同じパターンの書式を
ひっぱてくれば、キレイにぱっと整ってくれる。
いちいちコピーして、打ちなおして
なんてしなくていい！
これは仕事がはかどりますな。。。
縦長のページをコーディングしたときに
全体を実際の画面でみたときの画像を
クロームで簡単にＤＬできるアプリ。
『Full Page Screen Capture』
以前紹介したアプリと同様
メニュー > その他のツール > 拡張機能
一番下にある「その他の拡張機能を見る」から
簡単にＤＬできる。
右上にできたカメラアイコンを押すだけで
今見ているページをまるごとpng画像にしてくれる
お客様にサンプルをお見せするときにも使える
素敵ツール。
(サンプルを取ろうと思ってこのブログを
キャプチャしてみたのだけれども
流すぎたので割愛。。。)
デザイン全体が見られるのでオススメです。
ももいろ
オレンジ
みどり
みずいろ
こんなかんじのリストの色をカラフル可愛くするcss。
———————————–
●css●
ul li:before{
content:"●";
float: left;
margin-top: -1px;
padding-right: 1%;←このへんは位置の調節に使う
}
ul li.icon01{
color:#F56779;
}
ul li.icon02{
color:#FFAB09;
}
ul li.icon03{
color:#9FD55F;
}
ul li.icon04{
color:#4DB3E3;
}
ul p{
font-size: 16px;
color:#333;
}
———————————–
これで、実際は上から順に文字と同じ色の丸いアイコンがつく。
文字まで染まってしまうので、Pタグでリストのテキストをくくって
色をかえておく。
ただのリストもこうすることでちょっとかわいくみえる。
今日はPCのクロームに導入していたら便利なツールをご紹介。
▽MobileLayouter
PC画面でスマホ表示の確認ができるツール
レスポンシブデザインのものなどをみるのに便利
▽The QR Code Extension
現在みているページのQRコードを発行することができる
読み込むだけで簡単にスマホに現在のページを表示できる
どちらの機能も、
メニュー > その他のツール > 拡張機能
一番下にある「その他の拡張機能を見る」から
検索できるのでぜひいれておくとオススメ。
先日とある方にサイトのスライスとコーディングを頼まれた。
ひらいてみると、きっちりと幅の整った
ものすごくきれいなデザインを見て感動した。
ぱっと見で
「これくらいあけたらいいのだろう」
「こことここは同じ幅があく」
「大きさも全部きれいに整っている」
というのがわかる。
デザインするときには速さももちろん大事だと思うけれど
あとから触るひとが気持ちよく作業ができるよう
最初から空間までもデザインしていくこともだいじだということを実感。
そのひとのようなデザインデータを作れるようになりたい。