Bootstrapだけじゃない！2017年のCSSフレームワークベスト5
WebサービスのUIやサイト制作のベースに使えるCSSフレームワーク。Bootstrapが代表的ですが、ほかにも人気のフレームワークをピックアップして紹介します。 CSSのフロントエンドフレームワークは百花繚乱です。しかし本当に優れたものだけに絞り込むことは可能です。 この記事では、私が考える「現在のフレームワークのベスト5」を比較します。強みと弱み、向いている分野があるので、プロジェクトで求めるものに応じて使い分けてください。プロジェクトが単純なら、複雑なフレームワークは不要です。また大半はモジュールベースですから、必要なコンポーネントを選んで使うか、別々のフレームワークのコンポーネントを併用することもできます。 紹介するフレームワークはGitHubの評価を基にしているので、最初に紹介するのは、もちろん一番人気のBootstrapです。 注：紹介する情報の一部は翌週ないし翌月には古くなっ
Grid Layoutが当たり前になったら、CSSレイアウトはどう考えるべき？
新しいCSSレイアウト仕様Grid Layoutを使うには、これまでのCSSレイアウトの考え方を変える必要があります。どう考えていけばよいのでしょうか？ 最近、ようやくCSS Gridを学びはじめてるんですけど、学ぶ課程で「CSS Gridが”普及”するとBootstrapやFoundtionのようなフレームワークの作り方も変わるんだろうなぁ」と考えています。 どう変わるのかというと、まずは、 基本的にレイアウトはCSS Grid（必要に応じてflexbox）でやるようになる コンポーネントはいままでのフレームワークと基本的には同じだけど、CSS Gridに入れ込みやすい設計に変わる もう少し詳しく書くと、 Bootstrapなどで採用されているグリッド・システムが必要なくなる 少なくともrowとcol-4、col-md-6のような書き方はなくなる 独自のグリッド・システムで作っていたレイ
もっと写真を魅せたいWordPressユーザーのためのベストプラグイン9
撮った写真がたまってきたのでそろそろ公開しても良いと思ったら、ベストなWordPressフォトプラグインを探すタイミングです。 WordPressを使っていて「こんな目的に使えるプラグインがあるだろうか？」と思ったら、その答えはほとんどいつでも「イエス」です。そう、たくさんのプラグインがあるのです。しかし、WordPressのスペースやスピードにいつでも多くの余裕があるとは限らないので、あまりにも多くのプラグインを使うと、Webサイトがめちゃくちゃになってしまうこともあります。だから、優先順位の決め方がカギとなります。コツは「なんでも良いからと」適当に決めるのではなく、最良のものを見つけることです。 最高かつもっとも信頼されているフォトプラグインを小さなコレクションにまとめました。たくさんのプラグインから探し回る手間が省け、ひどいプラグインを選んでしまうこともなくなるでしょう。 Envir
新人コーダーに伝えたい、きれいなCSSを書くための4つの習慣
この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンティックなクラス名を使う マークアップ構造とCSSを密結合しすぎない ルールを1つずつ説明していきます。 グローバルセレクターを避ける グローバルセレクターには全称セレクター（*）、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例
スクラッチはもう古い？BeansフレームワークでWordPress開発のフローが変わる
WordPressのテーマって、どんなフローで開発していますか？ 新しいテーマフレームワーク「Beas」なら、便利なコンポーネントを組み合わせて進められるので、テーマ制作が捗りそうです。 いますぐWordPressテーマを自分で作成したいなら、しっかりとコーディングされた信頼できるテーマフレームワークの利用をお勧めします。フレームワークはWordPressに一般的な機能やコンポーネントを提供してくれるので、独自のデザインを作成できるようになります。また、フレームワークを利用するとテーマの作成時間を劇的に短縮できます。 Thierry Mullerが作成した新しいWordPressのテーマフレームワークの1つ、Beansを試してみたので紹介します。Beansについては過去にJames GeorgeがSitePointの『Introducing Beans: A Streamlined Wor
2万9900円の価格以上の質感と性能！ 「SAMURAI REI」はやはり注目の1台
FREETELが新たに発表したSIMフリーのAndroidスマートフォン「SAMURAI REI」。税抜2万9900円という価格ながら、アルミを用いた薄型のメタルボディーを採用。さらに指紋センサーを搭載するなどミドルハイクラスのスペックを持つ注目モデルである。気になる質感や外観がどうか、写真で見ていこう。 価格を考えると相当に高い質感 独自のUIや機能も搭載してきた さて、気になる質感だが、発表会会場で短時間触っただけながら、価格を考えると相当に高いと言えるだろう。正直なところ、全体のデザインやダイヤモンドカットの側面などはどこかで見た感じがあるのと、背面の塗装は見た目、手触りともにのっぺりした印象だが、これまでの同価格帯の製品と比べて一段上。国内のSIMフリースマホでは新たな基準になりそうだ。
想像以上にヤバかった「7つの習慣ボードゲーム」 (1/5)
sponsored 快適な装着感でIP57の防水仕様、迫力あるサウンドも実現！ オープンイヤー型で耳を塞がないのが快適！ 耳掛けイヤホンの新定番になりそう！ 「HUAWEI FreeArc」レビュー sponsored MSI「MAG B850 TOMAHAWK MAX WIFI」レビュー AMD RyzenでゲーミングPC自作するのに「ちょうどよい」チップセット、性能、拡張性、価格のB850マザーボードとは sponsored 1人情シスでもSKYSEA！ Amazonで購入できるし、これなら使えそう sponsored 新作のカマンベール入りにしますか、定番のチェダー入りにしますか チーズが口の中であふれる！ ケンタッキーの「チーズにおぼれるフィレバーガー」はチーズ好きも納得の濃厚な食べごたえがスゴい！ sponsored ビジネス・クリエイター向けCopilot+ PC、MSI「Pr
ついにRAW転送に対応！ 無線SDカード「Eyefi Mobi Pro」
アイファイジャパンは3月25日、新たにRAWファイルの転送に対応したWi-Fi内蔵メモリーカード「Eyefi Mobi Pro 32GB」を発表した。3月27日より販売開始する。価格は9980円。 Eyefi Mobiカードは、デジタルカメラなどで撮影した画像を設定したモバイル端末に自動転送する世界初のWi-Fi機能付きSDHCメモリーカード。今回リリースされるEyefi Mobi Proは、CLASS 10準拠の高速転送など従来モデルの全ての機能に加え、新たに容量の大きいRAWファイルの転送や選択転送に対応する。同製品を購入することで、容量無制限のクラウドサービス「Eyefiクラウド」を1年間無料で使用できるのは従来通り。無料期間終了後は1年ごとに5000円の更新料を支払う必要がある。 新カードの発売にあわせ、Windows／Mac向けデスクトップアプリも一新。SDカードから転送した写真
ASCII.jp：古田雄介の“顔の見えるインターネット”
本連載では、カリスマ的な人気を誇る個人サイトの管理人にインタビューして、サイトの運営法などを本音で語ってもらう。 2011年11月02日 12時00分 トピックス 最終回 アンサイクロペディア“中の人”が語る、ユーモアの難しさ 鋭い社会風刺をズバズバ切り出すWikipediaパロディサイト、アンサイクロペディア。そのセンスはどこから生まれるのか。 2011年10月07日 12時00分 トピックス 第99回 マスコミが報じない“カルト”を記事に 「やや日刊カルト新聞」 悪質な自己啓発セミナーや宗教団体など、いわゆる“カルト団体”のニュースを取材しているブログがある。 2011年08月31日 12時00分 トピックス 第98回 「もし森ガールが森へ入ったら」アサイさんの超地道な努力 大ヒットのブログ記事、通称「もし森」。自然系ネタエントリーと生物系まじめエントリーを書き分けるアサイさんは何者な
「a-blog cms」を使うべき3つの理由 (1/5)
WordPressがCMS1強時代を築きつつある中、名古屋のWeb制作会社「アップルップル」が開発しているCMS「a-blog cms（えーぶろぐ しーえむえす）」が着実に採用実績を伸ばしています。有料なのになぜ売れているのか？ その魅力は？ 実際に企業サイトを作成しながら、a-blog cmsの使い勝手を体験できる連載をお届けします。解説は開発元のアップルップルにお願いしました。（編集部） a-blog cmsはアップルップルが開発・販売している商用CMSです。Web制作会社として培ってきたノウハウを盛り込み、必要な機能を簡単・便利に使うことを目指して、2009年6月にVer. 1.0をリリースしました。2013年12月にはVer. 2.0をリリースし、1400を越えるサイト、350事業者に利用されています（2014年1月現在）。 クライアントに優しい3つの特徴 ユーザーに優しい編集画面
サンプルで学ぶTwitter Bootstrapの使い方：前編 (1/3)
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
ユーザーの心を動かすWebコンテンツ設計の秘訣 (1/3)
サイトマスターには、ネットにアクセスしているユーザーの顔が見えません。つまり見えない相手、知らない相手とコミュニケーションを取るのがサイトマスターの仕事なのです。では、どうやれば見えないユーザーとコミュニケーションを取れるのでしょうか？ 鍵を握るのが「リアクション」です。リアクションを喚起するフックをコンテンツに埋め込んで、ユーザーに自発的に動いてもらえばいいのです。 見えない顧客「透明人間」との信頼をいかにして築くか ネットでは、実店舗のように店員とお客さまが直接顔を合わせることがなく、画面を通じてコミュニケーションを取ります。ネットにアクセスしているのは、サイトマスターにとって「姿の見えないユーザー」。いってみれば「透明人間」と付き合わなければならないのです。 直接顔を合わせられる実店舗なら、お客さまの表情、しぐさを伺いながら、コミュニケーションを取れます。店員が何かのサービスをしたと
ユーザー目線のSEO対策「ヒマワリ思考法」 (1/3)
企業のWeb利用はいまや当たり前。しかしあなたの会社は本当にWebを活用できていると自信を持って言えるでしょうか？ 鍵を握るのが、Webサイトマスターです。サイトマスターは企業サイトのいわば社内プロデューサー。マーケティング、デザイン、Web技術と幅広い知識を持って、サイト運営を担う人物です。 本連載では数々の企業サイトを成功に導いてきたコンテンツブレインの小池 勉氏が、サイトマスターが知っておきたい企業サイト運営のノウハウを提供します。小池氏が発見した「法則」の中から、企業サイトの成功のヒントを探っていきましょう。（編集部） 検索サイトから自社サイトへの誘導強化は、アクセスアップの基本。しかし、サイト運用側から見ればユーザーを呼び寄せているつもりでも、ユーザーから見れば情報を探す途中にたまたま立ち寄っただけかもしれません。たまたまサイトに立ち寄っただけの人に商品を買ってもらったりリピータ
お詫び：『Webライティング実践講座』へのお問い合わせ
Web Professional編集部から2012年12月12日に刊行された『Webライティング実践講座 ニュースリリースから商品説明まで』のP.62〜63にある真っ黒なページにつき、ただいま読者ならびに書店の皆さまより、印刷上の間違いではないかとのお問い合わせを多くいただいております。 お問い合わせのページがある「1.6 『書き出し語』を決めれば本文は書ける」（P.60〜）の節のテーマは、Webライティングにおける書き出し語の重要性です。P.61の最後では、 昭和歌謡の偉大な作詞家、阿久悠さんの作品「宇宙戦艦ヤマト」の歌詞と、漫画家でコラムニストの西原理恵子さんのエッセイ「いじめられている君へ」を見て、プロが書き出しをどう作り込んでいるのか確認しましょう。 のように、「宇宙戦艦ヤマト」と「いじめられている君へ」で、阿久悠さんや西原理恵子さんによる書き出しの工夫についての説明を始める、と述
日本のネットシーンに天才現る――M.Kitasonoの衝撃 (1/5)
ついに日本のネットシーンに天才現る。あなたはM. Kitasonoと名乗るミュージシャンの曲を聴いたことはあるだろうか？ まだなら今すぐこの曲を聴いていただきたい。 ざくろ（宅録ポップス） by M.Kitasono 作者は1990年生まれの22歳。打ち込みのドラムを除き、ボーカルも含めすべてのパートを自分で演奏し、多重録音で仕上げている。USにはPomplamoose、Jack Conteがいる。じゃあ日本には誰が？ と問われれば、今なら即座にM. Kitasonoと答えるだろう。 日本のネット音楽シーンも、すでに商業音楽と同じように、いかに多くの人に聴かせるかというアプローチが常識になっている。テレビに迫るマスな聴き手がそこに存在する以上、それはごく当たり前のことだ。 そこに突如、飄々とした態度で、ものすごい異物が丸腰でやってきた。それが私のM. Kitasonoさんに対する印象だ。作
「ペンギンアップデート」 米Google、ウェブスパム対策のアルゴリズムにペンギン(Penguin)と命名
「ペンギンアップデート」 米Google、ウェブスパム対策のアルゴリズムにペンギン(Penguin)と命名 つい先日、米Googleから発表された、ブラックハットなSEO手法を駆使する、ウェブスパムページ対策のためにリリースした検索アルゴリズムについて、ペンギンアップデート(Penguin Update)と命名された。 ペンギンアップデート(Penguin Update)とは 米Googleはこれまで一定周期ごとに比較的大きな検索ランキングアルゴリズムの変更や更新を行ってきているが、それらには歴史的に名前がつけられていた。最近の有名なものとして、コンテンツ品質を分析し、内容の薄っぺらな低品質サイトをフィルタリングするために2011年に発表されたパンダアップデートがある。そのほか、2009年のVince updateや2010年のMayday Update、もっと昔に遡ると、2003年のFl
50代でも分かったHTML5の基礎知識
おとそ気分で社内を暇そうにウロウロしていたら「HTML5の常識、わかっていますよね」と怖い怖い一回り年下の編集長から叱られてしまいました。この後、HTML5関係の仕事がくることは間違いがありません。 しかし、ワタクシは50代。困ったことに、この編集長の「わかる」とワタクシの「わかる」とは程度が違います。これは困りました。正月早々、首筋がすーっと寒くなってしまったので、優しいけど仕事に関しては編集長よりも厳しい二回り年下のデスクに相談。 「HTML 4と比較しながらHTML5の違いをまとめて記事にするところから、始めてみてはどうですか」と先手必勝のようなお題を与えてくれました。どこまでこのお題をこなせるのか。65歳定年になれば、あたりまえの日本企業の縮図のなかで、50歳を過ぎての「HTML5の基礎知識」をまとめてみました。 DOCTYPE宣言が超簡単に DOCTYPE宣言が超簡単になったのは
HTML5でモーグリ投げ！FF13-2キャンペーンサイトの裏側
12月20日、プレスを対象として、日本マイクロソフトとスクウェア・エニックスによる共同キャンペーン企画「モーグリのツイートキャッチ」の技術情報に関するラウンドテーブルが開催された。 モーグリのツイートキャッチは、マイクロソフトのブラウザー「Internet Explorer 9（IE9）」と12月15日に発売されたスクウェア・エニックスの新作ゲーム「FINAL FANTASY XIII-2（以下FF13-2）」のPRを目的としたWebアプリ。FlashやSilverlightといったプラグインを一切使わず、HTML5のみで表現されており、IE9のGPUアクセラレーションへの最適化をはじめ、Bing Map APIやWindows Azureといったマイクロソフトの提供するテクノロジー群で構築されているのが特徴。IE9の普及を狙う日本マイクロソフトがスクウェア・エニックスに提案して実現したも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サンプルで学ぶTwitter Bootstrapの使い方：中編 (1/5)
ゼロから始めるレスポンシブWebデザイン入門
