新入部員募集します!

とんだばやしドットネットでは新入部員を募集します!

img01.jpg

お待たせしました!
とんだばやしドットネットで新入部員の募集が再開されました。

ホームページに興味はあるけれで、何から始めていいかわからないあなた、ここにホームページを一から学ぶ勉強会があります。一緒にホームページを作ってみませんか?

開催日第1・第3水曜(変更の場合あり)
時間1時30分~3時30分
場所
富田林市立金剛公民館
月会費1000円

まずはお気軽に、見学に来てください。

見学希望の方はコメント欄よりご連絡ください。
コメントは承認制になっておりますので、書かれた内容は表示されませんのでご安心ください。
コメント欄に見学希望の旨と、メールアドレスをご記載ください。
折り返しメールに返信させて頂きます。

nonkohan

2月7日の勉強会

今回は、パソコンで作成した画面をスマホやタブレットでも見やすくするためのスキル学習の続きです。ヨコ並びが多いパソコンのメニュー。それを狭い画面が多いスマホ等で見る場合,タテ並びにした方が見やすくなります。

食材をタテに積み重ねるハンバーガ-の形に似ていますので、通称”ハンバーガー・メニュー”というそうです。お好み焼きの一種、広島焼きも、混ぜずに積み上げます(笑い)

まずはメニューになるnavにデザインを施します。

<a>文字</a>の文字色がポイントすると変わるのはLINKが効いている証です。

navの文字色を変えるのは、#m_nav nav ul li a(アンカー)にかけます。

navのメニューを真ん中に移動、揃えるのは、text-align-centerを#m_nav nav ul li にかけます。

navの上下に余白をつけるのは、#m_nav nav ul li aにpadding-top ,padding-bottomをかけます。
例 上下同じアキであれば、{padding:10px 0;}

aの上下にアキをつけたので、これを固定するため、さらにdisplay:block;を追加します。

ポイントしたとき文字の背景色をかえるのは、:hoverを使う。疑似クラスなので、前に:がつく。
例 #m_nav nav ul li :hover{background-color:#000; }

naviにデザインを施したので、これをスマホでみるために、作成中のフォルダ内にmeanmenu.cssとjquery.meanmenu.jsを張り付けます。(昨年9月に配布した"レスポンシブルデザイン基本,txt"のなかにあります)

次にhtmlのheaderのなかのスタイルシートのリンク最後に以下のタグをコピペで貼り付けます。
 <link rel="stylesheet" href="meanmenu.css">
 
さらにbodyタグの最後にjavascriptを記入します。これもコピペで貼り付けられます。

 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="jquery.meanmenu.js"></script>
 <script>
  jQuery(document).ready(function() {
   jQuery('header nav').meanmenu();
  });
 </script>
 
以上の手順を踏んだ後、BRACKETSで開き、検証します。なお、当方がうまく検証できなかったのは、top写真をhtmlのヘッダー間に記述していたためで、CSSに書くのが正解でした。先生からの指摘で分かりました。


WS000004.JPG

パソコン画面です。


WS000002.JPG

検証1 右上にナゾ?の三本線が出ています。

WS000003.JPG

検証2 三本線をクリックすると、メニューが展開します。
    ハンバーガー状態です。

WS000001.JPG
検証3 BODY部分はこんな感じで見えます。


以下の画面は、先生がトップ画面にふさわしい文字や透過した
デザインをしてくれたものです。ロマンチックになりました。
WS000005.JPG


WS000006.JPG



お知らせ

🎵退会、休会者がでますので、新しく会員を募集することになりました。ブログなどのほかチラシを公民館掲示板などに張りPRします。

🎵会長の5月交代は連絡網メールのとうりです。会員の役割分担が一巡しましたので、各位が再度”登板”する運びになります。また、月当番の組み合わせと順番は追って会長からメールします。

元アラコキ

スマホサイトの必要性について

先日の勉強会でスマートフォン用サイトの必要性に関する質問がありました。

勉強会の途中でしたので、深くは触れませんでしたがここで簡単に触れてみようと思います。
ラインが以下の調査結果を発表しています。2017年のものですので、現在はもう少し進んでいると考えてよいでしょう。(タイトルをクリックしていただければ記事にリンクしています)

【LINE】〈調査報告〉インターネットの利用環境 定点調査(2017年上期)


記事を読んで頂ければわかると思いますがこの中で特に注目すべき点はこちらです。

■日常的にインターネットを利用する環境は「スマホのみ」が最も多く、「スマホとPC」併用者を上回る

・ 「スマホ」でのインターネット利用者は全体の85%対して「PC」での利用者は46%。

・ 構成比として最多は「スマホのみ」での利用者で、約半数。「スマホとPC」の併用者は4割弱。

 「PCのみ」での利用者はわずか6%に留まる。



インターネットを利用する方でスマホのみの利用者が多いというのが現実です。
パソコンを持ち歩いて検索している人よりもスマホで簡単に情報を得ようよする人が多いならばそれに合ったサイト作りが必要です。
どんなに良いサイトでも閲覧者がいないサイトは意味がありません。

伝えたい内容があるのなら伝える努力をしましょう。
各デバイスに対応したレスポンシブデザインは今後のホームページ作成には欠かせないものです。

なので、とんだばやしドットネットでは今後も、スマートフォンでもタブレットでもパソコンでもどんな環境でも読みやすいサイト構築を目指していきたいと思います。

ご意見ご質問はコメント欄からどうぞ

nonkohan

1月24日の勉強会

本日の授業概要

★トップ画像の写真の加工
1280×300~500のサイズ
スマホで見たとき画面に乗せた文字が切れないように横幅1/3を目安に調整する
1/3に分けた左・中・右のどの部分をみせるかは、CSSで指定する
header{background:url(images/tada.jpg) top left no-repeat;}
top left
top center
top right
どのように見えるかは
右クリック 検証 スマホタブレットPCで確認
全てのサイズで見れるように検証しながら調整する

※はじめて訪れて目にする画面なので大事につくる
※相手に伝えたい大事な部分は1/3に集める!

文字を入れるときの注意点
①全てのサイズのスマホ・タブレットで切れてしまわないように調整する。
②PhotoScapeでフォント指定のときにアンチエイリアシングのチェックを入れておく。文字の周りがガタガタにならない。
③シャドウ(影)を軽くつけてみるものよい。(但しつけすぎるとダサくなるので注意)


★メニューを作る
【HTML】
ヘッダーの上にメニューを作る場合はheaderの上に
ヘッダーの下にメニューを作る場合はheaderの下に以下を書く

 <div id="m_nav">
        <nav>
             <ul>
                 <li><a href="#">ホーム</a></li>
                 <li><a href="#">ごあいさつ</a></li>
                 <li><a href="#">〇〇〇</a></li>
                 <li><a href="#">〇〇〇</a></li>
                 <li><a href="#">〇〇〇ー</a></li>
                 <li><a href="#">〇〇〇</a></li>
                 <li><a href="#">〇〇〇</a></li>
             </ul>
         </nav>
    </div> <!-- /#m_nav -->
     <header></header>

【CSS】
下線を消す 
横並びにする
(横幅サイズ指定・直前の親要素に回りこみ解除 overflow: hidden;
 liにfloat:left)
メニューバーに色をつける

PC用にheaderの上もしくは下に以下を書く(スマホ用はハンバーガーメニュー)
 #m_nav ul{
   overflow: hidden;
        background-color: #28efdf; }

 #m_nav ul li{
        float: left;
        width: 150px;}
    
 #m_nav ul li a{
        text-decoration: none; 
        color: #fff;}
    

★便利はフリーソフト
  切り抜きソフト
   『ginp2』
  フォトスケープ
   カラーピッカー

※次回は2/7(水)
  宿題は挨拶用の文章を考える

Yoiko でした

2018年1月17日勉強会

ブログのアップを忘れていました。
申し訳ございませんでした。

1月17日の勉強会内容です。


1.皆さんの冬休みの宿題を確認しました。

2.Photoscapeの画像処理を再確認しました。

 (1)Photoscapeのページを開けて、
  1280×300~500のサイズを指定し、あらかじめあるレイアウトを設定し、トップ画像を作成する。
 (2)写真から編集するときは、画像編集を開き、サイズを設定してから、写真を取り込むなどの作業をする。

※スマホサイトで見るときは、画面の1/3ぐらいに切れるので、
 left,center,rightのどこかがスマホトップにくるように、文字やデザインを決める

※サイトのトップ画像は、
イケサイなどのホームページなどを参考にして、作ってみましょう。

3.Bracketsの内容

① bracketsの12.20lessonのimageホルダに自分で作ったトップ画像を入れる。

② 12.20lessonの中のindex.htmlとstyle.cssをあける。

③ style.cssの中のimgを自分で作った写真に変更する。
  header{width: 100%;
    height: 500px;
    background:url(images/各自のファイルの名前.JPG) top right no-repeat;}  
  ※rightにするとスマホサイトでは、写真の右の部分がでます。
   じぶんのトップ画像の右、左、真ん中どこをスマホサイトで見せたいかを right、left、centerで指定します。

④ パソコン画面のサイズを写真サイズ変更になってるので、変更する。

   1.headerのheightを自身の写真のheightに変更する。

   2.PC用の#wrapperと、headerのwidthを1280pxに変更する。

   3.PC用の#leftのwidthを380pxに変更する。

   4.PC用の#rightのwidthを900pxに変更する。

⑤ index.html の画面です。
メインコンテンツの中にあいさつ文を入力する。
1.index.htmelの中のcontentsのrightの中にh2を作り、あいさつ文を入力する。
      <div id="right">
            <h2>ごあいさつ</h2>
            <p>はじめまして。このホームページはとんだばやしの~</p>
            </div>

2.あいさつ文の下に写真を入れる。

  <img src="images/img01.jpg" alt="">
     <img src="images/img02.jpg" alt="">
     <img src="images/img04.jpg" alt="">

⑥ style.css の画面です。
            
あいさつ文の文字にデザインをかける。
1.h2の文字をフォント16px、太字、センターにする。

style.cssのPC用の中に
  h2{font-weight: bold;
       text-align: center;
       font-size: 18px;}

2.各自で、h2にデザインをかける。


1月24日(水)までの今日の宿題です。

1280×300~500のトップ画像を作る。
あいさつ文を100字~300字ぐらいのものを考えてくる。

2月7日、14日
3月7日、28日です。


ブログアップを忘れてしまい、すみませんでした。

りかこ