Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
マンガでわかるGit 第一話「Gitってなあに？」 | マンガでわかるWebデザイン
次回以降の流れは？（2016/04/11 0時 追記） マンガでわかるGitの構成は、ざっくり下記の構成を考えています。 最初の一歩： Gitとはなんぞや？ 第一フェーズ： １人で使ってみる 第二フェーズ： 複数人で使ってみる 第三フェーズ： 実務上でのハウツー（応用） これは、まだ私が頭の中で考えているだけの仮段階のものですので、細部はみなさんからのコメント・需要を拝見しながら変更していくと思われます。 ちなみに、はてブコメントで要望の多かった「SVNとGitの違い」 → こちらのマンガ化はやってみたいですね。 #マンガでわかるGit 全体の構成（仮）考えるの楽しい♫ Gitってそもそも何？メリットは？ ↓ 一人でGit😃 ↓ 複数人でGit😃😃 の流れで考えています。 はじめてコミット、チェックアウトしたときの感動といったら！ pic.twitter.com/uyCl1zAxAF
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
【第2弾】少しのコードで実装可能な20のCSS小技集
【第2弾】少しのコードで実装可能な20のCSS小技集はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 少しのコードで実装可能な 20 の CSS 小技集 目次画像を丸く表示1 本線のテーブル1 本線の水平線線色を指定しなくても文字色と同一色になる複数の背景画像背景画像のサイズWeb フォントを使う画像をモノクロやセピアにするリストマーカーの色を変更グラデーショングラデーションボーダーフラットだけど立体的ボタン画像をぼかすレスポンシブに対応した動画要素を真ん中に配置カンマで分けたリスト文字を縦書きフォーカスすると伸びるテキストボックスiOS でボタンのスタイルをリセット線のオフセット設定HTML・CSS の全
Webサイトを「HTTP」から「HTTPS」へ切り替える際に行う一連の作業をまとめました｜今村だけがよくわかるブログ
Googleが「HTTPS everywhere」を提唱していることなどが影響して、HTTPSで通信できるようにWebサイト全体を独自ドメインに対してSSL/TLSによる暗号化を行い、運用をスタートしている様子がちらほら私の周りには増えてきました。 Google ではさらにもう一歩踏み込んで、数か月前の Google I/O では、「HTTPS everywhere」をウェブで提唱しました。 ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に HTTP から HTTPS への切り替えをおすすめしたいと考えています。 （Google ウェブマスター向け公式ブログ: HTTPS をランキング シグナルに使用しますより） 私はしばらく動向を伺っていましたが「Webサイト全体をHTTPSへ切り替える流れは今後はより加速すると考えてもいい」と判断をし、このブログも全体をHTT
大きな背景画像を使った魅力的なWebサイトを作ろう
大きな背景画像を使った魅力的なWebサイトを作ろう以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ 背景に動画を使った Web サイトの作り方 背景に大きな画像を使うメリット・デメリット大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、その Web サイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間が
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろこれまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 Illustrator 初心者さんへIllustratorはベクター形式の画像を作成できる Adobe 社のアプリです。ロゴやイラストを作る時にはかかせません。Adobe の公式チュートリアルサイト、Adobe TV では Illustrator の概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustrator は月額 3,2
mixiの新人研修トレーニングが非常にわかりやすくて実践的すぎる - Android Javascript iOS
mixiは新人研修用のトレーニングをgithubに公開しています。 公開していることは知っていたけれど、いざみてみると… とってもわかりやすく実践的！！！ 普通に参考書で勉強するよりも企業が公開しているものだから、より実践的という感じもします。 自分はこのAndroidTrainingをやっているのですが、最後に課題もあり、到達度や理解度もすごく把握できていい感じです。 READMEもかなり充実しており、一通りを学べるように工夫されています。 mixiに入社した方がこれを一通りやったと思うと、大変な印象ですが…だからこそやったときに達成感がありそうです。 開発環境の構築から書かれているので、ほとんどつまづくことはありません。 かなり詳しくわかりやすく書かれている印象を受けました。 ちょっと初めて学習するには、難しい箇所もありますが適宜ぐぐって補えばよいでしょう。 ・AndroidTrain
PhotoShop,Illustrator手抜きチュートリアルについて
photoshop (55) アイコン (1) テキスト効果 (5) テクスチャ (2) ボタン (9) 写真補正 (1) 基本操作 (14) ショートカット (1) 応用編 (14) 素材作り (7) WEBパーツ (2) 見せ方 (3) 写真風 (1) 質感 (2) その他 (1) ツール (7) シェイプ (3) ペンツール (3) 外部リンク紹介 (1) 未分類 (3) 素材配布 (1) パターン (1) 当サイトについて 当サイトはPhotoShopやIllustratorを使ったデザインについてのチュートリアルを扱っているページです。 初心者の方でもそれなりのデザインが作れるように出来るだけシンプルに解説していきますが、 チュートリアル記事を書くのに結構時間がかかるため、名前の通り多少手抜きしています。 不明点などあればコメント欄からコメントしていただけたらと思います。 もし、
【点線 - 手書き風 ★★★】点線を使った縫い目風デザインを一から作る方法
前回は点線の描き方をやってみた。 点線を描くことが出来れば、簡単に縫い目風のデザインを作ることが出来る。 まずは点線を描く まずは点線を描く。 ここが出来れば、もうできたも同然。 Photoshopで点線の罫線を描く方法 をもう一度復習して欲しい。 まずは、ペンツールを使って適当な形を作ろう。 シェイプツールを使って、簡単に作ってもいい。 とにかく、パスを使ってラインをかければ何でも。 ペンツールで適当な形を作る 次に点線用のブラシを用意する。 今回は誰でも使える基本ブラシから選ぶ。 ブラシを選択 ブラシで点線が描けるように設定する。 [真円率]と[間隔]を調整して、点専用のブラシにする。 ブラシの設定 このままだと、方向が一定なので、進行方向に従って描くようにする。 [角度のジッター]を設定する。 角度のジッターの設定 あとは Photoshopで点線の罫線を描く方法 でやったように、[
『マウスオーバーで画像を切り替えるCSSを書いてみよう』
リンクの貼り方と、画像の貼り方を応用してリンクを画像にしてみましょう！マウスを乗せると画像が変わるやり方も紹介しますね！ 画像でリンクさせるタグ画像でリンクするのはこのタグでできます。 <a href="リンク先URL"><img src="画像のURL" alt="画像の説明" width="画像の横幅" height="画像の高さ" /></a>リンクを貼るタグの「リンクさせる文字」の所を画像を貼るタグに置き換えてあげれば画像でリンクできるようになります！ １枚の画像を使ってCSSで画像を切り替える方法よくボタンなんかにマウスを乗せると画像が切り替わるサイトありますよね！このやり方の説明をしますね！ サンプルサンプルボタン リンクはページトップに飛びます。 まずは画像を用意しようマウスを乗せる前と乗せた時の画像をそれぞれ作ります。２枚の画像は同じ高さ、幅でつくってくださいね！ それから
Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
簡単に今すぐできる！WEB制作を「はじめて」する人が分かるまとめ
作成：2013/03/4 更新：2014/11/01 Web制作 > もし「全部」自分でやることになっても 一人でサクッと作れるようになりたい 今回はWeb制作や、ツール・ソフトの使い方が「簡単」に分かる、デザインが良い「マニュアル的」なサイトを抜粋しまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．Photoshop (フォトショップ) ２．Illustrator (イラストレーター) ３．Dreamweaver (ドリームウィーバー) ４．iPhone アプリ ５．Kindle 出版 ６．WordPress ７．スマートフォンサイト ８．アフィリエイト ９．アクセスアップ / ブログ １０．ライティング １１．SEO １２．プログラミング １３．html / CSS １４．Google Analytics １５．レスポンシブ Photos
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.ituore.com/entry/html-css-basic
スターサーバー サーバーデフォルトページ
floatで予期せぬものが回り込んで表示が崩れちゃうときの対処法 - ディレイマニア
