マネして作ってみよう!(手順解説付き)いよいよ実際にホームページを作っていきたいと思います。最終的に↓のリンク先と同じページを作っていきますのでよろしくお願いします。sampleホームページsampleホームページに使っているソースファイルを↓に一式ダウンロード出来るようにしましたのでダウンロードをして解凍しておいてください。1.53MBDownload一緒に1から作っていきたいのでしたら、sampleフォルダ内の『index.html』ファイルを開いて中のコード全て削除して上書き保存し、『common.css』はファイルごと削除してください。World!!を表示してみるHTMLの基本構成HTMLを記述していくために最初に基本部分を作成しておきましょう。HTMLの基本的な部分を作成するまず最初にこちらの画像を見てください。こちらが基本部分となります。HTMLの基本構成なんだこれはー!?って僕も最初は思いました(笑)とりあえずこれさえ記述しちゃえばHTMLになるんだ!と思ってください(笑)コードを用意してますのでコピーして『index.html』に貼り付けてくださいね。コピーのショートカットキー:Ctrl+Cペーストのショートカットキー:Ctrl+V保存のショートカットキー:Ctrl+S(※コード内をダブルクリックするとコードの全選択ができます。charset="UTF-8"><title>Document</title></head><body></body></html>これを記述しちゃえば後は文字や画像を入れるだけでブラウザ上に表示させることがます。World!!』って打ちこんでみてください。World!!打ち込んだらショートカット:Ctrl+sで保存してください。ファイル名は基本的に『index.html』にしておいた方が後々わかり易いです。文字コードをプルダウンから『UTF-8』(※重要)に変更して保存してください。これで文字化けを防ぐことができます。(※先ほどのindex.htmlファイルの中身を削除してそのまま使う方は、画像の『手順001』は飛ばしても構いません。)手順001保存して終わったら『index.html』を右クリックしてプログラムから開くにカーソルをあて、お使いのブラウザを選択してください。Chrome』をメインで使っているのでこちらを選択します。world』が表示されているはずです。手順003感動しません?僕だけですか(笑)?とりあえずこれでブラウザ上で自分が打ち込んだ文字が表示されたわけです。マネして作ってみよう!(手順解説付き)ホームページ制作講座この記事が気に入ったらいいねしよう!最新記事をお届けします。管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。マネして作ってみよう!(手順解説付き)RECOMMENDこちらの記事も人気です。DBから取得した日付を表示する際に、1日マイナス表示される2019.03.12タイピングでジョジョがふわー2018.03.22WordPressブログの読み込みが重たいから改善してみた2018.03.17俺、社会不適合者なのかも知れない。OKINAWA-HACKこのブログは、ブログで稼いでなるべく組織に属さず、いわゆるフリーランスとして生きていきたいと常日ごろ思いながら、記事を書く管理人が運営しています。プログラミングが好きな管理人です。※ちなみにトップ画像の有刺鉄線は、組織の中から抜け出したい!という願望が表れています。