Bootstrap対応ですぐに使える、すごい無料HTMLテンプレート素材まとめ 2016年8月度
サイトの特設ページやランディングページの作成がなかなか進まない。そんなときは、あらかじめデザインデザインや機能を実装したHTML/CSSテンプレート素材を利用することで、制作作業をよりスムーズに進めることができます。 Bootstrap を基準としているのでカスタマイズしやすく、同時にPSDファイルやSassファイルを収録したアイテムも増えているので、プロジェクトに合ったテンプレートを探してみてはいかがでしょう。 詳細は以下から。 Bootstrap対応ですぐに使える、すごい無料HTMLテンプレート素材まとめ 2016年8月度 Rapture ウェブ制作をよりスムーズに行う、プレミアムフレームワークのデモ用として、2種類のランディングページが用意されています。 デモページ1 ダウンロード Forty 複数のコンテンツを色分けし、滑らかなアニメーション付きページ遷移も同時に表現できるマルチペ
ひらがなで書くべき漢字のまとめ: 企業サイトで使用する「ひらく漢字」「ひらかない漢字」
これまでに数多くの一部上場企業様のWebサイトのリニューアル・サイト制作にコアメンバーとして参加し、その中で表記ルールもかなりの数を策定してきました。策定時のベースに使用する「ひらく漢字」「ひらかない漢字」の一部を紹介します。 ※以前、公開した記事を再編集したものです。 表記ルール: ひらくことが多い漢字 表記ルール: ひらくことを検討する漢字 表記ルールの策定にあたり 表記ルール: ひらくことが多い漢字 ひら（がなで書）くことが多い漢字。 ※「正・誤」は使用する際の基準であり、日本語としての「正・誤」ではありません。 読み 正 誤
ウェブ開発やデザインが超絶捗る開発者のためのウェブブラウザ「Firefox Developer Edition」が登場
無料で使えるオープンなウェブブラウザ「Firefox」が登場してから今年でちょうど10年になるそうですが、そんな節目の年に、Firefoxを開発しているMozillaがウェブ開発者目線で作成し、開発者やデザイナーにこそ使ってほしいというウェブブラウザ「Firefox Developer Edition」をリリースしました。 Firefox Developer Edition — Mozilla https://www.mozilla.org/ja/firefox/developer/ Firefox Developer Editionはウェブ開発者のために作られたブラウザで、作成・テスト・サイズの変更といった開発のワークフローで必要とされる機能をすべて持っているものです。さらに、専用のアドオンをインストールすれば、Firefox Developer Editionを操作するだけで他のブラウ
モダンなCSS設計パターンを考える
The document summarizes Hiroki Tani's presentation at the QCon Tokyo 2014 conference on modern CSS architecture. Some key points discussed include: - Adopting modular approaches like OOCSS and SMACSS to separate structure from skin/style and improve maintainability. - Using techniques like BEM naming to further decouple CSS from HTML. - Developing reusable CSS modules and components with flexible
非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの＋αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
エンジニアやデザイナーになりたい大学生がチェックしておくと良いおすすめブログ8選！｜キャリアバイトコラム
最近は、Webエンジニアやデザイナーを目指す学生が増えています。 ネット上でも様々な学習サービスがある為、一気に敷居が低くなっとというのが大きいでしょう。 そんなWeb制作やデザインを学び始めた人が、書籍や学習サービスとともに、チェックしておくと良いブログをピックアップしてみました。 Webクリエイターボックス HTMLやCSS、WordPressなど、フロントエンド周りについて、非常にわかりやすく書かれているブログです。 運営されているManaさん自身は、カナダのバンクーバーでWebデザイナーをしており、最新の情報にも敏感で、初心者以外にも役立つ記事が多いです。 全くWebデザインをしたことがない、いまいち理解できない、そんな人には是非読んでほしいブログです。 【おすすめ記事】 ・WordPress オリジナルテーマの作り方 3.0+ ・実践で学ぶWebサイト制作ガイド
今更現場では聞けないWebデザインのトレンド「フラットデザイン」とは？*ホームページを作る人のネタ帳
Webデザインの分野では、2012年半ばより、フラットデザイン化の流れが止まらない。 Webデザインにおける2013年のトレンドは？と聞かれれば、間違いなく多くのデザイナーが「フラットデザイン」と答えるでしょう。 Windows8におけるメトロUIが、代表的なフラットデザインとなっていますが、 iOS 7ではUIとアイコンデザインを一新? "フラット化"が進む - 海外報道でもふれられている通り、Appleまでもがフラット化の道をたどっているのではないかという噂まであります。 そんなわけで今回はトレンド「フラットデザイン」についておさらいして行きましょう。 フラットデザインとは？ 一応定義があるわけではないのですが、指標のようなものはあります。 従来のように影や装飾などで、立体的なWebデザインを行うものと対照的に、装飾や影などを極限まで省き、平面デザインにすることです。 ポイントはいくつ
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
流行りのレスポンシブ・ウェブデザイン！ よく使われるデザインパターンを集めてみた！
流行りのレスポンシブ・ウェブデザイン！ よく使われるデザインパターンを集めてみた！ 2013.01.18 | この方法お勧めです！ | サイト推薦！ tips | WordPress | ほらみんなも！ | デザイン | レスポンシブ あけましておめでとうございます！ 今いる場所がシアター！Huluの動画サイトにはまり、かなり引きこもりがちなブラウンです。 超寝不足。。。やばいです。。。 今回は流行りの【レスポンシブ・ウェブデザイン】について、デザイナー目線の記事を書こうと思います。 少し前までは『レスポンシブ！？そんなんいらんわっ！！無視や！無視っ！！』って思って勉強することから逃げていました。しかしもうダメのようです… もうIT業界では、レスポンシブ・ウェブデザインは当たり前って流れがきてます。確かにアクセス解析ではPCよりスマホやタブレットからの方が多いですし。 とにかく、今回レスポ
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
知らない人は遅れてる？新Zen-Coding Emmet
頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
人気Webデザインを独学できる至高のWebアプリ8選がヤバイ！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
designmap.info
2012年版、漢字も揃っている日本語のフリーフォントのまとめ
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ