alphaEDITのメニューからcssを作る3

投稿者: | 2013 年 6 月 20 日
0件のコメント

alphaEDITのメニューからcssを作る2では、HTMLファイルの中にスタイルシートを設定していきました。

つぎに、スタイルシートの設定部分を１つのファイルにする方法です。

  1. メモ帳（MKEditorなど）を起動します。
  2. alphaEDITに戻ります。
  3. スタイルシートを設定したファイル（ここではindex.html）を開きます。
  4. HTMLソースをクリック。
  5. スタイルシートの設定部分（ここでは、BODYとAの２つの要素）をコピーします。 
    BODY {
 BACKGROUND-IMAGE: url(back.gif);
 BACKGROUND-REPEAT: repeat-x; }
A {
 BACKGROUND-COLOR: #ffff99;
 FONT-SIZE: 150%; }
  6. メモ帳に貼り付けます。
    fontsize
  7. body部分も同様に貼り付けます。
    ダブルクォーツで囲まれた部分をコピーします。
    fontsize
  8. メモ帳に貼り付けます。
    fontsize
  9. ダブルクォーツで囲まれた部分をコピーします。
    fontsize
  10. メモ帳に貼り付けます。
    fontsize
  11. H1とH2の２つの要素に分け、見やすいように整形します。
    fontsize
  12. 名前を付けて保存をクリック。
    fontsize
  13. index.htmlが保存されているフォルダに、style.cssという名前で保存します。
    fontsize
  14. alphaEDITに戻ります。
  15. Headerのstyleの部分を選択します。
    fontsize
  16. 削除し、代わりに 
    <link rel=stylesheet href=style.css type=text/css>

    を入力します。
    fontsize

  17. 次にbodyの1つ目のstyleの部分を選択します。
    fontsize
  18. 削除します。
  19. H1と入力します。
  20. 同様に2つ目を選択します。
    fontsize
  21. 削除します。
  22. H2と入力します。
  23. ２行のそれぞれの後ろを閉じます。
  24. 大道芸フェスタのあとに</H1>と入力します。
  25. お知らせのあとに</H2>と入力します。
  26. 完成です。
    fontsize