@天獄地国の先取り最新BLOG https://ameblo.jp/okane0049/ 今話題の物や最新のものを取り上げて紹介していくBLOGです(^^)/! ja テスト HTML↓
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ja"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fluid Layout</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet'>
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Responsive Web Design</h1>
<nav>
<ul class="clearfix">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
<li class="last"><a href="#">TIPS</a></li>
</ul>
</nav>
<div id="mainImage">
<img src="img/pic_main.jpg" alt="">
</div>
</header>
<div id="content" class="clearfix">
<article>
<section>
<h2>ウェブは柔軟な媒体である</h2>
<img src="img/pic_01.jpg" alt="">
<p>テキスト文書だったWebをデザインするようになって間もない頃は、デスクトップパブリッシングの技術を参考にしてきました。<br>
そして制約されたサイズの中でデザインする印刷物のデザインがWebデザインの主流となりました。<br>
しかしそもそもWebと印刷物は異なる媒体です。<br>
長い時間を経て、印刷物のデザインは制約されたサイズでのデザイン技術を高めましが、そのままWebに反映できる技術ではありませんでした。<br>
Webは制約された媒体ではありません。環境によって縦横に変化する柔軟な媒体です。<br>
今までのWebデザインで固まった固定概念と、ピクセルパーフェクトの制約を壊してもっと柔軟になるべき時です。</p>
</section><!--/section01 -->
<section>
<h2>全てをコントロールできない</h2>
<p>Webサイトにアクセスできるデバイスは多様化し、それを使う環境・シチュエーションも多様化しました。<br>
入力方式もマウスからタッチデバイス、カメラを使って手さえ触れずに操作することも可能となりました。<br>
Webサイトを閲覧するブラウザはユーザーがカスタマイズして使うことができます。万人に全く同じような体験を提供することは実質的に不可能です。全てを制御しようとしないことです。<br>
人によって多少の見え方の違いや使い方の違いも許容できるような柔軟な思考が必要です。</p>
</section><!--/section02-->
<section>
<h2>情報を適切に届けること</h2>
<p>柔軟な媒体であり、こちらから全てをコントロールすることもできない。<br>
では、環境により提供するコンテンツも異なって良いのでしょうか？<br>
ユーザーがサイトにアクセスする理由はそのサイトのコンテンツを閲覧することが目的です。<br>
もしそのコンテンツを適切にユーザーに届けられないのであればそのサイトの価値はなくなってしまいます。<br>
閲覧するデバイスや環境で多少その構造が変わったとしてもサイトの核であるコンテンツは適切にユーザーに届けなければなりません。<br>
コンテンツファースト。コンテンツから考え、コンテンツを最優先に設計しましょう。<br>
そしてどの情報をどの形でどのように届けるのが最適であるのか。難しい問題ですが常にチャレンジし続けることで解が見えてくるでしょう。</p>
</section><!--/section03-->
</article>
<aside>
<section>
<h3>Headline</h3>
<img src="img/pic_02.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>
</section>
<section>
<h3>Headline</h3>
<img src="img/pic_03.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>
</section>
</aside>
</div><!--/#content -->
<footer>
<small>Copyright (c) Responisive web design</small>
</footer>
</div><!--/#wrapper-->
</body>
</html>

CSS↓
@charset "UTF-8";
/*初期設定
----------------------------------------------------*/
body {
  min-width: 320px;
  background: url(../img/bg_body.png);
  line-height: 1.5;
  color: #333;
}
img {
  max-width: 100%;
  height: auto;
}
.ie8 img{
  width: auto;
}
/*clearfix*/
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/*layout
----------------------------------------------------*/
#wrapper {
  max-width: 940px;
  margin: 0 auto;
}
header {
  margin-bottom: 1.5em;
}
header h1 {
  line-height: 1.1;
  font-size: 3em;
  font-weight: normal;
  font-family: 'Marcellus SC', serif;
  color: #000;
  text-align: center;
}
nav ul {
  margin: 0;
  padding:0;
}
nav ul li {
  float: left;
  width: 50%;
  border-bottom: 1px solid #0b1900;
  background: #1d4000;
  background: -webkit-linear-gradient(top, #1d4000, #183400);
  background: -moz-linear-gradient(top, #1d4000, #183400);
  background: -o-linear-gradient(top, #1d4000, #183400);
  background: linear-gradient(to bottom, #1d4000, #183400);
  font-family: 'Marcellus SC', serif;
  letter-spacing: 0.1em;
  text-align: center;
}


nav ul li a {
  display: block;;
  padding: 10px 0;
  color: #fff;
  text-decoration: none;
}

.ie7 ul{
  background: #1d4000;
}
.ie7 ul li{
  width: 49.84375%;
}
nav ul li:nth-child(odd) a {
  border-right: 1px solid #0b1900;
}
#content {
  padding: 0 10px;
}
article h2 {
  margin: 0.5em 0;
  padding: 0 0 0 10px;
  border-left: 3px solid #000;
  line-height: 1.1;
  font-size: 2em;
  font-weight: normal;
}
article section {
  margin-bottom: 2em;
}
aside{
  margin-bottom: 2em;
  background: rgba(255,255,255,0.8);
}
aside h3 {
  margin: 0.5em 0;
  font-size: 1.5em;
  font-weight: normal;
}
aside section{
  padding: 10px;
  font-size: 0.875em;
}
footer {
  clear: both;
  padding: 30px 0;
  background: #1a1603;
  color: #fff;
  text-align: center;
}

/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
  header h1 {
    line-height: 1.5;
  }
  nav ul li {
    width: 25%;
  }
  .ie7 nav ul li{
    width: 24.9166%;
  }
  nav ul li a {
    border-right: 1px solid #0b1900;
  }
  nav ul li:last-child a {
    border-right: none;
  }
   /*old IE*/
  nav ul li.last a{
    border-right: none;
  }
 

#content {
    padding: 0 20px;
  }
  #content article{
    float: left;
    width: 65.9574%;
    /*620px(8column)/940px*/
  }
  #content aside{
    float: right;
   width: 31.9148%;
    /*300px(4column)/940px*/
  }
}
@media only screen and (min-width: 960px) {
  #content{
    padding: 0;
  }
}

]]> https://ameblo.jp/okane0049/entry-11935313676.html Mon, 06 Oct 2014 16:22:54 +0900 新しくでたスマホアプリ【マギアブレイク】
今回は最近かな？リリースされたスマホゲームアプリの紹介です。

2014/9/4にアップデートされてます。
でっ！気になったのでさっそくプレイしてみました。
その名も【マギアブレイク】です。


マギ

はじめ見た感想はストーリーが充実してますね＾＾さすがストーリーが500話超あるだけのことはありますね！メインストーリーがこんなにもあるとこれも楽しみ要素の一つですね。い

バトル画面はこんな感じです。ブレイブフロンティアという人気ゲームアプリのバトル画面と似ています。また、バトル画面での操作もブレイブフロンティアとほぼ同じです。
個人の必殺ワザやみんなで力を合わせた最大の必殺ワザも使えます。
うう

クエスト画面はこんな感じ！すごろくみたいに1マス1マス進んでいく感じです。途中に分岐点などがあって進む道が選べるのも楽しみ要素の一つですね＾＾

ってな感じではまり込む要素満載のスマホゲームですね！今なら３０日間毎日ログインするだけで魔石3000円分プレゼント中です！

このアプリはAndroid、iosどちらもあります。
アプリダウンロードはこちらから
Android⇒コチラ
ios⇒コチラ

気になった方は是非ダウンロードしてみてください！
またこの記事がよかったらTwitterなどで拡散してください！

]]> https://ameblo.jp/okane0049/entry-11921948559.html Mon, 08 Sep 2014 11:46:19 +0900 みなさん、初めまして！ 長続きするかどうかはわからないですけどがんばってやっていこうと思います。
このブログでは最新ニュースや話題のものなどを取り上げていこうと思っています。

みなさんのために少しでもなれたらいいなと思っています。

今後ともブログ更新していきますのでこれからもよろしくお願いします！ ]]> https://ameblo.jp/okane0049/entry-11919986631.html Thu, 04 Sep 2014 19:02:40 +0900