レスポンシブの対応の基礎。
本日の授業は、
レスプンシブの基礎を確認した授業でした( ´ ▽ ` )ﾉ
レスプンシブとはPC画面サイズから携帯画面サイズに変化する、stylesheet作業です。
携帯サイズのに変更できるだけで、かなり需要があるHpになっちゃいます🌟
レスポンシブ基礎
用意するものは、
画像は高解度画像素材
html
| <body> | |
| <div class="entry"> | |
| <img src="img/ph1.jpg" alt=""> | |
| <h1>記事のタイトル</h1> | |
|
<p>この文章は記事の本文です。この文章は記事の本文です。 </div> |
css
| img{ | |
| border: none; | |
| vertical-align: bottom; | |
| } | |
| img{ | |
| max-width:100%; | |
| } | |
| body{ | |
| background:#E0E4E9; | |
| padding:20px; | |
| } | |
| h1 p{text-align:center; | |
| line-height:1.5; | |
| margin-bottom:1.0em;} |
リセットを記入するしてから、このように記入。
この時に一番大事なのは
imgにmax-width:100%
これを指定するだけでレスポンシブ対応になっちゃいます。
個人的にbodyのpadddingを入れ忘れ、画像がめいいっぱいだったので気をつけたい。
幅を縮小していくと、このように変化*･.:*･'(*ﾟ▽ﾟ*)'･*:.｡. .｡.:*･゜ﾟ･*
テキストも幅に合わせ回りこみ、画像も縦横比を保ったまま縮小している。
結構簡単にできたので、ぜひやってみてください。
クライアントワーク（友達のhp作り）の期限が着々と迫ってきていますが、レスポンシブをマスターすれば、素敵なHPになりますね ´ ▽ ` )ﾉ
まだまだ終わりそうにないけど、
すこしづづやっって行こう〜♪( ´▽｀)
何事も失敗して、次に進む！
みなさん失敗して凹んだりしませんか？
今日の失敗談始めます。
今日はカツ丼食べたい−！と思い作りました。
カツ丼と言っても実際はハムカツ丼です。
カツ丼作りに大活躍のめんつゆ♪めんつゆ♪
な、ない、、、、。。
じゃ作っちゃおークックパッド片手に、だし汁と砂糖と、醤油、に水。。
味見もしてバッチリ( ´ ▽ ` )ﾉ
見た目も抜群のカツ丼、いやハムカツ丼だったので
いざ食べよーと思ったら。
めっちゃ味濃い。。(~_~;) 白だしの分量を完全に間違えていた。。
ウェ〜となったのでポイしました。。。
結果コロッケ食べました。。。
失敗失敗。。
今日の授業で出来事です。llustratorで、ワイヤーフレーム作っているんですが
ロックをかけていないと、間違ったレイヤーにで作っていたり、
いまどこの部分が、コピーしたかったのかが、わからなくなりてこづりました。
なので次からは、確認してから始めようと思います。
あと大切なのは、線をピクセルの内側に入れることです。
出来上がってから、間違っていいたらショックですよね。
ま、失敗すればするほど解決策のバリエーションが増えるということですね。
とろあえず次に進むため寝ようと思いますf^_^;)
では失礼いたしまあす。*1..zzzZZ
*1: _ _
ホームページ作りの大事なこと！！
ホームページ作りで最も大事なことそれは。。。
一番伝えたいことを、シンプルに伝える。
私は、ウェブサイトの学校に入ってすごい技術で、誰にも真似できないようなサイトを作りたいと思ってました。
今もいろいろ勉強中ですが、一番大事なことを今日は改めて教えてもらいました。
すごいホームページは自己満の技術を見せつけるのではなく、見てる人の印象にいかに残るか。
行ってみたい使ってみたいと思うかということが大事です。
シンプルといっても、手を抜くわけでわありません。
その人なりの最大限を気持ちを込めて作ることです！
いいなと思ったサイトをたくさん見て、何をメッセージしているかを読み取って、
それを真似して行けば最高だと思います。
ホームページは、視覚と言葉だけで伝えるので、大変だと思いますが、
このことを忘れずに、作成していこうと思います。
今日はそんな１からウェブサイト作りたい人にオススメの９６０grid systemです。
このサイトは無料でダウンロードでき、サイズや配置をピクセル単位で管理できちゃいます。
のちにstylesheetに書き換えるときも、簡単にできます。
クライアントにも具体的に見せやすいので便利です。
イラストレーターで作れますよ。
今月はクライアントワークが始まります。
依頼者はシンガーソングライターの友達のホームページ作りなので、
より気持ちを込めて、作ろうと思います( ´ ▽ ` )ﾉ🌟
ウェブサイト学校の今日の授業。
今日は、メガドロップダウンメニューを学びました。
navを押すと内容が下に下がって中の記述が見えてくるやつです。
これってサイト上でよく使ってますよね！
stylesheetが少し複雑です。
こんな感じで、navの中でもul,li,aと指定していきます。。
transitionはhoverの時の動きを記述しています！
そのあとスクリプト指定していきます。
今回学んだのは、navをfloatではなくdisplay:flex;で横並びにできることです。
便利なので使ってみてくださいね！
学校の帰り道に
紫陽花咲いてました。(^_−)−☆
癒されます♪
明日は雨っぽいですが、紫陽花紫陽花見て、乗り切りましょう〜( ´ ▽ ` )ﾉ。
Blog。日々書くことが大切。
久しぶりの更新のakiです。
梅雨に入り気分は憂鬱になりがちですね´д` ;
でも、そんな時は、この曲を聴いて元気出してます( ´ ▽ ` )ﾉ
ナオト インティライミさんの『Brave』です♪。
元気がない時は、めっちゃ元気が出るので聴いてみてくださいね！
さてさて。
今日のウェブサイト授業は、１カラムの携帯サイズ対応のhpを作る。でした。
今や携帯需要がほとんどで、これができないと意味がない時代だそうです。
レスポンシブ対応にするには、htmlの中に、viewport contentを入れます。
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
| <LINK rel="STYLESHEET" href="css/style.css"> | |
| </head> |
stylesheetの中には、
@media screen and (max-width: 767px){}と記述し、％でサイズを可変できるように
します。
ちなみにタブレットサイズは、
@media screen and (max-width:959px){}と記述します。
今回は携帯用だったので。↓
@media screen and (max-width: 767px){
#container{
width:63%;
padding:1%;
}
のように、containerのwidth（幅は元のスタイルシート）のサイズに合わせた％に書き換えます。今回は６３％です。
他の要素も指定していきます。
結構簡単のようで、難しいです。
paddingやmarginをそのままの比率で可変する場合は、
box-sizing:border-boxを付け加えます。
今日はこれを忘れないように、復習頑張ります。
★ Blog.....
毎日書くのが習慣になれば、自分の記録としても残るし、皆様の意見も聞けるし、
良いことばかり〜
ビギナーのブログ会にも参加してみたんですが、皆さん本当にいい人ばかりで、
Blogの内容もためになる話や、興味がわくことばかりですごいと思いました。
そんな上級者の方もはじめは、あまり読まれなかったそうです。
一つ言えることは、、、、、、
書き続けること！
それが秘訣だそうです。
内容はなんでも良いし、そのうちに上手くなれるときいて、気軽に書けるようになりました！ありがとうございました( ´ ▽ ` )ﾉ
まだ書くことに抵抗がある初心者の方、一緒に頑張りましょうねー！！！
webデザイナー目指して勉強中です。
ウェブデザイナー目指し、職業訓練学校通い中の、akiです！
３月に入校してから、早２ヶ月が経ちます。
ブログ更新できなかったの悔しいです(´・ω・｀)
今日はJavaScriptの試験でした。
ギリギリ時間内にサーバーアップできてほっとしています☆
今までの授業内容は、おもにHTML、CSS、イラストレーター、フォトショップでした。
最初のブログでもお知らせしたとおり、キーボードも打てなかった私が、今では一応HPが形なり、画像を入れこんだり、レイアウトを動かせるようになりました。
いや〜webサイトが形になると嬉しいですね〜！
一応紹介。
HTMLとは
Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。 普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。
cssとは
（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。
アドビ(Adobe)フォトショップ、イラストレーター
（アドビ イラストレーター）は、アドビシステムズが販売するベクターイメージ編集ソフトウェア（ドローソフト）である。
JavaScriptとは
主にWebページに組み込まれたプログラムをWebブラウザ上で実行するために用いられるプログラミング言語の一つ。 いわゆるスクリプト言語あるいは軽量言語（LL：Lightweight Language）の一つで、実行環境をWebブラウザに組み込んで利用されることが多い
。。。とまあ覚えることが多く、挫折しそうなこともあるけど、復習して
がんばります〜。
ちなみに試験は、無料レンタルサーバー（WEBCROW.）にアップして採点してもらいます。
レンタルサーバーもたくさんあるので、迷いますよね。
でも無料に惹かれます。
たった今フリー素材、いいのがみつかりました(*^^*)
これからもWebサイト制作の授業で思ったこと、学んだこと、解決策やなど、発信していきます！
授業以外でも、感じたこと発信しますので、よろしくお願いします(*^^*)
椎間板ヘルニアは突然きます。
ヘルニアになってしまった。整形外科体験談。
天気がよく晴れていて気持ちが良い朝だった。。。
さっ起きよう。 ん？起きれなかった。腰に激痛が走り、起き上がることもできない。
１０分以上かけて起き上がり、通常歩いて１０分くらいの整形外科に２５分位かけてなんとか向かった。
整形外科へ。
平日の１０時なのに、患者さんでいっぱいの病院で、受付を済まし呼ばれるのをひたすら待った。通院している患者さんはほぼ高齢者で、一種のコミニュケーションの場とかしていた。
病医院なのに明るい感じで、緊張がほぐれた。
待つとは思っていたので本を持参。読みながら時間を有効に使ったので、
無駄な時間がなく有意義に過ごせた。
一時間半待ってやっと呼ばれ、先生に症状を伝えた。
腰痛は病気じゃない。症状なんですよ。
腰痛の原因は３つあって、あなたの年齢でしたら椎間板ヘルニアかもしれないので、
MRとレントゲン撮りましょう。
MRは初めてや(´・ω・｀)
緊張。。。
ドームみたいな奴の中に入らなあかんやつやろ。意外にトンネルみたいに長くなく
羽のない扇風機みたいに短い距離だった。
機械の指示に従って腕を交差して、手は肩に乗せたまま待機。
何やら動き出した。機械の指示が聞こえづらくて、「呼吸を止めてください」
的な声が聞こえたが、焦ってワタワタしてしまった(・∀・)
続いてレントゲン。これは、健康診断で毎回やってるので慣れたもの。。
やっと終わり診察結果 ドキドキでしたが、やはり、「椎間板ヘルニア」だった。
でも先生は「心配ない大丈夫！」と若干片言だったが、安心する言葉をかけてくれた。
注射でなおしてくれる。
手術とかしないといけないんじゃないかと考えていたから、ホッとした。
軽い症状だったらブロック注射を、定期的に打てば治っていくそうだ。
神経ブロック注射
障害を起こしている部分に、直に局所麻酔薬を注入し、神経を遮断することで、痛みを和らげます。炎症を抑えるステロド剤も注入することで症状を軽減させます。
後日注射をしに行きました。
まとめ
突然痛みにに襲われる 恐怖は辛いと思いますが、今の時代は技術も発達して簡単に
治ったりできるだなと実感した。
しかし健康が一番！！みなさんも、普段から歩くときの姿勢を正したり、重いものを持つ時は、片方の肩だけで持たないなど、工夫をしてくださいね！
私もリュックを購入しました＼(^o^)／
