サイト制作勉強日記

1 ：◆IeBPPcOCDmAV：2015/02/12(木) 02:49:33.73

これから主流になっていく？HTML5 CSS3で作っていこうと思っています。

17 ：1 ◆ePTReJanhQhu：2015/03/01(日) 14:01:16.74

本当はこんなセコイやりかたより、画像を使った方が良いのだろうけど、
一々画像編集したりするのも面倒なのであえてテキストにした。

18 ：無名：2015/03/01(日) 22:49:37.85

>>17
画像だと表示が重くなったりもするから、テキストで良いと思うよ
なんにせよ乙です

19 ：1 ◆ePTReJanhQhu：2015/03/03(火) 00:23:58.13

>>18
どうもありがとう
HTMLは何回も触ったことがあるけれどCSSに触ったのは初めてと言っても良いくらいなので、
どこかおかしいところがあればどんどん突っ込んでください。

20 ：無名：2015/03/08(日) 22:04:05.09

>>19
いえいえ
実は自分も初心者なんだｗｗ
むしろ貴方の方が詳しいよ
上から目線のアドバイスに聞こえちゃってたならごめんね

21 ：1 ◆ePTReJanhQhu：2015/03/11(水) 02:10:03.89

サーバ管理の方が難しくてサイト制作は中々進まず
今日は時間を取ろう

>>20
> 上から目線
そんなことないですよ
ちょっと触ったことしかない初心者なので反応してくれる人がいて嬉しかったです

22 ：1 ◆ePTReJanhQhu：2015/03/11(水) 02:13:42.59

サーバ構築（といっても完全に趣味の範囲）はしたことありますがサイト作成の方は殆ど経験無
Bootstrapとか配布されているフリーのテンプレートhtmlを少し触ったことはありますけどね
自分で学んで作った方が楽しいと思ったのが今回のきっかけです

23 ：1 ◆ePTReJanhQhu：2015/03/11(水) 20:32:19.11

という訳でちょっと作る時間を取りました。

前からの変更点
・resetcssを変更
h1とかの装飾を解除しました

・ロゴ画像の作成

・その他いろいろ

24 ：1 ◆ePTReJanhQhu：2015/03/11(水) 20:36:51.01

・CSSの変更
aタグの下線を消した

a {
　text-decoration: none;
}

・グローバルナビの背景色を変更
・同aタグの色を変更(color)
.global-nav ul li a {
　display: block;
　color: #ecf3f9;
　height: 50px;
　background: #1568b1;
　border-right: 1px solid #000;
　text-align: center;
}

25 ：1 ◆ePTReJanhQhu：2015/03/11(水) 21:52:17.11

今日はトップページの見出しとかを作成した。
HTML
<div class="headline">
　<div class="wrap">
　　<h1>インパクトのある？見出し</h1>
　　<p>ここにテキストを書く予定！</p>
　</div>
</div>

<div class="contents">
　<div class="page-header">
　　<div class="menu first">
　　　<h1>入れ物</h1>
　　　<p>テキストボックス1</p>
　　</div>
　　<div class="menu">
　　　<h1>入れ物</h1>
　　　<p>テキストボックス3</p>
　　</div>
　　<div class="menu last">
　　　<h1>入れ物</h1>
　　　<p>テキストボックス3</p>
　　</div>
　</div>
</div>

26 ：1 ◆ePTReJanhQhu：2015/03/11(水) 21:53:05.92

CSS
.headline {
　background: #BC1E1E;
　border-bottom: 1px solid #d5d5d5;
　margin: 0 0 15px;
}

.headline .wrap {
　width: 960px;
　margin: 0 auto;
　height: 260px;
}

.headline .wrap h1 {
　padding: 30px 0;
　color: #fff;
　font-size: 25px;
}

.headline .wrap p {
　color: #f1e6e6;
　padding: 10px 0;
　font-size: 14px;
}

.contents {
　width: 960px;
　margin: 0 auto;
}

.contents .menu {
　overflow: hidden;
　float: left;
　width: 308px;
　height: 180px;
}

.contents .menu h1 {
　font-size: 20px;
}

.contents .first {
　margin-right: 15px;
}

.contents .last {
　margin-left: 15px;
}

27 ：1 ◆ePTReJanhQhu：2015/03/11(水) 21:56:44.21

CSSの意味

.headline {
　background: #BC1E1E;←背景色
　border-bottom: 1px solid #d5d5d5;←要素直下の線
　margin: 0 0 15px;←要素直下の空間 上 左右 下の順
}

.headline .wrap h1 {
　padding: 30px 0;←余白
　color: #fff;←文字色
　font-size: 25px;←文字の大きさ
}

.contents .menu {
　overflow: hidden;←縮小した際、高さから溢れたら見えなくする
　float: left;←横並びに
　width: 308px;←横幅
　height: 180px;←高さ
}

.contents .menu h1 {
　font-size: 20px;
}

.contents .first {
　margin-right: 15px;←右の余白
}

.contents .last {
　margin-left: 15px;←左の余白
}

28 ：1 ◆ePTReJanhQhu：2015/03/11(水) 21:58:30.87

と言う訳でアップロード完了
http://bbtest.chobi.net/

今日はここまで
全く進行してませんね…

29 ：1 ◆ePTReJanhQhu：2015/03/12(木) 02:13:13.29

単なるチラシの裏ですが…

Webと連動したデータベースを設計するときに一番重要なのは
流出しないコーディングじゃなくておもらしを考慮した設計だと思う

メアド・パスワードが平文（若しくはそれに近い状態だった）atwikiやatpagesのsql流出を見ていてそう思った
趣味で作ったプログラムもどうしたらおもらしを喰いとめられるかを考えて作るより
おもらしした際にどうしたら被害を最小限に喰いとめられるかを考えて作った

・メアドは可逆方式で暗号化して保存して..
・平文化の必要性が全くないパスワードに関しては完全に非可逆暗号化
・MySQLの接続パスワードは絶対にソース中に書かない
・＋非可逆な暗号化
・シェルログインのパスは記号・大文字・小文字を混ぜて糞長くしておく
・ディレクトリトラバーサルやSQLインジェクションを防ぐ設計

可逆暗号はシェルログインされたりなんなりで鍵を盗まれたらひとたまりもないけどね
後からupdateしたり戻す必要のある情報の保護ってのは中々難しいと思った

30 ：1 ◆ePTReJanhQhu：2015/03/23(月) 00:47:44.29

中々続かず…
25日までには何かしら作り進めます

31 ：1 ◆ePTReJanhQhu：2015/04/18(土) 23:08:35.82

長い事放置してしまいましたが、近日中に進めていきます。

32 ：1 ◆ePTReJanhQhu：2015/04/27(月) 14:46:12.01

すいません、当方就活中につき中々更新できません。
生暖かく見守っていただければ幸いです。
5月中には活動再開します。