2015年02月07日 webディレクターだけど、初心者に役立つサイト教える Tweet 35コメント ｜2015年02月07日 10:45｜サイトまとめ｜Web・テクノロジー｜Editタグ ：web制作 1 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:41:24.70 ID:flJZIImcH.net 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ 当ブログサイトはアフィリエイト広告、バナー広告を利用しています。 2 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:42:31.08 ID:flJZIImcH.net まずはドットインストール htt

デザインやHTML, CSS, jQueryなど、Web制作に関する勉強を基礎からしっかりと学べるオンラインの学習サイトを紹介します。 当ブログで紹介するものは英語圏内が多いですが、この学習サイトは国内運営で、解説も当然日本語です！

日本版Codeacademyのようなサービス「Progate」「Codeacademy（コードアカデミー）」というオンラインプログラミング学習サイトがありますが「Progate」はまさにCodeacademyを日本向けに作りなおしたようサービスです。 Codeacademyと比べると現在は「HTML」「PHP」「jQuery」の3つのコースしかありませんが、日本語の画面で基本的なHTMLやPHP、jQueryの学習を無料で行うことができます。 「Progate」を開発しているのは東大工学部の学生2人。既にEast Venturesからの支援も受けているようで、まさに「Codeacademy（コードアカデミー）」のエピソードと重なる部分も。（参考：THE BRIDGE） 資料を見るだけでなく、実際に手を動かす演習形式プログラムの学習は手を動かさないと覚えないという点がありますが、「Proga

CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。 しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？ とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？ 大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。 大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。

2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって

2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに

2014年8月19日 お知らせ 約2年半ぶりにWebクリエイターボックスのテーマをリニューアル！という事で、変更点をザックリと紹介します。とは言え全体のデザイン自体はあまり変わっておらず、細かいところや内部の修正・更新がメインとなっています。ちなみにブラウザーはChrome, Safari, Firefoxの最新版、IE11対応。Webクリエイターボックスに訪問するユーザーで、IE10以下を利用の割合は1.5%をきっていたのでバッサリ捨ててます。古いブラウザーを利用の方はアップデートしましょう ;) ↑私が10年以上利用している会計ソフト！ SVG画像 背景やアイコンなどで使うデザインパーツの画像をSVGに変更しました。レティナディスプレイのMacに変えてからというもの、どうも画像のギザギザが目についてしまって。リデザイン前のテーマでも一部SVGを使っていましたが、今回総入れ替えしました。

こんにちは、LIGブログ編集部です。こちらはWebライティングに関する全10回のシリーズ記事です。 さて昨今ではブログやSNSが全盛となり、文章を書いて発信することがより身近なものになりました。 では、このような時代に、文章を書く仕事である「（Web）ライター」にはどうすればなれるのでしょうか？ 答えは簡単です。特別な資格や条件が必要な仕事ではないので、「自分はライターです！」と名乗ってしまえば、もうその瞬間からあなたはライターです。 しかし、「ライター」と聞いて皆さんが想像したのは、おそらくWebライティングで食べていく、または副業としてバリバリ稼ぐというプロのWebライターでしょう。ただ記事を書いてブログやSNSに投稿するだけでは、Webライティングを職業にして働くには厳しいかもしれません。。 でも「資格や条件が必要ないなら、初心者はどうやればお金が稼げるようになるの？」と疑問に思うは

2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ ↑私が10年以上利用している会計ソフト！ HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通

2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の

CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい

2014年8月20日 Web関連記事 先月、『海外でWebクリエイターとして働くには？』対談セミナーが無事終了しました。私自身初のセミナーだったので、かなり緊張したのですが…多くの方に来ていただき、感謝感謝です。セミナーでは海外でのWeb関連のお仕事事情や留学情報がメインテーマだったのですが、ブログ運営についても少しお話しました。残念ながら時間の都合上すべてを語りつくせなかったので、補足も兼ねてブログをすることのメリットを記事にしようと思います。 ↑私が10年以上利用している会計ソフト！ ブログを始めたきっかけ 2009年、夏。バンクーバーのとあるカフェで、同じく駆け出しであった日本人Webデザイナーの友人にWordPressのオリジナルテーマの作り方を教えていました。彼曰くWordPressに関する記事は当時英語で書かれたものばかりで、日本語で詳しく書かれたサイトがあまりなかったようです

わたしにとってのブログ元年がもうすぐ終わろうとしています。 今年はこのブログを立ち上げ、良くも悪くも生活が一変した年でありました。 そんな激動の年の最後の記事は、感謝の記事で締めくくりたいと思います。 なお、単純にお世話になったサイト様だと数が多すぎるので、わたしが今年 頻繁に足を運ばせて頂いた事が選定の基準となっております。 商用可能な素材系 9search 何度お世話になったか分からないくらい頻繁にアクセスさせて頂いております！ 商用可能でクレジット表記不要なフリー素材を探す時に、わたしが必ず最初にのぞきにいくサイト様です。 パーツごとにわかれていたり、サムネイルを表示してくれていたりでとても探しやすいです！ PAKUTASO/ぱくたそ 商用可能な写真素材サイト様です！ 高画質でノイズ処理なども施されているため、他よりも目を引くクオリティの高い写真素材が沢山あります。 なにか写真が必要

Webコーダーとなって2年ちょい、最近ではデザイン業務もやらせていただいております@OZPA でございます。 本日は、私がコーディング等のネタ帳として使用しているEvernoteのノートブックについて簡単にご紹介。 Evernoteにクリップしている情報 私が「業務に役立ちそうだな」とEvernoteに放り込んでいるのは jQueryプラグイン、テクニック CSSのテクニック アイコン・背景などの素材を紹介しているWebサイト といったところでございます。 それを全て1つのノート、「3001_ネタ帳（CSS,jQuery etc）」にまとめておるわけです。 Evernoteの名付け方に関してはこちらの記事をどうぞ こんな風にいつか業務で使えそうだな、と思ったスライダーなどのjQueryプラグインをメモったり… form周りで使えそうなjQueryに関する記事を取っておいたり… CSSのテク

Webサービスほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク！2014年6月13日1 @JUNP_Nです。オンラインで利用することができる無料のWebサービス「Compressor.io」はJPG、GIF、PNG、SVGの画像をビックリするほど軽量化してくれます。面倒なアカウント登録などもなしで、画像をドラッグ&ドロップだけで使えて超便利！ 無料で多様な画像ファイルに対応しているのが嬉しい画像軽量化サービス！Compressor.io - optimize and compress your images and photos オフラインではJPEGの画像軽量化には「JPEG mini」を利用、それ以外の画像については「ImageOptim」を利用していたのですが、これだけではGIF動画の軽量化がもの凄く難しい。 関連：1

1 ：名無しさん＠おーぷん ：2014/05/16(金)07:10:45 ID:eqtkVDAg4 便利なサイトだけじゃなく 面白いサイトや変わったサイトなどジャンルは問いません。 4 ：名無しさん＠おーぷん ：2014/05/16(金)07:14:27 ID:er8H4Snax 原寸画像検索 http://gensun.org/ 6 ：名無しさん＠おーぷん ：2014/05/16(金)07:15:47 ID:mvBXHkkng http://nipponmukasibanasi.seesaa.net/ 膨大な数の日本昔ばなしをジャンル別や地域別で探せる 56 ：名無しさん＠おーぷん ：2014/05/16(金)07:43:58 ID:bQsBV4E5i >>6 個人的にこれちょっと感動モノ 教えてくれてありがとう 7 ：名無しさん＠おーぷん ：2014/05/16(金)07:15:52

2016年2月18日 Webサイト制作 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポートフォリオWebサイトを作る際のポイントや素敵なポートフォリオサイトを紹介します！ ↑私が10年以上利用している会計ソフト！ 最新版書きました！こちらも参考にしてみてください。 ポートフォリオWebサイトを作ろう！2015年版 ポートフォリオWebサイトを作る時のポイント 1. 自己紹介 自分は何者なのか？何ができるのかをわかりやすく完結に紹介します。あまりダラダラ書いても読まれない確立が高いため、大きめのフォント・短い文章で紹介すると効果的です。 「自分はWebデザイナー」という事をはっきり書く 自分ができることをわかりやすく表記