スマートフォンサイト
今日からスマホ対応のサイトの勉強が始まりました！
一日ほぼほぼタイピングで終わりました〜
一つのHTMLにスマホ用、タブレット用、PC用の3つのCSSを作る作業を、教科書を見ながらやったのですが
書き始めはいいとして、
だんだんどのCSSをどうやってるのかごちゃごちゃになりました〜>_<
なかなか難しです。
教科書を見ながらやっていたのにもかかわらず、今日できたのはこんな感じです。
--------------------------------------html---------------------------------------------------
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <mate name=" viewport"content="width=device-width"> <title>メディアクリエ</title> <link rel="stylesheet" href="css/style-l.css"> <link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:600px) and(max-width:979px)"> <link rel="stylesheet" href="css/style-s.css" madia="only screen and (max-width:599px)"> <link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css''> </head> <body> <div id="container"> <div id="header"> <div id="site"> <h1><img src="img/logo.png" alt="PICKUP STREAM"></h1> </div> <div id="iconmenu"> <ul> <li><a href="url"><img src="img/twitter.png" alt="Twitter"></a></li> <li><a href="url"><img src="img/facebook.png" alt="Facebook"></a></li> <li><a href="url"><img src="img/googleplus.png" alt="Google Plus"></a></li> <li><a href="url"><img src="img/rss.png" alt="RSS Feed"></a></li> </ul> </div> <div id="headerimg"> <img src="img/header.jpg" alt=""> </div> <div id="nav"> <ul> <li><a href="url">HOME</a></li> <li><a href="url">ABOUT</a></li> <li><a href="url">CONTACT</a></li> </ul> </div> <div id="content"> <div class="date"><span>1</span> AUG</div> <h2>海岸のデコレーション</h2> <div class="cat">CATEGORY: <a href="url">海と海岸と空</a></div> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p> <p><img src="img/sand.jpg" alt="海岸線で生息する小さな植物"></p> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p> </div> <div id="sidebar"> <div class="menu"> <h3>CATEGORIES</h3> <ul> <li><a href="url">山と森林</a></li> <li><a href="url">海と海岸と空</a></li> <li><a href="url">都市と建築</a></li> <li><a href="url">地下</a></li> </ul> </div> <div class="munu"> <h3>RECENT POSTS</h3> <ul> <li><a href="url">海岸のデコレーション</a></li> <li><a href="url">風車と海風の関係</a></li> <li><a href="url">ツルを伸ばしてどこまでも</a></li> <li><a href="url">色とりどりの絨毯</a></li> <li><a href="url">休日に買い物にいくなら</a></li> <li><a href="url">高層ビルと風の関係</a></li> </ul> </div> <div id="footer"> <p>PICKUP STREAM</p> <small>Copyright PICKUP STREAM, all rights reserved.</small> </div> </div> </div> </body> </html>
-----------------------------------------stylesheet---------------------------------------------------------
@charset "utf-8";
/* CSS Document */
#container{
width:100%;
position:relative;
}
#iconmenu{
position:absolute;
right:8px;
bottom:6px;
}
#nav li a{
width:auto;
padding:5px 8px;
}
#site,#iconmenu {
float:none;
}
#header{
margin: 0 0 15px;
}
#content{
width:100px;
float:none;
}
#sidebar{
width:100%;
float:none;
}
.date {
float:none;
font-size:12px;
line-height:2.5;
display:inline;
padding:3px 10px;
border-radius:5px;
}
.date span {
font-size:12px;
display: inline;
}
#content h2 {
font-size:24px;
}
img {
max-width:100%;
height:auto;
}
#footer{
padding-bottom:60px;
}
------------------------------------表示画面-------------------------------------------------------
これはスマホ用サイズのなんですが、上手く出来ませんでした。
残念 >_<...
多分スタイルシートに問題が多いのかとおもうのですが、
今日はもうギブアップです。
また、明日頑張ろう☆
授業が終わってから、同じ席の友達と、ブログについて話してました。
ブログで多くの人に読んでもらったり、意味のあるブログについてですが、
今までブログってジャンル問わず書きたい事を書いてたのと、見るのも文もあまり読まず写真や気になった事をサラサラっと読んでたので、
人に興味を持ってもらう書き方とかを調べた事すらなかったのです。
今日いろいろ話をしてみて、誰かに見てもらい評価してもらったり、ファンを増やすのって大変なんだな～と思いました。
でもそれは、ブログであっても制作したHPであっても、見てる側がなにを求めているかを理解し、求めているのもに対し適切な情報を提供できなければ、誰からも見られない物になってしまうという可能性もあるかも～とか思うと、
イラレとかHTMLとかJSとかの勉強も大事だけど、分析する事も必要だな～と
思いました。
