初心者向けBootstrapのご案内、連載６回目の記事です。 前回はBootstrapをカスタマイズする際に知っておくべきCSSの優先ルールについて触れました。 http://tonari-it.com/css-customize ※（CSSの優先順位についてはさらに別記事で、もっと詳しく解説しています） 今回は、Bootstrapの機能でもっとも便利なカラム分け部分、グリッドシステムの使用法を説明します。 上記のように３つのブロックに分かれたレイアウトをカラム分けと呼びます。１カラム＝１列ですので、上画像は３カラムレイアウトですね。 そしてブラウザの画面が狭くなると、レイアウトは下図のように変化します。 このように「大きな画面では３カラム、小さな画面サイズでは１カラム縦積みに変化」というレイアウトを、Bootstrapでは簡単に組むことができます。 Bootstrapのカラム分けは、ルー

Bootstrapベースのデザインカンプを作成する時にめちゃくちゃ便利で、大幅な時短にもなるPhotoshop CC2015対応の機能拡張を紹介します。 OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。

あれ何だっけ？ という時にさっと分かるWeb制作の実装や勉強に役立つチートシートがあると便利です。 BootstrapのさまざまなUIエレメントの実装、FlexboxでUIコンポーネントを実装、CSSの各ブラウザのサポート状況、Gitのコマンド、React.jsやAngular.jsなどのチートシートを紹介します。 必要なものは全部、ダウンロード・ブックマークしておきたいですね。

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

えっ！？HTMLだけでできるんですか。 私はインブラウザでコーディングするとデザインイメージ湧かないから苦手なんですよ〜。 逆に遅くなっちゃいますよ。 クライアントだっていろいろ修正変更とか言ってきそうじゃないですか。 デザインとコーディングを同時に修正するなんて大変すぎます。 クライアントと案件内容にもよりますがスケルトンサイト（ワイヤーHTML）から見せながら制作した方がデザインが通りやすく納得されやすい事が多かったです。 初期の段階でサイトの骨格がすでに決まっているのでコーディング時間を大幅に短縮する事も可能です。 デザイナーはデザイン作業に集中できます。 （※全ての案件に対応できるわけではないので案件によってはワークフローを変更する必要もあります） 今回紹介するワークフロー （１）スケルトン（骨格）サイト制作 Bootstrap3のジェネレーターを使って作成する （２）デザイン作業

Bootstrapはページ作成に役立つ機能がたくさん用意されており便利ですが、ファイルをダウンロードしたり、テンプレートを用意したりなど、始めるまでに少し手間がかかってしまいます。 そんな手間をすべて解消し、初心者の人でもプロの人でもすぐにBootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料オンラインツールを紹介します。 Bootstrap Editor Bootstrap Editorの特徴 Bootstrap Editorの機能 Bootstrap Editorの使い方 Bootstrap Editorの特徴 Bootstrapを初心者でも手軽に使えるよう開発された日本製のオンラインツールで、ダウンロードやインストールなどの準備は不要、すぐにBootstrapでさまざまなページを作成できます。 Emmetなどにも対応しているので、使い慣れた人にも便利です。 作者様

どうも初めまして、Webエンジニアのイソップ（@yuhiisk）です。 レスポンシブサイト制作では、ノウハウが必要だったり、確認や検証に時間がかかったりと、簡単そうに見えて実は大変です。 しかし、そんなにノウハウがなくても、Bootstrapを使えば効率的にサイトが作れてしまいます！ 今回は、Bootstrapを使って実際にポートフォリオサイトを作ってみましょう。 Bootstrapとは？ そもそもBootstrapは、CSSフレームワークと呼ばれるCSS、JavaScriptのパーツ集です。 Bootstrapの中にはボタンやナビゲーション、ドロップダウンメニューなどがはじめから用意されていて、それらを組み合わせることで、「簡単に」「早く」「効率的に」Webサイトを作ることができます。 また、モバイルデバイスを含めたマルチデバイス対応を考慮されているため、レスポンシブデザインのサイトを作

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー

デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。 サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。 Assembly Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料（$17）です。 $17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。 まずは、Assemblyでどんなページができるか見てみましょう。 縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落として

React使いつつも、既存のCSSフレームワークを何か載せようと思っていろいろ調べたメモ。 あくまでもReactとの親和性などに絞って選んでます。 Bootstrapは何か「出、出〜〜〜！！Bootstrap奴〜〜〜！」ってなりそうだったので、最後の砦として触れてません。 Material-UI 一番Reactに寄り添って出来ている。 以下のように必要なコンポーネントをimportしてrender()内で使うだけ。 実際触ってみると非常にお手軽で、動きのクォリティも高かった。 余計な外部ファイルも読む必要がなくて綺麗。 その分かなりカッチリと仕様が決まっているので、少し手を加えたい場合は さらにMaterial-UIコンポーネントをラップするオリジナルコンポーネントを作れば拡張はできる。 // タッチ・クリックの挙動のために必要っぽい import injectTapEventPlugin

今回はサイトの華である、メインイメージを配置してみましょう。画面の横幅いっぱいに画像が表示され、キャッチコピー的なテキストが乗ってるアレですね。Bootstrapでは「jumbotron（ジャンボトロン）」というクラスで実現できます。 このように、横幅いっぱいの画像を表示するまでが今回の内容となります。 画像に重なったキャッチコピー、ボタンの配置に関しては、次回解説予定です。 「jumbotron」クラスを使ってみよう！ それでは早速、実践していきましょう。 前回作成したindex.htmlファイルを引き続き使用します。念の為、index.htmlと同じ階層に画像が準備されているか、確認してくださいね。画像は前回の記事からダウンロードできます。 HTMLソースをコピペする index.htmlを開き、前回貼り付けたLOGO画像部分の下（※）に以下のHTMLをコピペしてください。 ※「<!–

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。 手順 デザインについて無知でhtml, cssをほとんど書いたことない人（基本的な文法は知っている。）がいきなりおしゃれなサイトが作れるようにはなりません。以下のステップを踏んでいくといいと思います。 おしゃれなサイトを探して研究する。 bootstrapを使ってサイトを作ってみる。 実際に作ってみる。 おしゃれなサイトを探して研究する

WordPressテーマ:おしゃれなポートフォリオが作れる！簡単にカスタマイズできる日本語対応「LIQUID PORTFOLIO」 写真集やデザインなどの作品集としてWEBサイトを作ってみたいなと思うとき、「どうやったらいいのか」「テーマを選ぶときに何て言うのだろう」と思う方。 「ポートフォリオ」のキーワードを追加して探すといろいろでてきます。 ポートフォリオとは・・・ ポートフォリオとは紙挟み、書類かばん、作品集、品揃えなどを意味するものです。つまり、自分の制作実績や作品集として使われています。 今回は以前より紹介している「LIQUID PRESS」シリーズからポートフォリオ向きのWordPressテーマがリリースされたので紹介していきたいと思います。 今回のWordPressテーマももちろん国産で日本語対応しており、最新のBootstrap4を採用し、SEO対策、SNS連携などもされて

Bootstrapをご存知でしょうか？ Bootstrapを利用すると、ウェブサイトを作る際にとっても面倒なレスポンシブ対応が簡単にできてしまいます。 また、あらかじめ用意されているデザイン用のクラスを設定するだけで、ボタンやテーブルを見栄え良くすることができます。 つまりBootstrapを利用すると、「レスポンシブ対応の格好いいサイト」がお手軽に作れてしまうのです。 CSSは苦手という方は、難しいところをBootstrapにおまかせしてサイト制作にトライしてみましょう！ 公式サイト：Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system a... というわけで今回から数回にわけて、Boo

ランディングページ、プロダクトページ、スモールビジネスなどの商用、ポートフォリオ、ギャラリー、ブログなどの個人で利用できるBootstrapをベースにしたサイトが作成できる無料のテーマ・テンプレートがダウンロードできるサイトを紹介します。 コンテンツのコンポーネント、ナビゲーション、サイドバーやフッタのウィジェットもあり、カスタマイズする際の参考にもなると思います。

こんにちは。 この記事は WordPress Advent Calendar 2015に参加したかった人達の Advent Calendar 2015 15日目の記事です。 Bootstrap対応のWordPressテーマを作成したときの黙示録です。 これからテーマを作成される方に少しでも参考になれば幸いです。 テーマ作成について WordPressテーマを配布する目的でゼロから作成します。 Bootstrapのフォーマットに対応します。 WordPress 4.2+ 使用ライブラリ：jQuery、Bootstrap 4 alpha Bootstrap class名の指定（前編） Grid グリッドレイアウトなど、テーマのテンプレートで自由に作成できる部分は簡単です。 問題は下記のように、WordPressが生成する部分のカスタマイズです。 Navbar カスタムメニュー wp_nav_m