TweetPocketWeb制作でいつもお世話になっているBootstrap3。使い慣れすぎてこれ無しで作るのがめんどくさくなるほどでまさにBootstrap中毒と言えます。そんなただでさえ便利なBootstrap3がさらに便利になるかもしれないWebツールがありました。それがこちらLayoutItどんなツールかというと、ブラウザ上でドラッグ&ドロップでグリッドやコンポーネントを配置してくれるというものです。左のメニューからは以下のものが選択できます。Systemデフォルトで以下の値がセットされていますが、自分で自由に設定することもできます。groupPanelsJavascriptModalNavbarTabsAlertsCollapseCarouselLayoutItの使い方では実際にこのWebツールを使ってBootstrap3のレイアウトを組んでみたいと思います。ドラッグ&ドロップで簡単に作れるのでさくっと作ってみましょう。グリッドのセットまずはグリッドの配置を行います。左のメニューからメイン画面にドラッグするだけ。必要なコンポーネントをセットその次はその中に必要なコンポーネントを配置していきます。コンポーネントはBootstrap3で用意されているモノと同じものを選択します。このときただ配置するだけでなく、配置した後にスタイルの変更が可能です。出来上がったら実際どんな見た目かを確認することができます。確認するには画面上部のプレビューを押すだけ。完成したものをダウンロード完成したらダウンロードしてみましょう。ダウンロードするには会員登録する必要があるので登録します。zipファイルを解凍すると中身はこんな感じになってます。ちなみに今回作ったのがこんな感じ。3分ほどでサクッとつくれます。SugimoriBootstrapやCMSを使ったテンプレートの作成やカスタマイズ、既存サイトのレスポンシブ化など、多くの案件でフロントエンドを担当。現在はテンプレートエンジニアとしてTetraThemesでテンプレートを開発中。最近ブログの記事はMarkdownで書いているのですが、ふと思ったのが、Markdownで書いたブログ記事ってSEO的に大丈夫なの?ってことです。前回の投稿でグリッドレイアウトの基本的な使い方についてまとめたので、ここではさらにもう一歩突っ込んだ内容のお話をしたいと思います。一度間違ってないか確認しておきましょう。simple2はEC-CUBE2.13系に対応したレスポンシブテンプレートです。画像スライダーにはFlexSliderを採用、Bootstrap3に対応しているため高品質なECサイトを低コストで制作可能です。MinimalCubeはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。minimal1はEC-CUBE2.13系に対応したレスポンシブテンプレートです。画像スライダーにはFlexSliderを採用、Bootstrap3に対応しているため高品質なECサイトを低コストで制作可能です。COLORMARTはカラーミーショップに対応したレスポンシブテンプレート。Bootstrapを導入しカスタマイズしやすいコードとモダンなデザインを実現。2カラム、3カラム両対応でレイアウトも自由に行えます。WhiteCubeはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。TetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。お知らせ【お知らせ】サイトを移行しました。{td_theme_css.after(splited_css);}}});}})();。