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日です。


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

りかこ


WEB情報をエクセルVBAで操作する

エクセルVBAとIE(Internet Explorer)を使って
WEBサイトを操作すると次のような事が出来ます。

 ・指定したサイトの情報をまるごと取得する
 ・Yahooオークションから商品情報を一覧で取得する
 ・販売サイトを検索し、商品の最安値を描出する
 ・中古車サイトから車の画像を描出する
 ・クチコミサイトで商品の検索と評判を描出する

突然のプログラム紹介で申し訳ありません。
私たちが学んでいるHTMLの知識を活用して
さらにおもしろい事が出来ると思ったからです。

以下サンプルプログラム(トンダバヤシネット情報からリンクコネクションを描出)
 Public Sub printMain()
    Dim ie As InternetExplorer
    Set ie = CreateObject("InternetExplorer.Application")
    'ie.Visible = True  'IEを表示
    ie.Visible = False 'IEを非表示
    ie.navigate "http://tondabayashi-net.seesaa.net/"
    Do While ie.Busy Or ie.readyState < READYSTATE_COMPLETE
        DoEvents
    Loop
    Dim FileName As String
    FileName = ThisWorkbook.Path & "\JIRO_" & Format(Now, "YYYYMMDDHHmmSS") & ".txt"
    Dim FileNum As Integer
    FileNum = FreeFile()
    Open FileName For Output As #FileNum    
    Dim htmlDoc As HTMLDocument 'HTMLドキュメントオブジェクトを準備
    Set htmlDoc = ie.document 'objIEで読み込まれているHTMLドキュメントをセット 
    Dim el As IHTMLElement 'IHTMLエレメントオブジェクトを準備
    For Each el In htmlDoc.Links 'htmlDocのリンクコレクションの要素全てについて繰り返す
         Print #FileNum, el.href 'elのリンク先URLを出力
    Next el    
    Dim colDes As IHTMLElementCollection 'IHTMLエレメントコレクションを準備
    Set colDes = htmlDoc.getElementsByName("description") 
         'htmlDoc内のname属性descriptionの要素をコレクションとして取得
    Print #FileNum, colDes(0).Content 'コレクションの最初の要素をデバッグ表示    
    Close #FileNum   
 End Sub

以下、上記プログラムの出力
javascript:document.cookie='force_pc=0; max-age=15768000; path=/'; document.cookie='force_sp=1; max-age=15768000; path=/'; document.location='/?from_pc'
http://blog.seesaa.jp/
https://sda.seesaa.jp/clk/qwAOtGPttI/
http://tondabayashi-net.seesaa.net/
http://tondabayashi-net.seesaa.net/article/455402874.html
http://code.jquery.com/jquery-1.11.1.min.js
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/kensyou.jpg?d=a1
https://saruwakakun.com/html-css/basic/display
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/article/455211873.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/455061669.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/454426018.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/454299067.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/453727745.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/455211873.html
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/article/455061669.html
http://www.htmq.com/style/color.shtml
http://www.htmq.com/style/font-weight.shtml
http://www.htmq.com/style/font-size.shtml
http://www.htmq.com/style/font-family.shtml
http://www.htmq.com/style/line-height.shtml
http://www.htmq.com/style/text-align.shtml
http://www.htmq.com/style/text-decoration.shtml
http://www.htmq.com/style/text-shadow.shtml
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/article/454426018.html
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/1-kayu2.JPG?d=a0
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/2-kurugussu2.JPG?d=a1
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/3-putikogi1.JPG?d=a2
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/4-samugetan1.JPG?d=a1
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/4-samugetan3.JPG?d=a1
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/S_6890854862581.jpg?d=a1
http://tondabayashi-net.seesaa.net/article/454426018.html#comments
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/article/454299067.html
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/index-2.html
http://tondabayashi-net.seesaa.net/index-3.html
http://tondabayashi-net.seesaa.net/index-4.html
http://tondabayashi-net.seesaa.net/index-5.html
http://tondabayashi-net.seesaa.net/index-2.html
http://tondabayashinet.main.jp/doz/index.html
http://tondabayashinet.main.jp/dorafuto/index.html
http://tondabayashinet.main.jp/k2/index.html
http://tondabayashinet.main.jp/hawaiidroute/index.html
http://tondabayashinet.main.jp/fudaiken/index.html
http://tondabayashinet.main.jp/thankyou3/index.html
http://tondabayashinet.main.jp/oeses/index.html
http://tondabayashinet.main.jp/woody/index.html
http://tondabayashinet.main.jp/mkirara/index.html
http://tondabayashinet.main.jp/jiro/index.html
http://tondabayashinet.main.jp/tacky/index.html
http://tondabayashinet.main.jp/gura/index.html
https://www.facebook.com/tondabayashi.net/
https://twitter.com/tondabayashinet
http://tondabayashi-net.seesaa.net/article/454426018.html#comment
http://tondabayashi-net.seesaa.net/article/449063884.html#comment
http://tondabayashi-net.seesaa.net/article/449063884.html#comment
http://tondabayashi-net.seesaa.net/article/448720176.html#comment
http://tondabayashi-net.seesaa.net/article/448720176.html#comment
http://blog.seesaa.jp/tag/
http://blog.seesaa.jp/tag
http://blog.seesaa.jp/
大阪府富田林市金剛公民館で活動中のホームページサークルの共同編集ブログです。
以上、紹介です。

以下連絡事項
 ・1月の勉強会
   平成30年1月17日(水) 13時~ 第1講座室 
        1月24日(水) 13時~ 第2講座室(ここしか取れませんでした)
 ・冬休みの宿題
   トップ画像(サイズ:1280 x 200~500)を作ってくる

                         By バッテリー

続きを読む