1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerで新しいCSSファイルを作成する方法

KompoZerで新しいCSSファイルを作成する方法

KompoZerのCSSエディタを使って、新しいCSSファイルを作成する方法を解説。新しいCSSファイルを作成しても、CSS定義を追加しないとファイルは作成されませんので注意してください。

  • 2016/8/6
  • 2011/11/30

KompoZerを使って新しいCSSファイルを作成する方法を解説します。

テキストエディタを使って何も書かれていない「空のファイル」を作っておき、拡張子をcssにしておく事でも新しいCSSファイルの作成はできますが、ここではKompoZerのメニューからCSSファイルを作成していきます。

このページでご紹介している方法では、サイトのトップページが保存してある階層に、cssというフォルダを作成して、その中に「style.css」という名前でファイルを作成します。

KompoZerのサイト設定が完了している事を前提に解説を書いていますので、まだサイト設定が終わっていない場合は、サイトを公開するための準備を確認して設定を完了させてから作業を行ってください。

  1. まずサイトを保存するフォルダの中に「cssという名前のフォルダ」を作ります。
    サイトマネージャの「新しいディレクトリを作成する」アイコンをクリックすると、ディレクトリ名(フォルダ名)を指定するウィンドウが開きますので、cssと入力してOKボタンをクリックします。
  2. ツールバーから「CSSエディタのアイコン」をクリックしてCSSエディタを開きます。
  3. CSSエディタの左上にある「小さなCSSエディタのアイコンの横にある▼」をクリックしてメニューを呼び出します。プルダウンで表示されたメニューから、「新しいlink要素」を選択します。
  4. 開いた画面でURL欄に「css/style.css」と入力して、「スタイルシートの作成」ボタンをクリックします。
  5. この状態ではまだcssファイルは作られていません。
    何か一つでもスタイルを定義するとcssファイルが作成されますので、bodyタグに対して空のスタイル(何も指定をしていないスタイル)を定義します。
    CSSエディタで「css/style.css」を選択した状態で、左上の小さな▼をクリックして「新しい規則」を選びます。
  6. 「指定された種類の全要素に適用されるスタイル」が選択されたままの状態で、ウィンドウ下部のプルダウンメニューから「body(body直下)」を選び、スタイル規則の作成ボタンをクリックします。
  7. 何もしないでそのままOKボタンを押します。

以上の操作で、cssフォルダに「style.css」という名前のファイルが作成されているはずです。
style.cssは、KompoZerで編集する事はもちろん、テキストエディタなどを使って編集する事もできます。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro(3ヶ月の超ガッチリ型)

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします