このサイトはblogban.net(2016年3月にドメイン有効期限切れで閉鎖)のログを保管しているサイトです。
各投稿の権利は当時の投稿者に帰属します。
なお、本サイトでは発信者情報は一切保存しておりませんのでご了承下さい。
過去ログ倉庫ですので書き込みはできません。

なお当時のblogbanの規約に基づき本サイトのログはアフィリエイトブログへの転載を全面的に禁止します。

専ブラ対応済みです。このURLをそのまま外部板登録すると閲覧できます。

お問い合わせはこちらまで

■掲示板に戻る■ 全部 1- 最新50 [PR]ぜろちゃんねるプラス[PR]

サイト制作勉強日記

1 ：◆IeBPPcOCDmAV：2015/02/12(木) 02:49:33.73: これから主流になっていく？HTML5 CSS3で作っていこうと思っています。
2 ：◆IeBPPcOCDmAV：2015/02/12(木) 02:53:51.15: 取りあえずサーバアカウントを取得しなければ…
もう遅いので一旦寝ます
3 ：隣人55号 ◆ccVQebManA：2015/02/13(金) 01:29:58.76: ようこそ！　日記板の隣人です
わたしも近々自分のサイトを公開するつもりなんですが
テンプレから必要最低限のとこだけCSSを直すくらいで結構疲れちゃいましたｗ
頑張ってくださいね～
4 ：無名：2015/02/16(月) 12:51:35.08: SCSS
5 ：1 ◆ePTReJanhQhu：2015/02/21(土) 01:43:43.11: ちょっと放置気味でしたが気を取り直して…
取りあえずサーバアカウントを取得しました
http://bbtest.chobi.net/
今はまっさらですが、のんびりと作っていこうと思いますので宜しくお願いします。

>>3
はじめまして
私も付け焼刃のような知識で、最初は随分苦労しました。
応援ありがとうございます
6 ：1 ◆ePTReJanhQhu：2015/02/21(土) 01:50:33.71: html5になって、大幅にタグが追加・削除されました。
ヘッダー部分は以前主流だった
<div class="site-header">
<h1>html4時代の書き方</h1>
</div>
と書くやり方もありますが、headerタグを使って以下の様に書くのがモダン？のようです
<header class="site-header">
<h1>html5のヘッダーの書き方</h1>
</header>
7 ：1 ◆ePTReJanhQhu：2015/02/23(月) 02:41:48.57: 色々やりたいのですが、本業の方が忙しいので更新できず。。
しばらく失踪
8 ：1 ◆ePTReJanhQhu：2015/02/28(土) 13:01:47.99: やりたいことも一段落したので、再開
今日はヘッダー・コンテンツ部分・フッターを制作する。
9 ：1 ◆ePTReJanhQhu：2015/02/28(土) 15:59:29.40: 基本的なHTMLの作成
サイトの作成にあたって、まずはHTMLを下記の様に書き換えた
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/style/style.css" type="text/css" media="screen">
<title>CSSのお勉強ページ</title>

</head>
<body>

<header class="site-header">
<div class="inner">
<h1>へっだあ</h1>
<p>ここはへっだぁです。</p>
</div>
</header>

<div class="contents">
<h1>コンテンツ</h1>
<p>ここに本文を書く</p>
</div>

<footer class="site-footer">
<div class="inner">
<h1>フッター</h1>
<p>ここはフッターでござる。にんにん
</div>
</footer>
</body>
</html>
10 ：1 ◆ePTReJanhQhu：2015/02/28(土) 16:02:06.07: header class="site-header"の部分がヘッダーコンテンツの部分
div class="contentsの部分にメインコンテンツを作成
footer class="site-footer"の部分がページのフッター部分
11 ：1 ◆ePTReJanhQhu：2015/02/28(土) 16:04:59.72: 次にCSS
始めに、ブラウザに設定されているCSSをリセットするリセットCSSを
http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
から転載して記述した。

自分で記述したのは
.site-header {
position: relative;
height: 120px;
background: #f7f7f7;
}

.site-header .inner,
.site-footer .inner {
width: 960px;
margin: 0 auto;
}

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

.site-footer {
width: 100%;
background: #f7f7f7;
}
の部分
12 ：1 ◆ePTReJanhQhu：2015/02/28(土) 16:07:39.96: .site-headerに設定されているposition: relative;は後で必要になるので記述
height: 120pxでヘッダーの高さを120pxに固定
background: #f7f7f7は背景の色

.site-header .inner,
.site-footer .innerは、ヘッダー・フッターのdiv class="inner"の設定をまとめたもの
width: 960pxで幅を960pxに固定
margin: 0 autoで中央寄せにした。

その他はまた後で
13 ：無名：2015/03/01(日) 13:32:32.31: 今日はナビゲーションメニューを制作します。
14 ：1 ◆ePTReJanhQhu：2015/03/01(日) 13:51:19.22: ナビゲーションメニュー？グローバルナビ？どっちが正しいんだろ
</header>の直下に下記のHTMLを記述した。
<nav class="global-nav">
<ul class="inner">
<li><a href="#"><strong>めにゅー</strong></a></li>
<li><a href="#"><strong>めにゅー</strong></a></li>
<li><a href="#"><strong>めにゅー</strong></a></li>
<li><a href="#"><strong>めにゅー</strong></a></li>
<li><a href="#"><strong>めにゅー</strong></a></li>
<li><a href="#"><strong>めにゅー</strong></a></li>
</ul>
</nav>
15 ：1 ◆ePTReJanhQhu：2015/03/01(日) 13:52:32.57: スタイルシートはこんな感じに追加・一部改編
.site-header .inner,
.global-nav .inner,
.site-footer .inner {
　width: 960px;
　margin: 0 auto;
}

.global-nav {
　width: 100%;
　height: 50px;
background: #6778C1;
}

.global-nav ul li {
　float: left;
　width: 160px;
　height: 50px;
}

.global-nav ul li a {
　display: block;
　height: 50px;
　background: #4F63BC;
　border-right: 1px solid #000;
　text-align: center;
}
.global-nav ul li:first-child a {
　border-left: 1px solid #000;
}

.global-nav ul li strong {
　text-align: center;
　line-height: 40px;
}
16 ：1 ◆ePTReJanhQhu：2015/03/01(日) 13:57:53.85: まず.global-navの幅を100%(ブラウザの幅目いっぱい)、高さを50pxに指定
ul内のliの幅を160px 高さ50pxに指定した。

幅全体にリンクを広げたかったので、display:blockとheight:50pxでリンク広さ・高さを指定
右の線色をとりあえず黒(#000)に

リンクの右側だけ色を変えると、最初の要素の左側が何もない状態になるので、li:first-child(最初のli)の左側に色を付けた。

.global-nav ul li strongはa内の文字の高さを指定
line-heightでそれなりの位置に指定した。

ついでに、最後のtext-align:centerは不要だったｗ
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月中には活動再開します。

12KB

新着レスの表示

掲示板に戻る全部前100 次100 最新50

READ.CGI - 0ch+ BBS 0.7.4 20131106
ぜろちゃんねるプラス