無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪
デザイナーがこうやってGit覚えて大好きになったよ♡ - Qiita
はじめに こんにちは！nanapiデザイナーのyunicoです！「Git Advent Calendar 2014」の15日目を担当します（^o^） 今年はなんか色々GitGit言っていた年だったので、最後にアドベントカレンダーに参加しちゃいます！わいわい！去年からすると、まさか一年後にGitのアドベントカレンダーに参加しているとは思いもよりませんでした〜。感慨深いものです！よろしくお願いします＜(_ _)＞ 前置きと今年やったことまとめ TechBlogでGitについて書いた nanapi勉強会でTL GithubKaigiでTL PatchworkTokyoでメンター< Gitが大好きになった♡というブログを書いたら色々ご縁があり、3回ほど登壇しました(╹◡╹) nanapi勉強会vol.2では「 GUIじゃなくてターミナルからコマンドでGit使うと便利！」という話、GithubK
ウェブデザインの文章レイアウト組みパターンを展開してみる | バニデザノート
ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
スマホ、レスポンシブの表示チェックが捗る時短テク
「スマホサイトのチェックが面倒」「JavaScriptのデバッグが大変」そんなときに便利なのが、Google Chromeの「デベロッパーツール」です。Chromeデベロッパーツールを使いこなすと、Web制作の面倒な作業を効率化できます。 この連載では、nanapiのフロントエンドエンジニアである手塚 亮さんが、コーダーやデザイナー、ディレクターの仕事の「時短」に役立つChromeデベロッパーツールの活用法を紹介します（編集部）。 レスポンシブの表示確認は大変 レスポンシブWebデザインのWebサイトをコーディングしているときに面倒なのが、「ウィンドウサイズごとの表示結果の確認」ですね。端末によって異なる画面サイズをいちいち調べて、ウィンドウサイズを合わせて確認していてはかなり手間がかかります。 そんなとき、Chromeデベロッパーツールの「Device Mode」が使えます。 Devic
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ
プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。 昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。 そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。 そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。 まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために
Webデザインのスキルを磨こう！Webサイト模写のススメ
2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう
実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net
実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基本的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery
WordPress で Web製作をしたいけど、PHP はまだちょっと … という人の PHP ガイド
WordPress はとっても便利なブログツール。使い方さえ勉強すれば、HTML や CSSの知識がなくてもWebサイトを作成、運営することができます。そして HTML + CSS を勉強すれば、デザインを自分の好きなように変更することもできます。でも見た目のデザインだけじゃなくて、いろんな機能をつけたりカスタマイズしていくとなると、やっぱり PHP の知識が必要です。WordPress をカスタマイズしたいけど、PHP はまだ ... という人向けに、WordPress と PHP について簡単にまとめてみました。 WordPress は PHP（プログラム言語） + MySQL（データベース） で作られている、人気のブログエンジンです。最近ではブログじゃない一般的な Webサイトを、WordPress で作ってるっていう人も増えてきたように思います。WordPress を使えば、HTM
本格的にブログを始めたい人向け！誰でも簡単に、WordPressをインストールする方法
今まで、ブログを作っては消していた。AmebloやLivedoor、Blogger、他にも名前を忘れてしまったけど、今までどれも続かなかった。最初の３日間は頑張るんだけど、気づいたら放置。そんな人、案外多いのではないだろうか。 最近、ブログを書く人が以前と比べて増えてきているように思うし、ブログの重要性というものが高まっているように思う。ソーシャルメディアが普及しているからこそ、ブログというメディア兼コンテンツを持つことはかなり強い。事実、僕もこのブログを持っていることで色んな恩恵を得てる。Twitterだけじゃもったいない。 僕のブログは、Wordpressというものを使っている。WordpressとはカスタマイズできるWebサイトで、多くのブロガーたちが利用している。Wordpressの良さや利用するメリットは数多くあるが、最初の導入の敷居が高く、現に僕も一つ作るのに1週間以上かかった
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
何から勉強すればいい？ 「Ferret」ならWebマーケティングの勘所を手軽に学べる - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -![何から勉強すればいい？ 「Ferret」ならWebマーケティングの勘所を手軽に学べる - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -](https://cdn-ak-scissors.b.st-hatena.com/image/square/1601268ddba08550cf04f3838bc9dc8f0e3b270b/height=288;version=1;width=512/https%3A%2F%2Fimgs.u-note.me%2Fnote%2Fcaption%2F47499912.jpg)
ここ最近読んで勉強になったWeb制作関連のスライド10選（2013年6月～7月）