脱コピペ!基礎〜実践の2日間!! グラフィックデザイナーのためのHTML・CSS講座

初心者向けのHTML・CSS講習会を行います。「効率よく・実践的に・必要な基礎を知る」をモットーに2日間(計10時間)で、スマホ対応ページを作れるようになっていただける内容です。

私がこの講座の講師をする理由

私は職業訓練校でWebデザインを勉強しました。私が教えてもらった先生たちは本当に実践的で、上手に教えてくれました。

ところが周囲で職業訓練を受けた方はというと「実践的なことは教えてもらわなかった」とか「教科書をただ朗読して、そのあと自分で教科書見ながら入力して、独学みたいだった」などと耳にします。

自分が教えていただいた先生方が当たりだったことを感謝しつつも、じゃあ自分はどんな授業が受けたいだろうか、と考えました。

絶対に、実践的で再現性が高くないといやだ。あと、教科書を読むより「体感で覚える派」の人にもしっくりくるようなレッスン。
いちばん最初がいちばん難しいから、いちばん最初で止まってしまう。そんなつまづきやすい一歩目を一緒にクリアできるようなレッスン。
これが私の受けたい授業。
ということで、私の受けたいと思うようなレッスンをご提供したい!

ご一緒に、0から1歩目をぴょーんとスタート切るアシストができるように、精一杯努めさせていただきます。

Web制作は基礎の感覚さえ身につけば、あとはなんとか自分で調べたりできますので、まずは基礎を一緒に10時間集中トレーニングしましょう!

グラフィックデザイナーさん、イラレちょっとさわったことならある、さん。ホームページを作れるようになりたい方なら基本的にどなたでも参加いただけます。

今回の講座では、

  • 実践的にとにかく手を動かして作ってみること。
  • 最低限の基礎で、スマホ対応のページを作れるようになること。
  • 基礎を身に着けたあとの、もっと実践的なスキルの身につけ方。

を、たいせつにしながらレッスンを進めていきます。

こんな方におすすめの講座です。

  • さくっと最初のキッカケを学びたい
  • 今までチラシを作ったことがあるけれど、ホームページも作れるようになりたい
  • グラフィック専門でやってきたが、Webも、と言われることが増えた
  • 身近に相談できる人がいない
  • 独学に限界を感じてる

2日間で学べる内容

  • テキストエディタを触ってみよう
  • HTMLを書いてみよう
    ※簡単な書き方で時短!
  • 画像やリンクの設定方法
  • CSSでページを装飾しよう
    ここが独学の難関!実際に手を動かしながら説明を聞くとすぐ作れるようになります!
  • スマホに対応させてみよう
  • 完成したサイトをアップロードしよう
  • Web制作の現場から送る調べ方や便利なことTipsグラフィックデザイナーなら気になる文字のこと、など

2日間講座へのお申込みはこちらのページから

  • 開催日時:3月18日(土)〜3月19日(日) 10:00〜16:00
  • 会場:大阪府大阪市西区江之子島1-4-1 にちようビル 3階
    (千日前線 阿波座駅 徒歩3分)
  • 参加費9,800円 ※今回のみ、お得にお申込みいただけます。

3連休のうちの濃密な10時間集中レッスンで、ぐんとスキルアップしませんか?

ご参加される方へ:事前準備のお願い

当日はノートパソコンをお持ち下さい。
お持ちいただくノートパソコンには、下記のソフトをインストールしておいてください。

お申込みはこちら

http://social-around.com/seminer01/

☆日程があわないけど興味があるという方は、Creators FactoryのFacebookページにて最新情報をチェックしてください。

簡単!スマホ用メニュー|3本線のハンバーガーメニューと、その下に「menu」という文字

こんにちは、寒くなってきました。
副業フリーランスも、うさぎ雑貨制作も最近ちょっとサボり中のマッツォです。

久しぶりによく使うコードをメモとして残しておこうと思い久しぶりにブログを開きました。

スマートフォンのときだけ3本線のメニューが右上にでてくるアレです。

やりたいこと

  • 3本線のハンバーガーメニュー
  • 3本線の下に「menu」と言う文字もついているもの
  • クリックして開いている時は「これクリックしてるよ」とわかるようにボタン部分の色は暗くする
<div class="menu_button"><span></span><span></span><span></span>MENU</div>
<ul id="hNavi">
	<li><a href="index.html">トップ</a></li>
	<li><a href="info.html">企業情報</a></li>
	<li><a href="place.html">拠点一覧</a></li>
	<li><a href="sitemap.html">サイトマップ</a></li>
</ul>

そして下のJSは、スマホのときだけメニューがでるようにする部分です、headタグの中に書きましょう。

<script>
	if (window.matchMedia('screen and (max-width:768px)').matches) {
		//メニュー
		$(function() {
		    $("#hNavi").css("display","none");
			$(".menu_button").on("click", function() {
				$("#hNavi").slideToggle();
				$(".menu_button").toggleClass("menu_close");
			});
		});
	}
</script>

これで準備はできましたが、実際三本線にしたり、メニューに色をつけたりするのはCSSで行います。
下は例。スマホ用のCSSに書いて下さい。
色などお好きに変更してみてください。

.menu_button {
    position: absolute;
    top: 22px;
    right: 10px;
    background-color: #FA0046;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
    color: #FFF; }
    .menu_button span {
      display: block;
      background-color: #fff;
      height: 2px;
      margin-bottom: 3px; }
  .menu_close {
    background-color: #CE5E60; }
  #hNavi {
    position: absolute;
    top: 70px;
    right: 10px;
    z-index: 999;
    border: 2px solid #CE5E60;
    border-radius: 3px; }
    #hNavi a {
      background-color: #FBF7F7;
      display: block;
      padding: 10px 20px;
      color: #FA0046;
      border-bottom: 1px dotted #CE5E60;
      text-decoration: none;
      text-align: right; }
    #hNavi li:last-child a {
      border: none; }
  #hNavi:after {
    content: "";
    position: absolute;
    top: -8px;
    right: 12%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #CE5E60 transparent;
    z-index: -1; }

※動かない場合

jQueryを読み込んでいますか?orその読みこみより前に記述していませんか?

超超初心者のころナビで困ったこと色々思い出してみた

最初のころは理解に苦しんだul li の横並び(float)などなどは、自分としてはとても混乱したところかな、と思います。
例えば、横並びにはなったけど、高さ(height)が反映されないよー!とか。

今回は、ナビゲーションを2つご紹介します。 “超超初心者のころナビで困ったこと色々思い出してみた”の続きを読む

:nth-childでaタグにCSSでボタン実装したいんですが反映されません

ナビゲーションの実装。
こんなタグでナビゲーションを作ってみました。

<ul class="nav">
	<li><a href="#">浜寺公園</a></li>
	<li><a href="#">大山公園</a></li>
	<li><a href="#">大泉緑地</a></li>
	<li><a href="#">大浜公園</a></li>
</ul>

これを横並びにfloatして背景画像をあてたい!
めちゃくちゃ初歩的なことだっただろうと思うのですが、
私はちょっと勘違いしておりハマりましたので、書いておきます。

条件は、liにidなどを付けずに、疑似クラス「:nth-child」を使ってそのナビゲーションを実装するということでした。
:nth-childについては下記のページを参考にさせていただいた。
http://weboook.blog22.fc2.com/blog-entry-285.html

ここで見ながら気楽に書いてた。
「.nav li a」に「:nth-child」をつけて、
.nav li a:nth-child(2)
にCSSを指定してゆけばよいのだと思っていました。
大間違い!!
a:nth-childじゃ動いてくれなかった!!!!

試行錯誤の結果・・・・・下記のような感じで使わなければならないのでした・・・・・
li:nth-child(2) a です!

.nav li:nth-child(2) a {
float: left;
background-image: url(../images/nav.png);
display: block;
height: 40px;
text-indent: -999999px;
width: 166px;
background-position: -255px 0px;
}

最近気になっている本