Yachin29のWebデザイナーへの道 このページをアンテナに追加 RSSフィード

2014-04-16 Yachin29のWebデザイナーへの道

グリッドデザインをレスポンシブ対応にする。

| グリッドデザインをレスポンシブ対応にする。を含むブックマーク

前回の授業で作ったグリッドデザインをブレイクポイントを用いてレスポンシブ対応にする。


ピクセルにブレイクポイントを持ってくるかは、まだ流動的で決まっているわけではないが今回は、


960px以上は3カラム(PC用)
640px〜959pxは2カラム(タブレット用)
〜639px以下は1カラム(スマホ用)


にブレイクポイントを持ってきた。


ポイントは2カラム表示の際、カラム落ちしてしまう3番目のカラムの処置。
カラム落ちした3番目のカラムはそのままだと縦長のボックスになったままの状態なので、3番目のカラムにID名をつけてフロートをかける事で、カラム落ちした3番目のカラムも2カラムレイアウトに対応させる事が出来る。


3カラム(PC用)960px以上
f:id:yachin29:20140417163825j:image


2カラム(タブレット用)640px〜959px
f:id:yachin29:20140417163826j:image


1カラム(スマホ用)〜639px以下
f:id:yachin29:20140417163827j:image


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>演習:HTML5でCSSレイアウト</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="css/style.css">


<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<script type="text/javascript">
$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>
</head>
<body id="top">
<div id="container">

<div class="content">
<header>
<h1><img src="img/logo01.png" alt=""></h1>
<nav>
<ul>
<li><a href="#"><img src="img/nav01_01.png" alt="CONCEPT"></a></li>
<li><a href="#"><img src="img/nav02_01.png" alt="MENU"></a></li>
<li><a href="#"><img src="img/nav03_01.png" alt="ACCESS"></a></li>
<li><a href="#"><img src="img/nav04_01.png" alt="NEWS"></a></li>
</ul>
</nav>
</header>

<ul class="section">
<li><img src="img/ph01_l.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph02_mt.jpg" alt=""></li>
<li><img src="img/ph03_s.jpg" alt=""></li>
<li><img src="img/ph04_s.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph05_my.jpg" alt=""></li>
<li><img src="img/ph06_s.jpg" alt=""></li>
<li><img src="img/ph07_s.jpg" alt=""></li>
</ul>
</div><!-- /.content -->


<div class="content">
<ul class="section">
<li><img src="img/ph08_my.jpg" alt=""></li>
<li><img src="img/ph09_s.jpg" alt=""></li>
<li><img src="img/ph10_s.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph11_l.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph12_s.jpg" alt=""></li>
<li><img src="img/ph13_mt.jpg" alt="" class="right"></li>
<li><img src="img/ph14_s.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph15_l.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph16_s.jpg" alt=""></li>
<li><img src="img/ph17_s.jpg" alt=""></li>
<li><img src="img/ph18_my.jpg" alt=""></li>
</ul>
</div><!-- /.content -->

<div class="content" id="column">
<ul class="section">
<li><img src="img/ph19_l.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph20_s.jpg" alt=""></li>
<li><img src="img/ph21_mt.jpg" alt="" class="right"></li>
<li><img src="img/ph22_s.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph23_s.jpg" alt=""></li>
<li><img src="img/ph24_s.jpg" alt=""></li>
<li><img src="img/ph25_my.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph26_s.jpg" alt=""></li>
<li><img src="img/ph27_s.jpg" alt=""></li>
<li><img src="img/ph28_s.jpg" alt=""></li>
<li><img src="img/ph29_s.jpg" alt=""></li>
</ul>

<ul class="section">
<li><img src="img/ph30_l.jpg" alt=""></li>
</ul>
</div><!-- /.content -->

<a href="#top">TOPに戻る</a>
</div><!-- /#container -->

</body>
</html>



@charset "utf-8";
/* CSS Document */

/* reset
=========================*/
html, body, header, nav, h1, ul, li, img, a {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
}

article, section, figure, header, nav {
	display: block;
}

/* layout
=========================*/

#container {
  width: 960px;
  margin: 10px auto;
  overflow: hidden;
}
.content {
  width: 320px;
  float: left;
}
ul {
	width: 320px;
}
.content img {
  margin: 10px;
  float: left;
}
.content img.right {
  float: right;
}

a#bottom {
  line-height: 3;
  font-size: 18px;
  margin-left: 10px;
  margin-bottom: 50px;
}


@media screen and (min-width:640px) and (max-width:960px){
#container {
  width: 640px;
  margin: 20px auto;
  overflow: hidden;
}

#column {
	width: 640px;
	 }
#column ul {
	float: left;
}
}

@media screen and (max-width:639px){
#container {
  width: 320px;
  margin: 20px auto;
  overflow: hidden;
}
}

2014-03-28 Yachin29のWebデザイナーへの道

Google画像検索っぽいスライドにするjQuery(レスポンシブ対応)

| Google画像検索っぽいスライドにするjQuery(レスポンシブ対応)を含むブックマーク

Googleの画像検索で使われている、サムネイルをクリックするとすぐ下にアコーディオン形式で詳細エリアが広がり、画像をスライドさせる事も出来ます。
一応、レスポンシブ対応にもなっていますが、しっかり対応させるには画像処理をひと手間加えた方が良いと思います。
若干入れ子構造が複雑ですが、シンプルで使い易いよく出来たjQueryです。


f:id:yachin29:20140329001629j:image


デモページ
http://yachin29.com/jQueryGoogleImgSearch/




詳しい説明はこちら
http://black-flag.net/jquery/20130918-4799.html

2014-01-28 宅建業免許申請|京都宅建業免許申請センター

宅建業免許申請|京都宅建業免許申請センター

| 宅建業免許申請|京都宅建業免許申請センターを含むブックマーク


  • 京都宅建業免許申請センターでは京都での宅建業免許申請を地域密着の行政書士が支援いたします。
  • 京都宅建業免許申請代行センターでは不動産業開業に必要な手続きを支援いたします。



京都宅建業免許申請センター

f:id:yachin29:20140128223929p:image

2013-12-03 Yachin29のWebデザイナーへの道

ポートフォリオに使える「framework.js」に「fancybox」やその他諸々を付けてみた。

| ポートフォリオに使える「framework.js」に「fancybox」やその他諸々を付けてみた。を含むブックマーク

カテゴリー別に数多くの作品を見せたいポートフォリオなどに使うと便利な「framework.js
以前作ってみた「アニメーションが付いたframework.js」に今回はサムネイル画像をクリックすると、画像が拡大される「fancybox.js」を付けてみた。



今回のページに付いている機能

  • カテゴリー別に画像を表示させる。
  • サムネイルをクリックすると大きな画像が表示される。
  • サムネイルを表示する際、20を超えるアニメーションを付けられる。
  • サムネイルをクリックし表示された大きな画像をマウスで動かす事が出来る。


f:id:yachin29:20131204042649j:image

http://yachin29.com/blog/framework-fancybox/



想像以上に多くのJSファイルが必要になってしまい、色々とバッティングしてしまったが、なんとか形に出来た。

2013-11-13 Yachin29のWebデザイナーへの道

マウスオーバーするとキャプションが出てくる「jCaption」

| マウスオーバーするとキャプションが出てくる「jCaption」を含むブックマーク


画像にマウスオーバーするとaltに記述した文字がキャプションとして出てくるjQuery「jCaption」の解説。
デモサイト
http://yachin29.com/blog/12-25-1/





まずは下記の本家サイトから「jCaption」をダウンロード。
jCaption: jQuery Image Captions with Customizable Markup, Style and Animation




ポイントは

<li class="jCaption demo_1"><img src="images/01.jpg" alt="Augusta National Golf Club in USA<br>
Hole 10, Par 4, 450 metres" width="300" height="300"></li>

imgタグのaltにキャプションとして表示させたい文字を記述する。




キャプション部分の記述は「jCaption.css」で。

li.demo_1 p {
	width: 290px; /*キャプション部分の幅(padding-rightで10px入れているので-10で290px)*/
	position: absolute;
	bottom: 0; /*キャプションの出てくる場所を指定*/
	left: 0; /*キャプションの出てくる場所を指定*/
	font-size: 14px;
	line-height: 1.5em;
	text-align: right;
	padding-right: 10px;
	font-weight: bold;
}

ここで注意が必要なのは、既にjQueryによってimg要素のalt属性はpタグに変換されるようになっています。なので、キャプションに対するCSSの指定はpタグにします。
また、キャプションが出てくる場所は、positionで指定しているので、positionの記述を変更する事で下からだけで無く、上や横から出す事も可能。




下記のサイトで非常に細かく説明されているので参考に
http://gano-web.com/jquery-jcaption.html