You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン(Android)もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね! Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
railsとangularjsとbootstrapでアップスワーク (AppsWork)というクラウドソーシングサービスを作ってみました。 Webサービスを作った動機 下記記事のように現状のクライアントが圧倒的に強い、Win-Winになりにくい既存のクラウドソーシングの仕組みをなんとかできないかと考えたのが始まりです。 http://kosuke.cc/column/impression-of-lancers/ この記事を書いた動機 作りながらでいいアイデアが浮かぶだろうと考えていたのですが、結局既存クラウドソーシングを覆せるようなアイデアは浮かばず簡易クラウドソーシングサービスのBeta版が完成してしまいました。 このままでは何も報われないので、使用した技術情報や開発の概要とソースを公開して社会に貢献できれば、と考えたのがこの記事を書いた動機になります。 開発について 使用した主な技術に
URL ■サービスURL http://mikumikuplay.com/bazooka/ 紹介動画URL ニコニコ動画版 http://www.nicovideo.jp/watch/sm23534924 YouTube版 https://www.youtube.com/watch?v=rwyqn2H7K-Y 概要 「ユニティちゃんバズーカ」はブラウザで簡単に遊べる3Dアクションゲームです。ゲームのルールは簡単で、バズーカでクマを10匹倒すタイムを競うというものです。クマはアクロバティックに逃げ回るので、ユニティちゃんをうまく操作してクマを追いかけると弾が当たりやすくなります。 特徴 ・美少女キャラ(オープンソース系ヒロイン・アイドル、ユニティちゃん)がバズーカでクマを倒すタイムを競うオンライン3Dアクションクイズゲーム ・成績をオンラインで記録し世界中のプレイヤーとランキングを競うことが
思いついたWebサイトのアイデアを簡単に、かつすぐに実用的な形にする際に非常に便利なのがCSSフレームワークです。その中でもっとも主流と言えるのがBootstrapですが、2015年の12月にBootstrap v4が正式リリースされました。バージョンアップに伴い、bootstrap4で対応しているサービスも続々リリースされています。そこで今回は、bootstrap4に対応したサービス、ライブラリーそしてテーマを中心に9つほどご紹介したいと思います。 reactstrap reactstrapは簡単にReactでBootstrap 4を簡単に使うことのできるコンポーネントです。 nmp経由でのインストールは、以下のコードで出来ます。 npm install --save reactstrap react-addons-transition-group react react-dom たとえ
こんにちは。私は今まで、3年間、RailsやCakePHP,Ethnaなど様々な言語やフレームワークを使って開発を行ってきました。その中で、共通して使ってきたのがHTML/CSSです。私が3年間かけて培ってきたHTML/CSSの書き方ややり方、方針などをこの場を借りてまとめたいと思います。 まずはじめに 対応ブラウザを確認する スマホ対応の必要があるかを確認する HTML/CSSを使った開発のルールを決める HTML編 idやclassの命名を考える idは多用しない HTMLの共通化を考えた記述をする コラム: IE(後方互換モード)の対応が必要になった時の対処 CSS編 共通で使えるCSSは共通用のファイルを作ってまとめる CSSの適用範囲を考慮して記述する reset.cssを使うかどうかを決める CSSの!importantはできるだけ利用しない BootstrapのCSSを上書き
こなすべき作業が多い開発業務、少しでも業務負荷を軽減したいものです。 そんなときは、開発時のテスト、コードレビュー、エラー通知をしてくれるWEBサービス・ツールを利用すると、開発の生産性やスピードが向上します。 開発者にぜひ使ってもらいたい、開発をサポートしてくれるWEBサービス・ツールを10個厳選してご紹介します。 無料で使える、または無料プラン(一部トライアルのみ)があるサービスをピックアップしていますので、興味を惹かれたものがあればぜひ使ってみてください。 自分に合う案件を提案してもらう Swift Bootstrap http://www.swiftbootstrap.com/ 2015年12月、Appleが開発したiOS / OS Xのためのプログラミング言語「Swift」がオープンソース化されました。 これから普及する可能性を秘めているプログラミング言語ということで、「Swif
原文: The React on Rails Doctrine ジャスティン・ゴードン(2016年1月24日) このドキュメントはRailsの基本理念(訳注: 日本語版)に対する拡張と補足です。まだそのドキュメントを読んでいない場合、先にそちらを読むことをお勧めします。 React on RailsのREADMEの中で述べているように、このプロジェクトの目的は、Ruby on RailsとモダンなJavaScriptのツールやライブラリを統合するための、強固で最適なフレームワークを提供することです。react_on_railsに何をいれるべきかを考えるとき、その機能が RailsとモダンなJavaScriptとの共通部分と関連があるかどうかを自問します。RailsのビューとReactコンポーネントを統合するためのビューヘルパーがよい例です。答えがイエスである場合、その機能はここにあるべきで
以前より紹介している国産テーマ、LIQUID PRESSから先日WordPress無料公式テーマとして新しいテンプレートがリリースされました。 そこで今回は、新たにリリースされたWordPress無料公式テーマ「LIQUID」の紹介をしたいと思います。 この公式テーマは、LIQUID PRESSシリーズの元になったテンプレートで、無料で簡単に利用できるシンプルなテンプレートになっています。 有料のWordPressテーマはちょっと不安という方は、一度無料の日本語対応公式テーマ「LIQUID」を試してみてはいかがでしょうか。 目次 WordPress無料公式テーマ「LIQUID」の特徴 WordPress無料公式テーマ「LIQUID」の外観イメージ紹介 WordPress無料公式テーマ「LIQUID」の価格・仕様・動作環境 WordPress無料公式テーマ以外のテンプレートにはどんな機能があ
みなさんはじめまして! アートディレクター兼デザイナーの長岡と申します。 社内では、ひろさんと呼ばれています。 入社したばかりですが、どうやらLIGの最年長記録を更新したようです(^^;) 2児の父親として、プライベートでは、子育てに奮闘中なのですが、最近乗り物に興味を持ちだした息子。 電車や車が大好きなようで、テレビに映る度に指をさして「でぇ~んしゃ~♪」とか「ぶぅ~ぶぅ~♪」と叫んでます。 そんな息子の姿を見て、毎日癒されてます(^-^) さて本題に入りますが、スマホサイト・レスポンシブデザイン・Bootstrapなどで度々目にするアイコンフォント。 モバイルファーストを考えながらの制作ですと、表示速度も意識しなければなりませんね~。 フリーのアイコンフォントは、たくさんあれど、「アイコンが多すぎる!」「もっと少なくしたい!」「オリジナルでアイコンを作ったけれども、これをどうにかアイコ
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました! (03/05 追記) FlatUI、Bootstrap Expoを追加しました (03/24 追記) Flatstrapを追加しました (04/03 追記) MagicSuggestを追加しました (04/04 追記) Bootstrapのリソースネタを別の記事にしました 無料のテンプレート 無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがあります
ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。 今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。 詳細は以下から。 Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ Chat UI Kit ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。 Carbon Mat
Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. Quick start Looking to quickly add Bootstrap to your project? Use jsDelivr, provided for free by the folks at jsDelivr. Using a package manager or need to download the source files? Head to the downloads page. CSS Copy-paste the stylesh
Webデザインの知識がなくてもOK!Bootstrapの使い方【入門者向け】 HTML/CSSといったWebデザインの知識がない人でもわかる【Bootstrap】の使い方。Bootstrapのダウンロード方法、サンプルコードがあってすぐに実践可能。グリッドシステムやテーブルなどの使い方あり。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査 独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なB
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く