ブートストラップを使ったサイト制作の手順について

Question

htmlとcssを少し勉強したweb初心者です。
ブートストラップを使ったサイト制作の「手順」について教えてください。
ブートストラップを使うと、ブートストラップにあるナブなどのパーツをいろいろコピペで使って、効率よくサイト制作ができるとのことですが、
イラレで作成したwebデザインからブートストラップを利用してサイトを制作する場合、具体的にはどのような手順で完成までこぎつけるのでしょうか？

１　イラレのデザインから使用する画像などをスライスしてweb用に保存する。
２　index.htmlを準備する。（html5の宣言などの一連のコードだけが書いてある状態。）
３　.....................ここから何をどうすれば良いのでしょうか？.....................
（ブートストラップを使わない場合は、html上にdivにクラス名などを付けながら、デザインに合わせながら記述し、それができたらcssでレイアウトや色付けなどを行うと思うのですが。）


ブートストラップはパーツがすでにできているので、そのコードをコピペしたら、色や文言を多少変えたりできても、イラレの元のデザインの通りにはならないと思うのですが。

例えばグローバルナビなどは、デザインされたものとブートで用意されたものは全く違うのですが、近いものがあれば探して、多少変更が可能ということなのでしょうか？



ブートストラップを使って、イラレのオリジナルデザインの通りに（できるだけ近い形で）制作するにはどうすれば良いでしょうか？
ざっくりした手順をご教授いただければと思います。

ORUKA1951 · Accepted Answer

＞htmlとcssを少し勉強したweb初心者です。　とんでもない過去の遺物を学んでしまった。今うちに、正しい登山ルートに戻りましょう。そのままだと沢に落ちて這い上がれなくなる。 Illustratorは忘れてください。・・HTML4.01の時代(15年以上前1999年勧告)から、「HTMLでページを作らずにプログラムに頼る。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」と言われてきましたが、それはIllustratorで、あたかもDPE( https://ja.wikipedia.org/wiki/DPE )の手法でページを製作することが否定されてきたのです。　HTMLとは、その歴史や目的「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 )」のように、DPEとは全く異なるものなのです。　Bootstrap(かってはTwitter Bootstrap)と呼ばれていた----は、MediaQueryにも対応してますが、それは、MediaQueryを目的にBoostrapを使うという意味ですらある。MediaQueryとは、ディスプレイの幅、縦横などで表示をガラッと変える機能です。　幅広のウィンドウでは、header,footerは、最大1280pxでウィンドウ幅に追随して伸縮するが、800pxより狭くなると、asideをsectionの下に配置し、さらに狭くなるとnavも下に回すとか・・。携帯電話(media=handheld,tty)だと、シンプルな画像を極力読み込まないデザインとか。　ではIllustratorは、何に使うのか・・制作先に、完成イメージを伝える手段・幅広ディスプレイだと、このデザイン。640～840まではこのデザイン、それ以下はこれ・・・ドロー(ベクター)のCGツールですから、SVG( https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics )データを作成する。・使用する画像（イラストや背景）の制作（写真はラスター/ビットマップ系のソフト使います。）　このような、目的になります。私もそのために使っている。ただ、とても軽快とは言えないソフトなので、あまり使わない。SVGはInkscape( https://ja.wikipedia.org/wiki/Inkscape )をよく使いますが。今のHTMLの制作手順（実は15年前から) 1) 文書構造だけをHTMLで記述していく。HTML4.01では文書構造を記述する要素（タグ）がなかったので、「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」せざるを得ませんでした。　　

ここは本文　　

このsectinの見出し

段落

サブセクション

直接関係ない記事

とね。こうして文書構造をマークアップしたものをスタイルシートで配置していってました。ところが、これは万人には理解されたとは言い難く、相変わらず「画像を切り貼りして作られるページが後を絶ちません」でした。　すなわち「文書内に埋め込まれた「意味」が不明確( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html )」　その反省から、HTML5が誕生した。あなたの言われる＞ナブなどのパーツをいろいろコピペで使ってではないことが分かりますよね。　また、boostrapは、あなたのような場合は全く不向きです。・あくまで、HTMLを書き出すツールであること・スタイルシートは用意されているために、それにあわせてHTMLテンプレートを作る必要がある・スタイルシートを自在に扱いたければ、もっとシンプルなHTMLのほうが良い・HTML5ではあるけど、あまり勧められる書き方ではない。 ★HTML5では、divは原則として使わない。使うべきではないとされている。 NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element ) (注意(NOTEとは強い警告)　著者は他に適切な要素がない時の最後の最後の手段としてdiv要素を使用することが強く推奨される。より適切な要素を使用することは、ユーザにはより良いアクセシビリティを著者にはより良いメンテナンス性を与える。＞イラレのオリジナルデザインの通りに（できるだけ近い形で）制作するにはどうすれば良いでしょうか？ざっくりした手順をご教授いただければと思います。　ブーストラップは使いません。トップページ、あるいはランディングページでしょうから必要ない・・ 1) まず率直に文書構造だけをマークアップしたHTMLを書きます。HTML5でしたら、あなたの構造でしたら　

タイトル

見出し

　というシンプルなものでよい。あとは、画像がその文章のコンテンツのでなければ、Illustratorで作成した画像を背景や、contentプロパティで並べていけばよい。　このほうが、とっても簡単ですよ。　下記はHTML5ではなく、また、目的はスタイルシートの勉強のために、ずいぶん前に作ったHTM4.01ですが、訪問してソースやメニューからスタイルシートを変えたり、印刷プレビューを確認してごらんなさい。IE、firefoxでないと代替スタイルシート利用できませんけど・・　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 　これが今の標準的な作り方です。　あなたにはboostrapは向かない。

ブートストラップを使ったサイト制作の手順について

＞htmlとcssを少し勉強したweb初心者です。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング