マージンの重ね合わせ
どうも、こんにちは。
気づけば夏休み終了まで１週間切ってます。恐ろしいです。ガクガクブルブルです。もっと休んでたい_(：3 」∠)_
今回は、復習のつもりで最初の本をパラパラとめくっていた所、ちゃんと理解が出来ていない部分を発見したので、しっかり覚えられるようにここで纏め直してみようと思います。
その部分というのが、ズバリマージンの重ね合わせです。
続きを読む
近況報告？
どうも、オオキタです。６日ぐらいぶりでしょうか。祖父の四十九日で帰省する予定があったので、帰省先でブログ更新しようと思ったら実家のPCだとはてなブログが動かず、これだけ空いてしまいました。XPだとはてなブログ動かないんですかね・・・？
さておき。とりあえず、最近の学習についての近況を報告しようと思います。
というわけで最近なのですが、一度やってみない事には始まらないと思い、実際に簡単な練習サイトのコーディングをやってみたりしています。このコーディングをやってみる事については、前の記事でも少し触れましたかね？
最初は、一つの簡単なレイアウトをしたサイトから、そのレイアウトを元に軽くデザインを施したサイトへのコーディングをやってみたのですが・・・それだけでも中々難しかったですね・・・(´・ω・`)
至る所でつまずきまくり、本を開いてネットで調べてコードやレイアウトとにらめっこして・・・って感じで、気づいたら一日中やってたりとかｗ
結局、丸二日やっても終わらなかったのですが・・・始める前に「一からってわけでもないし、割と簡単そうだからなんとかなるだろ！」とか思ってた自分を殴り倒したくなりました・・・ｗ
ですがやはり、一度やってみただけでも得るものは大いにあったと思います。どのサイトに行っても「とりあえずコーディングをやってみよう」と書かれている理由がよくわかりました。
コーディングをやってみる事で、本の通りに動かすだけでは分からなかった動作や、分かっているつもりが理解できていなかったタグや属性の発見、曖昧だった部分の復習など、様々な事を学ぶ事ができました。コーディングの実践練習は、思っていたよりもずっと自分の力になったのではと思います。
実際、その後にまた別の練習サイトを今度は一からコーディングしてみた時は、一回目よりはまだスムーズにコーディングが進んだ・・・ような気がします。それでも普通につっかえたりはしましたし、ただの気のせいかもしれませんがｗ
そんな訳で、最近はこんな具合にコーディングに四苦八苦していました。結構つらいですが、今は我慢してやっていくべきなんでしょうね・・・まぁ、上手く行けた時は嬉しかったり楽しかったりもするのですけども。
ただ問題は、コーディングに時間費やしすぎているせいで新しく買った本を読んだり内容をやってみたりが全然出来てない事ですね・・・
とある知り合いからも、実際にやるよりもう少しサイトのソースを解読してみたりとかしてみてもいいんじゃないか、という旨のアドバイスを頂いたので、そういう事をやる時間も取り入れつつ本も読み進めていきたい所です。・・・もっと大きな問題として、来週辺りからもう大学の後期が始まってしまう事もあったりしますが・・・(´・ω・`;)
学習の不安とか、色々
どうも、オオキタです。もう私に毎日更新は無理だなという事が発覚致しました（白目
なのでもう割り切って２，３日に１度更新を基本にします・・・無理に毎日やろうとするよりはこの方がいいのかなと。見てくださっている方々には申し訳ないですが・・・
それで今回ですが、学習した事についてでなく、今特に学習したい事について少し。というのも、昨日一昨日にやった内容に真新しい部分があまりなかったので・・・もう少し進めていけばなにかしらありそうなもんですが。
なので、今回はこれからの学習の不安要素だとか疑問だとかを記しておこうかと思います。
デザインについて
WEBデザイナーになるなら当然だと思うのですが、デザインについてのセンスが必要になるものだと思ってます。これに関して、自分にはちゃんとあるのだろうかと。
いろんなサイトを巡れば、「センスは磨かれる」だとか「続けれいれば必ず身につく」だとか書かれてはいますが、それでもやはり不安がかなり大きい。勉強する意思がないというわけではなく、実際にデザインについての本を先日二冊程購入しましたが、これらを読んだとしても果たして・・・という感じで。元からネガティブ思考ではあるのですが・・・
それでも、結局やるだけやるしかないのは当然ですし、その二冊も自分が「読んでみたい、面白そう！」と思って買った本ですので、モチベーションがあるというのが救いではあるのですけど。
・・・大丈夫かなぁほんとに(´・ω・`)
コーディングの練習とか
WEBページを作る本を一冊終えて、HTMLやCSSも基本的なタグなどは把握できたとは自分でも思います。しかし当然、扱えるかどうかは別問題。実際にコーディングしようとすると、まずうまくいかないものなんだろうとは予想できています。実際にコードを書いてみる、とにかく実践を行うのが大事と、どこのサイトを巡っても書かれていますしね。
ただ、このコーディングの練習というのは、何をどれぐらいやればいいのかイマイチ要領を得てない感じがあります。
一応自分でサイトを調べて、コーディングなどの練習ができそうなサイト（練習問題としてサイトのページがあり、それを自分でコーディングしていくようなもの）をいくつか見つけたのですが、これだけでいいのだろうかという不安混じりの疑問があります。もっと良い練習方法があるのではないのかという疑問も。
せめて、そういう演習メインで取り扱っている本を買って一冊終えれば少しは自信もつくのかもですが・・・そういうのってあるのでしょうか。本屋で探してた時はそういう感じのものは見つからなかったのですが・・・見落としてたりしたのでしょうか？
一応、今日からそういうサイトでコーディングの練習をしていくつもりですが・・・ちゃんとした技術が身につくのはいつになるのか・・・
・・・なんだか愚痴というか、ネガネガとした感じの内容になってしまいましたが。不安は書いてでも吐き出すと良いと聞いた事があるので、勝手ながらこの場を借りて吐き出させてもらいました。・・・見てくださった方で何か教えてくれる方がいらっしゃるかもしれない、という淡い希望もあったりはするのですがｗ
最近は、学習によさそうな本を探す傍ら、WEBサイトの方も有効に活用できそうなものを探して、片っ端からお気に入り登録したりしてます。勿論探すだけではなく、買った本の内容だとかも進めていますが。
とりあえず、まだ自分で一からブログ作ったりもしてませんし、まだまだこれからだとは思うのですが・・・不安は尽きませんね・・・
レイアウトの段組みとレスポンシブデザイン
どうもこんにちは。とうとう三日更新してませんでしたオオキタです。
一昨日とその前の日は、親が東京きてたりサバゲー行ったり飲みに行ったりetcでそもそも勉強ができなかったりしてました。まぁ、サバゲーも飲みも楽しかったですし、親に自分の今後の事について話せたりとかしたのでよかったですけどね。
そして昨日に関しては、勉強はしたのですが更新する前に寝てしまったという・・・決してゲームにうつつを抜かしていたわけではｹﾞﾌﾝｹﾞﾌﾝ
さておき。とりあえず、昨日勉強した事について復習も兼ねて書き連ねようと思います。今回は、段組みだとかレスポンシブデザインについて。
段組みでのレイアウト
・・・はい、今回申し訳程度にスタイルシートでデザイン弄ってみました。ほんとに申し訳程度ですがｗ
まぁ、少しずつこういうのも増やしていけたらいいなぁと。
それで、段組みについてですが。これは前の本でも触りだけ学習したのですが、今回はもう少し詳しくやった内容でした。
具体的には、divでマークアップしたbox1~box4というclass名の４つのボックスをCSSでいじっていき、いくつかの２段組みや３段組みのレイアウトを行うというものです。floatでボックスを回り込ませるのは前と同様ですが、box1,2を横に並べてその下にbox3,4を並べる場合には、box1,2を新たなclassでグループにしてclearfixを行ったりする必要があるようです。
このclearfixというのは、「フローティングボックスが後続のボックスのレイアウトに影響を与えないようにするためのテクニック」だそうで、今回で言うと下にあるbox3がbox1,2の右側に回り込まないようにする為のものになります。ここは、単純に新たなクラスにoverflow: hiddenを適用したり、横幅の合計割合が100％を超えると起こるカラム落ちという現象を利用する事でも同様の事ができるようです。
レスポンシブデザインについて
続いてレスポンシブデザインについてです。これは簡潔に言うと、ボックスを使って設定した段組みを状況によって解除するものみたいですね。WEBデザインに絡めて言うと、AndroidやiOSで見ているかPCで見ているかによってデザインを変更したりできるようで、いかにも現在では必須でありそうなデザイン方法です。
基本的には@media(){}（メディアクエリ）で囲み、横幅が何px以下の時に横並びを解除するかというブレイクポイントを設定する事で、レスポンシブデザインが可能になるようです。
勿論応用も必要で、横並び時に中央に持ってくるメインコンテンツを解除時には上から2番目の位置に持ってくるようにしたり、横並びの解除に中間のステップを追加してボックスの並びを3段階にしたりと、様々なレイアウト方法があるようですね。
現在学習している本のChap.2以降も、複雑なレイアウトをこれらの組み合わせで構築していくようで、レスポンシブデザインについて更に多くの事が学べそうで楽しみですね。ガンガン進めていきたい所です。
１冊目終了、と今後について
どうもこんばんは、オオキタです。本日、ようやく購入した本１冊の内容を全て終えました。10日近く（それ以上？）かかった感あるので、ちょっとスローペースかなぁとか思ったり。もっとペース上げたいところですね・・・
今回学んだのは、古いIEブラウザへの対応だとか２段組みレイアウトの作り方でした。
古いブラウザへの対応に関しては、IEの独自拡張であるfilterプロパティやSVGグラデーションなどを使って対応を行うようですね。・・・ただ本には、こういった下位互換を行う事自体は今後無くなっていく方向になっていってるようですが。
しかし、実際はどうなんでしょう？ 以前に小耳に挟んだ所によると、会社のPCではインストールされているOSなどが未だに古いものが使われていたりする様で、ブラウザに関しても同様だったりしないのか・・・まぁ実際、できないよりはできる方が良いんでしょうし、覚えておいて損はないでしょうけども_(：3 」∠)_
２段組みレイアウトに関しては、思ったよりも簡単でしたね。divでマークアップした2つ以上のボックスを、それぞれfloatタグで左右に配置する、といったもので、今までに出てきたタグであっさりできるんだなぁと拍子抜けでした。
逆に言えば、基本的なタグ等でもうまく扱えば、いくらでも見栄えを良くしたり、少し捻った見せ方をできるって事ですね。
と、これだけで終わると少し短いので、本も１冊終わりましたし少し今後の事についても。
１冊本が終わるという事で、もう２冊追加で本を購入しました。CSS3のリファレンス本と、レスポンシブデザインのつくり方について学べるデザインブックです。
前者はとりあえず買っておいたって感じですが、後者は結構大事なレイアウトについて学べそうなので、明日からでもすぐに取り掛かる予定です。単純に気になるというか、早く作ってみたくて楽しみでもありますので！
それと、サイト制作のための基本も終えましたし、同時にWordPressを使って一つWebサイトも作ろうと考えています。・・・とは言っても、向こうもブログになる予定ですが。
内容については検討中ですが、とりあえずドメインやレンタルサーバーにも早く触れてみたいので、できるだけ近い内に作る予定です。・・・WordPressについてよく分からないので、どっかのページで説明を読みながらの作業になるでしょうけども・・・(´・ω・`)
こうやって、新しい事やってみるのは不安もありますけど楽しみでもありますね。もっと色んな事ができるようになったらもっと楽しくなるはず！ って前向きに考えて、今後も頑張っていきたいと思います！
テーブル、投稿フォームの作成
極力毎日更新しようと思ってたが二日目にしてミッション失敗するという三日坊主にすら笑われてしまうこのていたらく。
別に学習や更新が面倒というわけではないんだけどなぁ・・・という言い訳を一応言ってみる(´・ω・`)
さて、というわけで今回ですが、テーブルと投稿フォームの作成について書いてみようかと思います。
正直、HTMLでこんな事までできるんだなーとびっくりしました。テーブルについてはボーダーうまく調整してやったりするのかなとか思ってましたし・・・
と、ここでいうテーブルっていうのは表の事ですね。このテーブルを作成するには、table,tr,th,tdの四つのタグを使います。tableタブでテーブルを構成し、trタグで行を、thタグで見出しセル、tdタグでデータセルを構成して作成します。形としては、tableの中にtr、その中にthとtdになりますね。
trの行を構成するってイマイチピンときにくいですが、まぁこのタグの中身が一行の内容となる感じです。thタグの見出しセルというのは、そのまんま見出しを記載したセル。tdタグのデータセルはその見出しについての内容を記載したセルになっている、と。
試しに、２行だけですがテーブルをHTML編集で入れてみました。
| １行目見出し | １行目データ |
|---|---|
| ２行目見出し | ２行目データ |
というわけで、これがテーブルです。ソースでみると、
<table>
<tbody>
<tr>
<th>１行目見出し</th>
<td>１行目データ</td>
</tr>
<tr>
<th>２行目見出し</th>
<td>２行目データ</td>
</tr>
</tbody>
</table>
こうなります。・・・このtbodyってなんなんでしょうね、勝手に追加されましたが・・・あとで調べておきましょう。
ともあれ、表をページに入れるにはこのtableなどのタグをうまく使う必要がありますね。これもしっかり覚えておきたいです。
そして、次に投稿フォームの作成。これは、よくあるお問い合わせページのような名前やコメントなどの情報を設定した場所に送るアレですね。ホームページ作成して運営するならこの手のものは必須でしょうし、こっちも重要そう。
投稿フォームの作成に主に使うタグは、投稿フォームであるという意味付けを行うform、ユーザーが情報を入力できる場所や送信するボタン等を作成するinput、コメント等複数行の情報を入力できる場所を作成するtextarea、これらの入力欄が何の入力欄なのか明確にさせるラベルの意味付けをするlabelの４つ。これらを使って、投稿フォームを作成します。
また、inputやtextareaタグを使う時には、name属性でコントロール名を指定する必要があります。このコントロール名は、要は送られた情報を仕分ける為の名前のようなものですね。二つの別々の情報が送られた時、片方は名前で片方はメアドだ、と判別するためのような感じです。
例えば、名前とコメントを入力して送信してもらう場所を作る場合、
<form>
<p><input type="text" name="name"></p>
<p><textarea name="comment"></p>
<p><input type="submit"></p>
</form>
といったようになります。ここでinputにあるtype属性は、テキストの入力欄を作成するのか送信する為のボタンを作成するのか等の判別のためのものですね。textareaにtype属性がないのは、元々テキストを複数行入力する為のタグですので、type属性での指定は必要ないから・・・と、思われます。・・・ここ本には書いてないので推測ですが。
ここでは省略しちゃってますが、もちろんこのテーブルと投稿フォームも、見やすいようにスタイルシートで調整しないといけないんですよね・・・テーブルとか、初期のままだと見づらすぎて仕方ないですし。
タグの使い方に加えて、それを良く見せるための方法も学んでおかないといけないのが大変な所ですねー・・・とはいえ、それが楽しくもあるわけなんですが。
