しろんぱ!

目指せWEBデザイナー!初心者がWebデザイナーを目指して頑張るブログです。

大掃除したりデザイン考えたり

こんばんわ、WEBデザイン勉強中のしろです。

どこ行っても混んでて年末!って感じですね(笑)

 

 

今日は朝から大掃除です(;^_^A

掃除が苦手な私にはとても辛い…(笑)

 

 

 

レンジやトースター、食器棚を掃除してました。

あの頑固な汚れ…本当に嫌いです><

 

高圧洗浄機をつかっても落ちないので、

あきらめてマイナスドライバーでゴシゴシ削りました(笑)

お掃除のプロに見られたら怒られそうです(-_-;)

 

 

明日は祖父の家を掃除しに行かなくてはいけないので、

なるべく今日で終わらせたかったのですが…

まだ玄関、トイレ、洗面台、窓拭きが残っております。

あと自分の部屋(;^ω^)

早起きして掃除するしかないですね…

 

 

母親はあきらめて元旦から掃除するって言ってます(笑)

 

 

自分のサイトのデザインを考えてみる!

 

休憩がてらに自分のサイトのデザインを考えておりました!

学校で作ったサイトと構造は同じなのですが…(;^ω^)

 

f:id:S1r023:20171230210415p:plain

 

復習もかねて1からコーディングしてみようと!

1月は自分のサイトを作っていこうと思います(/・ω・)/

 

 

少しずつ凝ったデザインも考えられるようになりたいですね。

来月から電車通勤になるので、通勤時間を利用して、

いろんなホームページをみていこうかなって思います(^▽^)/

 

 

少しでも、自分の中のデザインの引き出しが増えるように!

 

 

 

さて、もう少しだけ掃除をしてきます。

大掃除がんばりましょうね(^▽^)/

ここまで読んでくださりありがとうございます!

それでは!

下線をつけたりけしたり

こんばんわ、Webデザイン勉強中のしろです!

日に日に寒くなっていきますね!

寒いの苦手な私は日に日に朝が起きれなくなっていくのです…(笑)

 

 

 

今日もトレースの続きをしておりました!

ペースは遅いですが、ちまちまと進んでおります(^▽^)/

 

 

やるたびに上手くいかないところが出てきたり、

分からないことが出てきて大変です…

 

 

Webで調べれることは全部試して、

それでもわからないものは先生に聞くのです。

いつも増えすぎて何を聞くかを忘れてしまうのもしばしば…(笑)

最近は聞くことリストを作り出しました!

 

これで忘れません!(笑)

 

 

 

 

 

 

 

<a></a>の好きな所に下線をいれたいのに!できない! 

ちなみに、わからないのはこちら…

f:id:S1r023:20171218223702p:plain

 

<a></a>タグの下線です。

最後の > までリンクになってるのですが、下線は文字のみ…

<a></a>に対してCSSで下線を入れたのですが、

まで下線が入ってしまうのです…

 

あ、リセットCSS入れ込んでます。

 

調べて<u></u>を使うってのを見つけたんですが…

他のサイトでいずれ無くなるからCSSで!っていうのも

見つけてしまい、どうしたらいいのかわからずでした…

 

 

 

 先生に聞くことリストに追加ですw

 

 

 

そろそろ本気で年賀状の準備をしなくては…!

今週はコーディングより年賀状の製作に精を出したいと思います(^▽^)/

 

 

 

ここまで読んでいただきありがとうございます(n*´ω`*n)

それでは!

 

 

 

 

 

 

 

 

 

IEとGooglechromeでの見え方の違い

こんばんわ、Webデザイン勉強中のしろです。

今日はすっごく寒いですね!

朝方に雪が降ったなんて話もチラホラ聞いたので、

凍えて死んでしまいようでした(笑)

 

インフルエンザが流行りだしておりますので、

暖かくして風邪を引かないようにお気を付けください。

 

 

 

 

 

 

 

どうしてこうなった

さて、昨日学校で作っていたトレースを

IEで開いたら、崩れていました...

 



chromeで開くと何ともありません…

 

 

この現象はなんなんだ!!!?

正直何が何だか…(´・ω・`)

 

 

 

何か方法があるのでしょうか…

わかりません><

これも調べてみなくてはいけませんね!

 

 

どっちでも同じように見えるといいのですが、

難しいですね(´・ω・`)

もう少し頑張ってみたいと思います。

 

 

 

 

 

自分のサイトを作ろう!

同時並行で自分のサイトを作ろうと思い、構想を考え始めました!

最初はシンプルにしてみようと思ってます。

 

 

でも、習ったことは入れ込んで、

徐々に凝ったサイトに作り替えていきたいなって思います!

トレースも大事ですが、サイトを運営することも頑張りたいですね(^▽^)/

 

 

作ってみないと、やってみないと、

分からないことってたぶん出てこないし、

分からないことを学校にいる間にたくさん聞いておきたいですもんね!

 

 

さあて、少し作業をして来ようと思います。

それでは!

 

ナビゲーションの次もナビゲーション

こんばんわ、Webデザイン勉強中のしろです。

今日も寒かったですね…><

寒いの嫌いな私にはとても辛い日々です(笑)

 

 

 

ちまちまとサイトのトレースをしてるのですが、

なかなか進んでおりません…

仕事の休憩時間に出来たらいいなーと思うのですが、

タブレットでもコーディング練習はできたりするのでしょうか(゜゜)

また調べてみなくてはいけませんね…!

 

 

 

 

 

 

 

 

 

f:id:S1r023:20171213223618j:plain

少しずつナビゲーションの部分が出来てあがってきました!

 

 

練習のためのトレースはどこまで露出していいのかわからないので、

ロゴやわかってしまいそうな言葉は消してあります。

 

 

 

 

まださらにこの下にナビゲーションがくるんですけど、

何ナビゲーションになるんだろう…(;^ω^)

そろそろちゃんと名称も覚えていきたいですね…

 

 

 

覚えなきゃいけないことがたくさんありますね!

明日もトレースの続きや調べものを頑張りたいと思います。

 

 

今日はとっても短いですが、この辺で…!

最後まで読んでいただきありがとうございます。

それでは!

お問合せフォームの復習をしよう!

こんばんわ、Webデザイン勉強中のしろです。

明日は7℃ですって!

寒いの嫌いな私には辛い気温です…

さて、先日スクールにてお問合せフォームの作り方を学んできましたので、復習をしていきたいと思います。

 

 

目次

 

 

 

 

 

 

 

 

 

基本的なフォームタグを覚える

 

<form method="post" action="送信先の指定"></form>

入力フォームを作るときに入れるタグです。

post本文としてデータを送信する時に使います。

 

<label></label>

フォーム部品のラベルです。

これを付けることでフォーム部品と関連付けれます。

 

<input type="text">

1行のテキストを入力欄です。

名前とかメールアドレスとか打ち込んだりするときに使うやつです。

 

 <input type="password">

入力すると***ってなるやつです。

 

<input type="radio" >

ラジオボタンです。

性別などどちらか1つにチェックを入れたいときに使う丸いボタンです。

 

 <select></select>

プルダウンメニューをつくるやつです。

<option></option>で選択肢をいれていきます。

 

 <input type="checkbox">

チェックボックスです。

複数の選択肢を選んだりするときに使うやつです。

 

  <textarea></textarea>

複数行のテキストを入力できるスペース作れます。

 

 <input type="submit">

フォームの送信ボタンが作れます。

 

 

 

 

 

 

 

 

お問合せフォームを作ってみた

f:id:S1r023:20171211224415p:plain

こんな感じで打ち込んでみました!

少しCSSで装飾をしたのがこちら…

 

f:id:S1r023:20171211224419p:plain

 

ちょっとそれっぽくなりました!!

ここに、プログラムを入れ込んでいくとフォームとして成り立つみたい!

なんか、お問合せと会員登録みたいなのが混ざってる感じですね(笑)

 

次は実際にあるフォームを見ながらトレースしていけたらなって思います(^▽^)

 CSSでの装飾も知らないことがたくさんあるので、こちらも少しずつできるようになりたい!!

 

明日はおやすみなので、久しぶりにお出かけしようかなって思います(*'ω'*) 

 風邪等に気を付けてくださいね。

ここまで読んでいただきありがとうございました。

それでは!

 

 

 

 

横並びのナビゲーションの復習

こんばんわ、しろです。

昨日面接したばかりですが、今日早速連絡がありました。

結果は…なんと...

 

 

 

採用でした…!!!!

 

 

良かったー…!

これで来年からも仕事があるーーー!!!ε-(´∀`*)ホッ

それにしてもなんて早い結果なんでしょう…初めての早さです(笑)

さて、明日は学校なんですが、フリーランスでお仕事されてるWebデザイナーさんからお話が聞けるみたいなのです…!

どんなお話が聞けるのか、今からすごく楽しみです(*'ω'*)

明日のためにも横並びのナビゲーションの復習をしたいと思います。

横並びのナビゲーション

今回は、基本的な横並びのナビゲーションの復習をします('ω')

↓みたいなナビゲーションを作ります。

 

 

    home     about     shop    

 

 

HTML

<ul class="g_navi">

     <li><a href="#">home</a></li>

     <li><a  href="#">about</a></li>

     <li><a href="#">shop</a></li>

</ul>  

 

CSS

 

.g_navi{

      list-style: none;     ①リストマークを無くす

      overflow: hidden;    ③フロートによる問題の解消

}

 

.g_navi li{

     float: left;        ②フロートをかける

}

.g_navi li a{

     display: block;      ④a要素をブロックレベルにする

     padding: 5px 10px;      ⑤a要素にpaddingを設定する

     text-decoration: none;     ⑥a要素の下線を無くす

}

 

あとは文字に色を付けたり、liに対して背景色をつけたり、a要素の上にカーソルが来たら色がつくようにしたりしてくとボタンっぽくなる!

ボタンみたいなナビゲーションの復習はまた後日にしようと思います。

 

 

 

今日はここまで(^▽^)/

それでは!

 

色がわかるのはなぜだろうか

こんばんわ、しろです。

今日はとても寒かったですね…

みなさま、風邪を引かないようにお気を付けくださいね。

色が変わっちゃった…

さて、今日も少し昨日の続きをしてたのですが…

色をトレス元のサイト様のスクショから色を拾って入れたのですが、フォトショやDwではちゃんと同じ色で出てるのですが、確認すると違う色になってるんですよ…

これはなんていう現象なのでしょうか。

また調べてみなくてはいけませんね…

f:id:S1r023:20171207012800p:plain

サイズは変わったけど

テキストエリアのサイズを変えて色を変えようしてですが、変わらない…

input{

        width: 50px;

        background-color: "#dddddd";

        color: "#757575";

        border: solid 1px #dddddd;

}

CSSでこんな感じに打ち込んでみたんです。

変えたいのはテキストエリア内の文字の色と、背景色です。

サイズ以外は変えれないのかな???

こちらもまた調べてみなくちゃいけませんね。

 

 

 

今日は短いですが、この辺で。

明日はバイトなんですけど、面接があるのです。

受かるといいなーと思いつつ証明写真まだ印刷してないことを思いだしました(笑)

契約社員は2社ほどご縁がなかったので、そろそろ次の仕事が見つかりますように!

それでは!