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 バッテリー

続きを読む

12月6日(水)の勉強会

【本日の授業の概説】

スマートフォンでよく見る形のナビゲーションメニューが作りたいなあ、どーしよっかなあ」という時に活用できるスキル[ハンバーガーメニュー(meanmenu)]が、本日のテーマです。


私はスマートフォンを持っていないので知りませんでしたが、ハンバーガーボタン (ハンバーガーアイコン)とは、スマートフォンサイトでよく見る三本線のボタンです。大抵の場合ハンバーガーボタンを押すとその下にメニューが展開されます。そしてもう一度ボタンを押すとメニューが折りたたまれます。

アコーディオンのように伸縮する様から、こういったメニューをアコーディオンメニューとも呼びます。単純にハンバーガーボタンから展開されるメニューという事でハンバーガーメニューとも言います。

この、ハンバーガーメニューを知識として理解することが、次回から始まるレスポンシブルデザインスマホ対応には不可欠となります。ホームページ作成において、今後はスマホ対応にすることを前提に授業が進められると思いますので、本日のテーマ「ハンバーガーメニュースマホ対応」については十分に理解していただきたいと思います。


【本日の授業内容】

1.nonkohan講師より「ハンバーガーメニュー」というフォルダをUSB経由でGET!

 このファイルには(1)before(2)meanmenu使い方(3)images(4)afterが入っている。


2.まず、「ハンバーガーメニュー」を開いた後で、(1)beforeのファイルを右クリックしてブラケットで開く。(1)before内には何も入っていない空白の状態である。


3.この空白に「indx.html」と「style.css」をブラケットで作成する。


作業ファイル新規作成名前を付けて保存→ indx.htmlと名前をつけて保存。

この中に、一から書き込むのが面倒な方は、前回11-29の「これだけは覚えておこう改訂版」の中のHTMLの基本構文その1から基本構文をコピーして貼り付けて保存する。


作業ファイル新規作成 名前を付けて保存style.cssとつけて保存。先頭部分に@charset "utf-8";を記入する。


4.html<body></ body >の間に、nav>ul>li*3(短縮形)を打ち込みTABキーを押す。そうすれば、<nav><ul>  <li></li> <li></li>< li></li> </ul></nav>となる。


5.<li></li>の間に、aを打ちTABキーを押すと、<li><a href=""></a></li>となる。<li><a href=""></a></li>3つ出るので、それぞれの""#を打ちこむ。そして<a href=""></a>の間にメニュー1,メニュー2,メニュー3を記入する。<a href=""></a>によりカーソルを当てれば他のところにリンクさせることが出来る。


【完成形】

navはなくても結果は同じ。しかしナビゲーションの役割をしているとPCに教える。

<body>

<nav>

    <ul>

        <li><a href="#">メニュー1</a></li>

        <li><a href="#">メニュー2</a></li>

        <li><a href="#">メニュー3</a></li>

    </ul>

</nav>

</body>


6.次にリスト1,2,3を横並びにさせる。横並びの手順として必要な3要素は

(1) 幅を決める(2) それぞれにフロートをかける(3) 親要素にフロート解除指示。


7.前記6の指示は全てCSSで行う。CSSには下記のように記載する。


@charset "utf-8";

nav ul {width: 454px;margin: 0 auto;}


nav ul li {width: 150px;              float: left;           border-left: 1px solid #000;

              text-align: center;}


nav ul li a {       display: block;text-decoration: none;              color: #000;

              font-weight: bold;}


nav ul li:last-of-type{border-right: 1px solid #000;}


上記の指示における短縮形は下記の通りである

w454width: 454px;m0-a margin: 0 auto; fl  float: left;

bl+ border-left: 1px solid #000; br+border-right: 1px solid #000;

tac text-align: center;  dbdisplay: block;  tdntext-decoration: none;

ccolor: #000; fwbfont-weight: bold;

nav ulli la: last-of-type nav ul li: まで打てばlast-of-typeが選択できる。そして、nav ul li:last-child{  br+}を入力する。


8.前記7までの作業で、ホームページの外観が出来上がったので、これをスマホ対応するためにはジャバスクリプトの指示を出す要素 [meanmenu,css]にリンクさせる必要がある。その手順を下記ので行う。


afterフォルダ内にある[meanmenu.css][jquery.meanmenu.js]

beforeフォルダ内に張り付ける


htmlheader内スタイルシートのリンク最後に下記を記載する。

               <link rel="stylesheet" href="meanmenu.css">


bodyタグの最後</body>の前にjavascript(下記の指示)を貼り付ける。

下記の文章は、【1-(2)meanmenu使い方のフオルダー】内にあります。


<!-- meanmenujavascript読み込み -->

               <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>


9.<nav></nav>の外側を<header></header>でくくる。

上記のジャバスクリプトの指示は、‘header内のnav’に適用されるので、<nav></nav>の外側を<header></header>でくくらなければなりません。くくって下さい。


【最終完成形】

<body>

<header>

<nav>

<ul>

<li><ahref="#">メニュー1</a></li>

<li><ahref="#">メニュー2</a></li>

<li><ahref="#">メニュー3</a></li>

</ul>

</nav>

</header>


10.これで完成です。スマホ対応になったかはパソコン画面で検証して下さい。

 検証するには、表示画面を出し右クリックで検証をクリック、スマホ画面で表示させて、ハンバーガーメニューが出来ていればOKです。よくできました。ハンバーガーメニュー画面の背景色や、透明度等を変えるにはmeanmenuで指示を行って下さい。(指示の箇所はnonkohan講師により示されています)。

kensyou.jpg


11. さて、何か忘れていませんか・・・、親要素にフロートの解除がなされていません。どうするかは、会員の皆さんならすぐわかると思いますので、フロート解除の指示(短縮形:ofh)を親要素に組入れてみて下さい。


12 ちなみに、前回の授業で会員の方からブロック要素とインライン要素についての質問がありました。単純に訳すと、ブロックは塊、インラインは詰め込むという意味です。塊には幅が指定できますが、詰め込みには幅は指定出来ないということです。また、固まりの中に詰め込むことが出来るのであり、固まり(ブロック要素)を詰め込み(インライン要素)で囲む状態(例: <a href="#"><li>メニュー1</li></a>)は間違いということを認識しましょう。これについてわかりやすく説明しているサイトを下記に示します。

CSSdisplayの使い方を総まとめ!inlineblockの違いは?

     https://saruwakakun.com/html-css/basic/display

                   

                             by ショコラ

11月29日(水)の勉強会報告

先週から3週連続となる勉強会の2週目です。
最初に先週の復習で短縮形タグを入力して「ボックスレイアウト」の作成をおさらいしました。
今週のテーマは「これだけは覚えておきたいメニューの作り方」です。
本日配布されたテキストメモに全て説明されていますが簡単にご紹介です。
 1.リストには番号なしリストulと番号ありリストolがありますが
  通常良く使う番号なしリストulで<li></li>を括ります。
 2.更にリスト全体の<ul></ul>を<nav></nav>で括ります。
 3.リストはブロック要素…横幅いっぱいのエリアを持っています。
 4.メニューリストは当たり前ですがどこかのページへ飛ばすため、リンクを貼ります。
 5.リンクの<a>を貼ることでリストはブロック要素からインライン要素に変化します。
 6.インライン要素に変化したリストは文字の大きさ分しか容積がありません。 
  容積の無いリストは、当然に非常にマウスが押しにくいので横幅やサイズ指定して
  容積を増やして見栄えを良くする必要があります。
 7.だからインライン要素をブロック要素に指定するdisply:block;を付け加えます。【お約束事】


  インライン要素とは文章の一部としてブロック要素内で使用される。
  ブロック要素とはひとつにまとまったブロックを構成する要素

やっと先日より解らなかったfloatが理解出来る様になりましたが、また新しい課題の
「ブロック要素」「インライン要素」が表れました。しばらくかかりそう・・・!
                               11月の報告者 ドラフト10位