スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

ド素人だけどBootStrapでサイトを作ってみるよ

ド素人だけどBootStrapでサイトを作ってみるよ!!

BootStrapとはレスポンシブデザインやWebサイトのレイアウトを簡単に作るものらしい。
スマホ向けとPC向けに別サイト作ったり全く違うテンプレ適用したりすることもなく、閲覧者のブラウザの大きさに合わせて最適なレイアウトで表示してくれる。素敵。

必要なもの
1.BootStrap←からDL
2.解説サイト 
初心者のための簡単なBootstrap3のはじめ方
Bootstrap 3.0入門 (全18回) ドットインストール
今日からはじめる!Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜
3.HTMLエディタ(メモ帳でもいい人はそれでよし。Linux環境ならGeditやらなんやらおこのみで) 
StyleNote
↑html.css両方編集できてプレビューも表示される。プレビューにあるボタンとかクリックするとその部分のhtmlソースをフォーカスしてくれるのがありがたい。
Crescent Eve
↑シンプルで軽量なhtmlエディタ
4.テンプレート(←いらない人はデフォルトから始めてもいいと思う)
Free Templates and Themes for Bootstrapこことか
5.サーバー(とFTPツール)今回はFC2HP(無料版)とFFFTPを使いました。(公開しないなら別にいらない)

+ちょっとばかりの検索力と英語を読む気力

BootStrapのHPからDLして解凍。
distってフォルダが出来て、中にcss、fonts、jsの3つのフォルダが有る。
ここにindex.htmlをUTF-8で作成。作成自体はメモ帳でもいいんだけど、メモ帳でやるとデフォルトではShift-JISで保存されてしまうので、後でブラウザで読み込んだときに文字化けする。ココでハマること数時間w
Getting startedにサンプルのindex.htmlが置いてあるのでコピってきてペーストしてindex.htmlとして保存するだけ。

語が英語(en)になってるので日本語(ja)に変更。これでとりあえずは使える。
<html lang="en">→<html lang="ja">

作ったらこれをブラウザ(FirefoxなりChromeなりIEなりIceweaselなり)に読み込ませてみよう。
Hello Worldって表示されてるはず。

ここにComponentsからソースコードコピって追加してけばいいのだけれど、一からやるのは結構骨。
ってことでテンプレ使わせていただきます。
Heroic Featuresにしてみました。
そのまんま使うのはあまりにもアレなのでちょっといじってみることに。


・ページタイトル(ブラウザのタブのところに表示される名前)
   <title>Basic Company Template for Bootstrap 3</title>
Basic Company Template for Bootstrap 3のところをBootstrap練習
・ブラウザ内で表示されるタイトル部分
<h1>A Warm Welcome!</h1>
<p>Introduce your website content using this jumbotron! It's an awesome way to call attention to something that needs to be read! It's also a great alternative to using a banner image if you don't have a good quality picture!</p>
<h1>内を「Bootstrap練習)
<p>内に簡単な説明として「BootStrapでサイトを作ってみるよ 練習用なのでレイアウトもコンテンツも適宜変わりますよ」
・Call to Actionのボタンはいらなそうなので削除
<p><a class="btn btn-primary btn-large">Call to action!</a>
を削除
・同じようにナビバーの表示内容を変えたり、ナビバーの数を変えたり
・/imgフォルダ作成して適当な画像を置く
  サムネイルのとこに入れて、PC(のブラウザの大きさ)、スマホでどう表示が変わるのか見たかっただけ。なので壁紙用においてあった画像を入れてみた。
具体的には
<div class="col-lg-3 col-md-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Feature Label</h3>
<p>This would be a great spot to feature some brand new products!</p>
<p><a href="#" class="btn btn-primary">Buy Now!</a> <a href="#" class="btn btn-default">More Info</a>
</p>
</div>
</div>
</div>
のところがサムネイル+ボタンになってるので、
<img src="http://placehold.it/800x500" alt="">
のところにimg src="img/画像ファイル名に置き換え。

じつはここでもimgフォルダ作ってそこへのリンクを貼るという考えが抜けていたのでうなること数時間w

とまぁ、これくらいをやってフォルダごとFTPでアップ。
FC2HPでFFFTP使ったアップ方法はヘルプに入ってるのでFTPツールでアップロードをする

で、できたのがこれだ!!
Bootstrap練習
BootstrapL.jpgBootStraps.jpg
広げたり縮めたりしてみるとこうなる。画像サイズも自由自在である。

やってみた感想としては、まぁ基本的なHTMLとCSSの知識があれば数時間である程度のサイトは作れそう。
デザイン凝ったものに変えるにはそれなりの時間と技術が必要そう。
このブログのテンプレちょっといじったりしてた程度の知識と経験しかなかった俺にはちょっとハードルは高かったけど、まぁどうにかなるものだ。

テンプレ変えたりレイアウトいじったりすればもっと変わるんでしょうけど、それはまた後日。

関連記事
FileZillaでFTPアップロード
スポンサーサイト
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

         
ブログ内検索

カスタム検索

フリーエリア

クリックで救える命がある。

レンタルサーバー

さくらのマネージドサーバ
さくらインターネットのVPS
ConoHaのVPS
WebARENA VPSクラウド
99円レンタルサーバー
【CloudCore VPS】
GMOクラウドのレンタルサーバー
転送量無制限 ABLENET
@WAPPYレンタルサーバー
SPPDレンタルサーバー

カテゴリー+月別アーカイブ

 

アクセスカウンター

現在の閲覧者数:

プロフィール

Author:tmin
PCヲタ。ライト2ちゃんねら。
スロット好きのギャンブラー。(元
むしろ人生がギャンブルだが目下のところ負けっぱなし。
座右の銘は「結果オーライ」。故に基本適当。
トラブルもまた楽しみのひとつ

コメント、トラバ、相互リンク歓迎。お気軽にどうぞ。
当ブログについて
Twitterでこっちとあっちの更新情報流すことにしてみます。
http://twitter.com/t_min
Project Mikunchu♪Wikiできました。
Mikunchu200x40.png


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。