2月14日勉強会報告

前回はハンバーガーメニューまで作りました。
(作り方参照:meanmenu使い方.textの手順①②③)

★今回はbodyの中のサイドコンテンツ(左側)とメインコンテンツ(右側)の
位置の見え方をパソコンとスマートフォンで整えるスキルを教えてもらいました。

①自分のフォルダ上で右クリック→open as blacketsで開くを選択。
htmlで、bodyの中を見ると、

<div id="left">サイドコンテンツ左</div>
<div id="right">・・・・・・メインコンテンツ右(ごあいさつなど)・・       
        </div>   
の順で書かれている。 
パソコン上で見ると左右の位置そのままでよいが、
スマートフォンで見るとサイドコンテンツが先にきて、
メインコンテンツがその下に見えるので、おかしい見え方になる。
パソコンで見ても左右の位置が変わらずにしかも、
スマートフォンで見てもメインコンテンツが先にきて
サイドコンテンツが後で見えるようにするには・・・?

②まず、html上で
メインコンテンツを先に書き、
そのあとにサイドコンテンツが来るように位置を変える。
(*お約束その1:これから書く順番はメインコンテンツを先に書くようにしましょう*)
→でもこれだけだとパソコンで見ると左がメインコンテンツ、右がサイドコンテンツになります。

③cssファイルで、サイドコンテンツとメインコンテンツの
両方にかけていたfloat:leftを

  #left{float:left}
  #right{float:right}に書き換える。
→これでパソコンで見ても左はサイドコンテンツ、右はメインコンテンツにみえる。

★メインコンテンツの中のあいさつ文に自分のあいさつ文を貼りつける
★小見出しh2にデザインをかける
→フォントサイズを大きく(30px)して中央揃えにする
(*お約束その2:スマホ対応は2の倍数が望ましい)

 #right h2{
     font-size: 30px;
     text-align: center;}   


★文字が左右きちきちなので、
スマートフォンで手にもって見ると指でかくれるかも・・・
なので両端は1文字分空けておく必要があるので、
 paddingを20pxにする

 #right{
      width: 100%;   
      padding: 20px;}

★★次回の宿題です。★★
①H2のタイトルをインパクトのあるタイトルにする。
②3つか4つの写真(最低限300×300のサイズ)を
四角か丸か角丸で入れていくので写真のキャプチャー(説明文)を作っておく。

みなさま、未熟な報告で申し訳ありません。<m(__)m>
cssファイルでfloatを変えるのは
パソコン用なのかタブレット用なのかやってて分からなくなりました。
私はタブレット用の#rightや#leftにfloatをかけていました。
はたしてこれでいいのかなぁ~??
             by ぐら

   

   




nonkohanのおすすめbrackets拡張機能

brackets拡張機能おススメでググっていただくと色々な記事がヒットします。

ちょっとのぞいていただければ、色々面白い拡張機能が紹介されています。
ご自分に合った拡張機能をインストールしてブラケッツをカスタマイズしてみましょう。

その中で、前回の勉強会でご質問があった拡張機能がこれです。

Autoprefixer

これをインストールするととても便利です。
導入手順はこちらをご覧下さい。

nonkohan

+++++++++++++++++

前回の勉強会を最後に「学級委員長」が退会されました。
いつも単語力のない私を助けて頂き、本当にありがとうございました。
また、いつか戻ってほしいです。(´;ω;`)ウッ…

と、いう訳てとんだばやしドットネットは新規部員募集中です。
見学希望の方はコメント欄より申し込みください。

次回の勉強会は3月7日(水)1時30分~3時30分金剛公民館2階講座室です。
3月は日程変更で、2回目は3月28日(水)になっています。

learn.jpg


新入部員募集します!

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

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