月別アーカイブ: 2015年1月

フラットデザインする?

ここ最近はやってきているフラットデザイン。その要素として欠かせないアイコン。
自分で作るのもいいけど、ささっと無料で使えるものを発見しましたので掲載しておきます。
便利な世の中ですね。
※使用に関しては各サイトの使用規約を読んでから使用して下さい。

非常出口の発展番「HUMAN PICTOGRAM 2.0」

作者が日本の方?のようです。フラット系のワンポイントには最適!

操作系のワンポイントに「Endless Icon」

シンプルかつきれいにまとめられたアイコン。この手があると重宝します。

SNSのロゴとか「Icons DB.com」

SNSのロゴとかあり。

常備しておきたいアイコンたち「https://octicons.github.com/」

これだけあると、とりあえず安心?かな。

海外のものもあわせると、まだまだいっぱい見つかります。これらを覚えておくと制作の効率アップ間違いなし!
就職してからも、すばやく検索して見つけ出せるようにするといいでしょう。

jQueryの小技5

画像のURLを間違えていたり画像が消えていたりしたときに別の画像を代わりに表示させます。

リンク切れ画像を差し替える

HTML


<img src="error.jpg" width="300" height="200" alt="" />

js

$(function () {
  $('img').error(function(){	$(this).attr({src:'ここに代替えの画像のURL',alt:'画像が見つかりません'});
	});
});

単純なalt表示よりはちょっと格好付きますね。

jQueryの小技4

今回はツールチップです。
シンプルなものですが、使いようによってはユーザービリティのアップになるはずです。

ツールチップ

HTML


<ul class="tooltip">
  <li>
    <a href="page_urlを入力">Webサイト</a>		
    <span>ホームへ戻ります。</span>
  </li>
  <li>
    <a href="page_urlを入力">Facebook</a>
    <span>Facebookアカウントをお持ちの方はぜひ「いいね!」</span>
  </li>
  <li>
    <a href="page_urlを入力">Twitter</a>
    <span>Twitterで情報をお届けしています。</span>
  </li>
</ul>

css

.tooltip {
  margin: 100px 0 0;
  list-style: none;
}
.tooltip li {
  margin: 0 10px;
  float: left;
  position: relative;
  text-align: center;
}
.tooltip a {
  padding: 14px 10px;
  display: block;
  text-decoration: none;
  font-weight: bold;
  width: 180px;
}
.tooltip li span {
  background: #ffc;
  border: 1px solid #fc6;
  height: 45px;
  position: absolute;
  top: -85px;
  left: 0;
  text-align: center;
  padding: 20px 12px 10px;
  z-index: 2;
  display: none;
}
body {
  font-size: 14px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}

js

$(function () {
$(function(){
  $(".tooltip a").hover(function() {
    $(this).next("span").animate({opacity: "show", top: "-75"}, "slow");}, function() {
      $(this).next("span").animate({opacity: "hide", top: "-85"}, "fast");
    });
});

フォームとかに使うのも良いでしょう。

jQueryの小技3

今回は画像のプリローダーです。
HTMLファイルのhead内にjQueryの本体をリンクさせる部分などは前回を参考に。

画像のプリローダー

ページコンテンツを全て読み込んでから画像を順番に読み込んでいきます。読込中はローディングgif画像を表示し、ひとつひとつフワッと表示させていきます。ギャラリーサイトにおすすめ。

HTML

<div class="imgBox">
  <img class="imgBox" height="226" width="300" src="http://webcreatorbox.com/sample/images/beach.jpg">
</div>
<div class="imgBox">
  <img class="imgBox" height="226" width="300" src="http://webcreatorbox.com/sample/images/sunset.jpg">
</div>

css

.imgBox {
/* ローディング画像のurl */
 background:url(loading.gif) 50% 50% no-repeat;
  width: 300px;
  height: 226px;
  display: inline-block;
}

js

$(function () {
	$('.imgBox img').hide(); //ページ上の画像を隠す
});

var i = 0;
var int=0;
$(window).bind("load", function() {
  //ページコンテンツのロードが完了後、機能させる
	var int = setInterval("doThis(i)",500);
  //フェードするスピード
});

ローディング画像はGIFアニメを使います。
ココにいっぱいありました。

jQueryの小技2

今回はスライドパネルです。
HTMLファイルのhead内にjQueryの本体をリンクさせる部分などは前回を参考に。

スライドパネル

プラグインなどもありますが、簡単に設置できるので試してみて下さい。

HTML

<p class="open">ボタン</p>
<div id="slideBox">
ボタンをクリックすると開き、開いた状態でボタンを再度押すと閉じます。
</div>

css

.open{
  background: #fa2;
  color: #fff;
  cursor: pointer;
  width: 50px;
  padding: 10px;
}
#slideBox{
  padding: 10px; 
  border: 1px #ccc solid;
  display: none;
}
body {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}

js

$(function(){
	$(".open").click(function(){
      $("#slideBox").slideToggle("slow");
	});
});

これなら簡単に設置出来ますね。

jQuery小技

皆さん就職に向けて自主制作に専念されていると思います。
特にjQuery系のプラグインなどを使い、ギミック的なものを追加されている方も多いようです。
なので(今更ですが)ちょっとした小技などを何回かにわけて掲載したいと思います。

まず基本的なこと

HTMLファイルのhead内にjQueryの本体をリンクさせて下さい。
他のプラグインなど使用する場合、一番最初に書くことが重要です。

<script type="text/javascript" src="js/jquery.js"></script>

リンク先バージョンなどは各自変更して下さい。
このリンクが確認出来たら、どこでも(大抵はhead下部、footer終わり)に以下の形式で、個別のコードを書き込みします。

<script type="text/javascript">
 
     $(function(){
          // ここにコードを書いていく。
     });
 
</script>

アコーディオン

プラグインなどもありますが、簡単に設置できるので試してみて下さい。

HTML

<dl id="accordion">
  <dt><a href="#">Category 1</a></dt>
  <dd><a href="#">Sub Category 1</a>|<a href="#">Sub Category 2</a>|<a href="#">Sub Category 3</a></dd>
  <dt><a href="#">Category 2</a></dt>
  <dd><a href="#">Sub Category 1</a>|<a href="#">Sub Category 2</a>|<a href="#">Sub Category 3</a></dd>
  <dt><a href="#">Category 3</a></dt>
  <dd><a href="#">Sub Category 1</a>|<a href="#">Sub Category 2</a>|<a href="#">Sub Category 3</a></dd>
  <dt><a href="#">Category 4</a></dt>
  <dd><a href="#">Sub Category 1</a>|<a href="#">Sub Category 2</a>|<a href="#">Sub Category 3</a></dd>
  <dt><a href="#">Category 5</a></dt>
  <dd><a href="#">Sub Category 1</a>|<a href="#">Sub Category 2</a>|<a href="#">Sub Category 3</a></dd>
</dl>

css

#accordion {
  border: 1px #ccc solid;
  border-top: none;
  width:500px;
}
#accordion dt {
  background: #ddd;
  padding: 10px;
  border-top: 1px #ccc solid;
}
#accordion dt a {
  color: #000;
  text-decoration: none;
  display:block;
}
#accordion dd {
  padding: 10px;
}

js

$(function() {
  $('#accordion dd').hide();
  $('#accordion dt a').click(function(){
    $('#accordion dd').slideUp();
    $(this).parent().next().slideDown();
    return false;
  });
});

この他にもslideToggleなど使用すると同じようなことが出来ます。
※コード部分に本当はCrayon Syntax Highlighterが使えるといいのですが、講師のブログはプラグインすら入れられないので・・・

デザインに使えるイラスト集素材

WEBデザインのワンポイントとして活躍するイラスト。
自作するのもいいけれど、時間のない時など手軽に使えるものを紹介します。
今回のものは日本的?女性向きのも揃っているので是非参考に。
※使用時には必ず各サイトの使用条件などを確認して下さい。

ガーリー素材

タイトルの通り「女性向け」のイラスト集。ワンポイントのアイコンとしても使えそう。

ガーリー素材

いらすとん

手書き風のかわいいイラスト集。この手のを描くのって意外と難しいので大変◎。

いらすとん

いらすとや

上記サイト「いらすとん」と同じイラストレーターさんによる無料素材。すばらしい!

いらすとや

ハンコでアソブ

ハンコ風のイラスト素材。この手のものもワンポイントとして大変重宝。

ハンコでアソブ

授業も残り少なくなりました。フリーの素材を有効に使いより良い作品を作って下さい。

デザインに不可欠なフォント

WEBデザインのみならず、グラフィックでも不可欠なフォント。
一般的にはモリサワやダイナフォントなどありますが、一式そろえるのは大変です。(でもフリーでやるなら必須ですよ)
そんな中でも無料で使用出来るものも存在します。
(日本語の作成はとても大変です。なので作者に感謝しながら使用しましょう!)
※使用時には必ず各サイトの使用条件などを確認して下さい。

えり字

手書き風のフォント。女性向きのデザインなどに良いかも。

えり字

ミウラ Liner−jr

有料版でより多くの文字が入ったものもあります。子供向けのデザインに。

ミウラ Liner−jr

フリーフォントうつくし明朝体

ダウンロードにはユーザー登録が必要ですが、FacebookユーザーはFLOPdesignのFacebookページで「いいね」をするとダウンロードできます。

フリーフォントうつくし明朝体

ロゴたいぷゴシック

見出しで使えるフォント。ちょっとこじゃれた雰囲気に。

ロゴたいぷゴシック

授業も残り少なくなりました。フリーの素材を有効に使い
より良い作品を作って下さい。

自宅でも作業したい・・・けどソフトがないなんて人へ「Dreamweaver編」

今日は横浜線が通勤時間に不通となって大変でしたね。
少々ばたばたでしたので本日は1つだけ紹介します。
是非参考に。

Aptana

Aptanaは無料で使えるWebオーサリングツールです。HTMLだけでなく、JavaScript、PHPなどの開発ももちろん可能。ターミナルを内蔵しているほか、Gitの設定をしてバージョン管理することもできます。

Aptana

自宅でも作業したい・・・けどソフトがないなんて人へ「Illustrator編」

本日の作品発表お疲れ様でした。各人思い思いのものを作られていて感心しました。
作品説明は実際の面接を想定して簡潔かつわかりやすいように、さらに工夫してみて下さいね。

では昨日に続き、自宅でも作品を作りたいけどソフトがない・・・方のために代用ソフトの紹介をします。
今回はIllustrator編です。

Mondrian

ブラウザーで使えるベクター描画ツール。SVGの書き出しOK。埋め込み用コードも生成できるので、描画したイラストをサクッとブログで紹介できるようです。

Mondrian

Inkscape

長年愛され続けているアプリで、Illustratorの基本機能は網羅しています。JPEGやGIFでの書き出しはできません。

Inkscape

日本語の公式チュートリアル

次回はwebデザインするに欠かせない?Dreamweaver編です。
(でもそれに頼らずに書けるのが一番)