cssでの記述でプロパティで計算をしてくれる方法があります。
calc()を使うことで100%の値からpxを差し引いたりできるので、便利なセレクタとなっています。
例えば左に200pxのサイドバーがある場合に、右に背景を100%表示にしたいときは、
.test {
width: 100%;
background-size: calc(100% – 200px);
background-position: 200px center;
}
とすれば左から200px横に画像が100%表示になってくれます。
Fireworksをまだまだ現役で使用されているwebデザイナーの方も多いかと思われます。
今回は使っておくと便利なFireworksの拡張機能について紹介していきたいと思います。
スライスした画像の大きさなどコーディングをしていてすぐ知りたいなんて場面も多いと思います。
そんな時、この拡張機能を入れておけば、文字やオブジェクトの数値を自動で書き出してくれます。
クリックした順番に連番を振るので、gnaviなどの連番をよく使うようなスライスに便利ですね。
カンバスカラーをコマンドひとつで透明・白に切り替えることができます。
最近では透過pngで書き出すことも多くなってきたので、スグに切り替えられるのは便利ですね。
wpの記事一覧などで文字を省略して表示することが多いと思いますが、
だと表示させたい文字数が決められないと思います。
そこで今回は、ブログなどに使える記事の表示させたい文字数を決定できる、書き方を紹介します。
<p id=”blog_text”><?php echo mb_substr(strip_tags($post-> post_content),0,100).’…’; ?></p>
post_content),0,100)のところで文字数を決定できます。
今回は0～100までの文字数を指定しているので100文字表示となります。
固定ページでパーマリンクを変更していない場合のページャーの書き方を紹介します。
<div id=”pager”>
<?php
if ($the_query->max_num_pages > 1) {
echo paginate_links(array(
‘base’ => get_pagenum_link(1) . ‘%_%’,
‘format’ => ‘&paged=%#%’,
‘current’ => max(1, $paged),
‘total’ => $the_query->max_num_pages
));
}
?>
<?php wp_reset_postdata(); ?>
</div>
get_pagenum_linkでページャーの番号を収得し、
‘&paged=%#%’,でリンクを付与しています。
グラデーションを取り入れることで、よりサイトを魅力的に見せたりすることができます。
さらにアニメーションさせることで、視覚効果を与え、よりサイトの見栄えが良くなったりするので、
スマートフォン専用などcss3に対応したサイトで使用していきたいですね。
■アニメーションのさせ方
@keyframesとanimetion-nameでanimetionとのリンクをして、変化させたい要素を0%〜100%で指定します。
body { background-color: #6CB8FF; animation: gradation 2s infinite;}@keyframes gradation { 0% { background-color: #red; } 50% { background-color: #blue; } 100% { background-color: #green; }} |
gifアニメーションを作成される方はあまりいないと思いますが。
いざ作るとなったとき、作り方がわからない、psやfwでの作りかたを調べても、うまくいかなかったりなどで、時間をとられてしまったという方もいるかもしれません。
まったくgifアニメーションを生成したことが無いような方でも画像を用意するだけで簡単に作成できるサイトを紹介します。
それはアルパカ動画です。
画像をアップロードするだけで再生速度など調整することができ簡単にgifアニメが作れちゃいます。
時間が無いといった方や、作り方がわからないといった方はwebサービスを利用してみてはいかがでしょうか。
クラスが同じ物が並んでいて、例えば
タグ内のテストの.test01を.test02に変更したりできれば、
cssやhtmlで調整できないところでもcss変更ができるので変更できれば便利ですね。
<p class=”.test01″>クラス<p>
<p class=”.test01″>クラス<p>
<p class=”.test01″>クラス<p>
$(function() {
var result;
result = $(“class.test01”).text();
if (result = ‘クラス’) {
$(‘.test01’).addClass(.test02);
}
});
wpなど動的に書き出されるものに対してjqeryで変更できるテクニックを身に着けておけば色々なことができそうです。
最近レスポンシブサイトが主流になってきて、スマートフォンで見る文字の最適値などを考慮してコーディングしなければならなくなってきました。
一般的にフォントサイズの指定の仕方は「px、em、%」を使います。
pxで指定しないとすると、emや%が出てきて、どれがいいのかわからないなんて人も多いと思います。
Webサイトを拡大できる機能がありますが、
「Chrome」や「Firefox」、「Safari」では、ページ拡大とともに文字も大きくなります。
ですがIEだけ文字サイズそのままでページが拡大されてしまう自体があったからです。
ですがスマートフォンだと、
emや%で指定だと、親要素の影響を受けて、文字サイズの調整に時間がかかる場合がるので、
「rem」を使用したほうがいいでしょう、なぜなら、remは、常に（html）要素を基準に文字サイズを指定できるからです。
web広告をはじめとする、インターネット広告や自社のウェブサイトなどで使用するバナーは、ユーザーにクリックされるような価値のあるバナーであなければいけません。
そこで、ユーザーにクリックされるようなバナーには、文字を載せるポイントがあります。
どんな情報を伝えたいか、ユーザーにとってメリットのある情報を整理し、強調したい文字の優先順位を決めます。
人の視線の移動する向きを考え、文章を読ませることを前提にするなら左揃えのほうが良いでしょう。
ですが、長い文章をバナー上に載せることは作成する上であまり良くないでしょう。
文字や背景に装飾を施すことで、目立ちやすさや、相手の関心、興味を引き出すことができます。
また、要素間にメリハリが生まれ、情報などが強調されやすくなります。
これは文字の装飾と同じことですが情報に大小の優劣をつけることで、メリハリが生まれますので、
値段などの数字を目立たせたいときなど、使用できます。
Webデザイン重要な要素のひとつであるものである配色パターン。
一度配色に悩んでしまうと中々デザインが決まらなかったりします。
ですがWeb上には配色に関するヒントになる、サイトが数多く公開されています。
様々カラーパレットが登録されています。
カラーパレットを選択するとプレビューが表示されます。
リアルタイムで色のイメージを確認できまるので便利です。
配色はデザインをする上でとても重要なものなので、参考サイトを元に、自分の頭の中のデザインパターンを多く持っておくと、
デザインスピードが上がるかもしれません。