・webページ作成に手間取っていませんか？その最大の理由は各要素を自由に配置することが難しいからです。その解決策として出てきたのがCSSグリッドです。これを使うと簡単にレイアウト作成ができます。そんな素晴らしいCSSグリッドですが、覚えにくいことと、モダンブラウザでしか使えず、IEは旧仕様実装でそのままでは使えないという、ふたつの難点があります。それを克服するのが本ソフトです。
・本ソフトは起動後、僅か5クリックでIEベンダープレフィックスが付いたCSSグリッドレイアウトを作成します。カスタマイズがなければ一切コードを記述する必要はありません。また、レイアウトのカスタマイズは簡単にできて、編集後１クリックで、HTMLファイルまで自動で書き換え、レイアウト表示をします。もちろん、このときも自動でIEベンダープレフィックスを追加します。 更に、強力な記述サポートがあります。例えば、CSSファイル内で作成したセレクターをHTMLファイル編集時にコンテキストメニューから呼び出したり、CSSやタグを登録して使い回すことなどができます。
・本ソフトはWebサイト製作者様、ホームページ作成会社様が効率的にwebページを作成できることを念頭に開発したものです。機能制限なく試用できますので是非ともお試しください。
・本当に５クリックでCSSグリッドができるの？
それでは本当に５クリックでCSSグリッドができることを確認して行きましょう。
インストールはダウンロードしたzipファイルを解凍し、setup.exeを起動してください。インストールが終了すると、デスクトップ画面に CSSGridIE.exeファイルができていますので、実行すると起動時の画面、プロジェクト１のファイルが開かれています。このプロジェクトではなく、空白のプロジェクトに今回は作って行きますので、プロジェクトを空白のプロジェクトに変更します。
その方法は、このソフトは初期画面ではプロジェクト５以上が空白プロジェクトなので、右下のプロジェクト選択ボックスでそれ以降の適当な番号を選択してプロジェクトを開きます。
左のエディタが空欄になりましたので空白のプロジェクトを開いていることが分かります。ここまでで２クリックです。
次に、左のエディタ上で右クリックをします。そこで出てくるメニュの一番上、「レイアウト作成」を選択します。これで４クリックです。
最後に「任意グリッド作成」か「聖杯グリッド作成」のどちらかをクリックします。これで右のブラウザに出来上がったレイアウトが表示されます。
・本当に編集後１クリックでレイアウトのカスタマイズはできるの？
次にレイアウトのカスタマイズは編集後１クリックで、HTMLファイルまで自動で書き換えて簡単にできることを確認して見みましょう。
CSSレイアウトのカスタマイズとは各セルの個数を変えたり、セルの縦・横の大きさを変えることです。 先ず、変更内容をCSSに記述します。編集方法の詳細は▶3.作成したレイアウトの変更をご覧ください。
今回は聖杯レイアウトを作成した場合を見てみます。コンテナ部分のデフォルトは次のように記述されています。
grid-template:
"header header header " 200px
"aside article nav " 200px
"footer footer footer " 200px
/200px 200px 200px ;
grid-template:
"header header header " 200px
"aside article article " 200px
"footer footer footer " 200px
/200px 200px 200px ;
これで編集が終わりましたので、「整形/IEプレフィックス追加」ボタンをクリックします。これだけで右のブラウザに変更内容が反映されていることが確認できます。これで基本レイアウトの完成です。後はこれに各要素を張り付けてwebページを作成することとなりますが、各要素の貼り付け位置が固定されているので簡単に貼り付けて、webページの作成ができます。
・本ソフトの機能、特徴・CSSグリッドレイアウトの簡単作成
・新仕様のCSSグリッドソースコードにIEベンダープレフィックスを追加
・作成したプロジェクトの、CSSファイルとHTMLファイルを別ファイル保存
・ファイルをサーバーにアップロード
・「body」タグの自動挿入
・良く使うCSS文やHTML文を自分好みに登録
・CSS内の色コードを簡単に変更
・CSS内の色コードの実際の色の確認
・作成したCSSセレクタをHTMLファイルに簡単に記載
・CSS文やHTML文を簡単に記載
・コメント挿入機能
・プロジェクト外のファイル編集
・ブラウザの画面の大きさ変更
・HTMLファイルの表示位置変更
・webページタイトルを簡単に編集
・右クリックメニューの表示文字サイズ変更
・エディタージャンプ機能
・一時保存、読み出し機能
・ワーニング機能
・プロジェクト外のファイルを編集