Warning: sprintf(): Too few arguments in /home/hamata/hamatawww.com/public_html/blog/wp-includes/theme.php on line 875

Warning: sprintf(): Too few arguments in /home/hamata/hamatawww.com/public_html/blog/wp-includes/theme.php on line 875
class="home blog has-sidebar">

トライデントコンピュータ専門学校でWebデザインの勉強をしている学生です。将来はエンジニアを目指しています。

こんにちは!北濱です!2周目のリレーブログがやって参りました!本日はついに!進級展の前日ということで、会場設営をしてきました!その様子がこちら!

会場設営している様子

準備万端ですね!中には作品が完成していない人もいたり、バタバタしていましたが、なんとか準備することができました!明日から1週間、トライデントコンピュータ専門学校Webデザイン学科1年の進級展が開催されますので、ぜひ立ち寄ってくださいませ〜!ご来場お待ちしております!

展示場情報

  • 場所 : 名古屋市役所市民経済局 市民ギャラリー矢田 第7展示室
  • 日時 : 2018年3月6日(火)~3月11日(日)9時~19時(最終日は17時)
  • 住所 : 愛知県名古屋市東区大幸南1丁目1−1−10

3月9日は11時30分〜16時30分まで閉鎖していますので注意!

SNSとホームページ

Facebook
Twitter
Instagram
WWWホームページ

こんにちは!北濱です!2周目のリレーブログがやって参りました!本日はついに!進級展の前日ということで、会場設営をしてきました!その様子がこちら!

会場設営している様子

準備万端ですね!中には作品が完成していない人もいたり、バタバタしていましたが、なんとか準備することができました!明日から1週間、トライデントコンピュータ専門学校Webデザイン学科1年の進級展が開催されますので、ぜひ立ち寄ってくださいませ〜!ご来場お待ちしております!

展示場情報

  • 場所 : 名古屋市役所市民経済局 市民ギャラリー矢田 第7展示室
  • 日時 : 2018年3月6日(火)~3月11日(日)9時~19時(最終日は17時)
  • 住所 : 愛知県名古屋市東区大幸南1丁目1−1−10

3月9日は11時30分〜16時30分まで閉鎖していますので注意!

SNSとホームページ

Facebook
Twitter
Instagram
WWWホームページ

こんにちは、Webデザイン学科1年の北濱大輔です。
本日からリレーブログが始まりましたことをここに宣言します。改めまして、トップバッターを務めさせていただく、北濱大輔です。
現在僕たちは、展示チームとWeb制作チームに別れて、市民ギャラリー矢田で行われる進級展の準備に取り組んでいます。僕が担当するWeb制作チームでは、もうすぐWebサイトが完成されようとしています。その中で、僕はWebサイトのアニメーションの部分を担当しています。現在、全てのアニメーションの動きを確認済みなので、あとは実際のサイトに組み込むだけです。
完成がとても楽しみです!

コンセプトは「遊園地」で、キャッチフレーズをWWW(Welcome to Web World)にしました。

展示物は、センサーを使った電子工作と、お天気アプリUIデザインを展示します。
それぞれ、ユーモアあふれる作品や、オリジナリティのあるお天気アプリUIデザインを作りました!

進級展に向けて、たくさんの時間をかけて準備をしてきたので、たくさんの方々に来てもらい、良い進級展になって欲しいと思います。

気になる方がいましたら、ぜひお越しください!

進級展の情報

  • 場所:市民ギャラリー矢田 3階 第7展示室
  • 日時:2018年3月6日(火)~3月11日(日)9時~19時(最終日は17時)
  • 住所:愛知県名古屋市東区大幸南1丁目1−1−10

こんにちは、Webデザイン学科1年の北濱大輔です。
本日からリレーブログが始まりましたことをここに宣言します。改めまして、トップバッターを務めさせていただく、北濱大輔です。
現在僕たちは、展示チームとWeb制作チームに別れて、市民ギャラリー矢田で行われる進級展の準備に取り組んでいます。僕が担当するWeb制作チームでは、もうすぐWebサイトが完成されようとしています。その中で、僕はWebサイトのアニメーションの部分を担当しています。現在、全てのアニメーションの動きを確認済みなので、あとは実際のサイトに組み込むだけです。
完成がとても楽しみです!

コンセプトは「遊園地」で、キャッチフレーズをWWW(Welcome to Web World)にしました。

展示物は、センサーを使った電子工作と、お天気アプリUIデザインを展示します。
それぞれ、ユーモアあふれる作品や、オリジナリティのあるお天気アプリUIデザインを作りました!

進級展に向けて、たくさんの時間をかけて準備をしてきたので、たくさんの方々に来てもらい、良い進級展になって欲しいと思います。

気になる方がいましたら、ぜひお越しください!

進級展の情報

  • 場所:市民ギャラリー矢田 3階 第7展示室
  • 日時:2018年3月6日(火)~3月11日(日)9時~19時(最終日は17時)
  • 住所:愛知県名古屋市東区大幸南1丁目1−1−10

今回はjQuery lightSliderという「軽さ」が特徴的なカルーセルプラグインを使って簡単なスライドショーを作ってみたので、lightSliderの使い方と、lightSliderで使えるオプションをまとめました。

目次

  1. jQuery lightSliderのダウンロード
  2. jQuery lightSliderの読み込み
  3. jQuery lightSliderのHTMLの記述
  4. jQuery lightSliderの呼び出し
  5. jQuery lightSliderのオプション
  6. 自分で作ってみた簡単なスライドショー
  7. まとめ

jQuery lightSliderのダウンロード

jQuery lightSlider公式ページ

上記のサイトへ移動して、右上にあるDownloadボタンを押すと、自動的にダウンロードが始まるので、待ちます。


ダウンロードが終わると、フォルダの中に「src」というフォルダがあります。その中にある「css」「img」「js」のフォルダを使っていきます。

jQuery lightSliderの読み込み

次にファイルの読み込みをしていきます。

lightSliderと別でjQueryも必要なので忘れずに読み込んでください。

パスは自分の環境と合わせましょう。

ファイルの読み込み


// head要素内
<link rel="stylesheet" href="src/css/lightslider.css" />
// body要素の閉じタグの前
<script src="js/jquery-3.2.1.min.js"></script> 
<script src="src/js/lightslider.js"></script>

jQuery lightSliderのHTMLの記述

HTMLの書き方です。ulとliを使います。ulの中にid属性を指定して、名前はなんでもいいですが、後ほどsliderを呼び出す際に使います。

data属性を使って、サムネイル画像の指定をします。li要素の中で指定します。「images」フォルダの中に「thumb」フォルダを作ってその中にサムネイルにしたい画像を入れて、指定します。

HTMLの記述


<ul id="lightSlider">
      </li>
      <li data-thumb="images/thumbs/1.jpg">     
        <img src="images/1.jpg"/>
      </li>
        <li data-thumb="images/thumbs/2.jpg">
        <img src="images/2.jpg"/>
      </li>
      ・・・
</ul>

jQuery lightSliderの呼び出し

ついにlightSliderのイニシャライズ(呼び出し)をします。とは言っても、一番シンプルなのはたったこれだけでできます。

sliderの呼び出し


<script>
  $(function(){
    $('#lightSlider').lightSlider();
  });
</script>

jQuery lightSliderのオプション

公式ページに書かれているオプションを翻訳してまとめました。

名前 デフォルト 説明
item 3 一度に表示するスライドの数
autoWidth false 各スライドのカスタム幅
slideMove 1 一度に移動するスライド数
slideMargin 10 各スライド間の間隔
addClass スライダーのカスタムクラスを追加し、異なるスライダーに異なるスタイルを設定することができます
mode ‘slide’ スライドかフェードで切り替える
useCSS true trueの場合、LightSliderはCSSトランジションを使用します。 fall jquery animationが使用される場合
cssEasing ‘ease’ CSSのアニメーションに使用されるイージングのタイプ
easing ‘linear’ jqueryアニメーションに使用されるイージングのタイプ
speed 400 遷移時間(ミリ秒)。 // ex =スピード:400;
auto false trueの場合、スライダーは自動的に再生を開始します。
pauseOnHover false ホバーで自動再生を一時停止する。
loop false falseの場合は、最後の要素のときにスライドの先頭にループバックする機能が無効になります。
slideEndAnimation true slideEndアニメーションを有効にする
pause 2000 各自動トランジション間の時間(ms単位)
keyPress false キーボードナビゲーションを有効にする
controls true falseの場合、前/次のボタンは表示されません。
prevHtml prev制御用のカスタムhtml
nextHtml 次の制御のためのカスタムhtml
rtl false 方向を右から左に変更する
adaptiveHeight false 各スライドの高さに基づいてスライダの高さを動的に調整する
vertical false スライドの方向を水平から垂直に変更する
verticalHeight 500 垂直モードがアクティブでアイテムが1より大きい場合はスライダの高さを設定する
vThumbWidth 100 垂直モードをアクティブにしているときのギャラリーのサムネイルの幅
thumbItem 10 一度に表示するギャラリーサムネイルの数
pager true ページオプションを有効にする
gallery true サムネイルギャラリーを有効にする
galleryMargin 5 ギャラリーとスライドの間隔
thumbMargin 3 各サムネイルのギャラリーとスライドの間隔
currentPagerPosition ‘middle’ サムネイルの位置。 ‘左’、 ‘中央’、 ‘右’
enableTouch true タッチサポートを有効にする
enableDrag true デスクトップマウスのドラッグサポートを有効にする
freeMove true スワイプまたはドラッグ中の自由移動(無制限)を有効にする
responsive null ブレークポイントごとにswipSeparate設定を自由に動かせるようにする(制限なし)またはドラッグする

自分で作ってみた簡単なスライドショー

自作の簡単なスライドショー
jQuery


<script>
  $(function(){
      $('#lightSlider').lightSlider({
        item:1,
        auto: true,
        speed: 500,1
        pause: 4000,
        gallery:true,
        thumbItem:6,
        loop: true,
        adaptiveHeight:true,
      });
  });
</script>

まとめ

今回、jQuery lightSliderというプラグインを使ってみた結果、本当に楽に作ることができて、使いやすいと思いました。さらに、オプションの幅も広く、カスタマイズがたくさんできて素晴らしいと思いました。ですが、いつまでもプラグインに頼っていてはいけないと思うので、いつか自分でJavaScriptを使って1からスライドショーを作りたいです!

今回はjQuery lightSliderという「軽さ」が特徴的なカルーセルプラグインを使って簡単なスライドショーを作ってみたので、lightSliderの使い方と、lightSliderで使えるオプションをまとめました。

目次

  1. jQuery lightSliderのダウンロード
  2. jQuery lightSliderの読み込み
  3. jQuery lightSliderのHTMLの記述
  4. jQuery lightSliderの呼び出し
  5. jQuery lightSliderのオプション
  6. 自分で作ってみた簡単なスライドショー
  7. まとめ

jQuery lightSliderのダウンロード

jQuery lightSlider公式ページ

上記のサイトへ移動して、右上にあるDownloadボタンを押すと、自動的にダウンロードが始まるので、待ちます。


ダウンロードが終わると、フォルダの中に「src」というフォルダがあります。その中にある「css」「img」「js」のフォルダを使っていきます。

jQuery lightSliderの読み込み

次にファイルの読み込みをしていきます。

lightSliderと別でjQueryも必要なので忘れずに読み込んでください。

パスは自分の環境と合わせましょう。

ファイルの読み込み


// head要素内
<link rel="stylesheet" href="src/css/lightslider.css" />
// body要素の閉じタグの前
<script src="js/jquery-3.2.1.min.js"></script> 
<script src="src/js/lightslider.js"></script>

jQuery lightSliderのHTMLの記述

HTMLの書き方です。ulとliを使います。ulの中にid属性を指定して、名前はなんでもいいですが、後ほどsliderを呼び出す際に使います。

data属性を使って、サムネイル画像の指定をします。li要素の中で指定します。「images」フォルダの中に「thumb」フォルダを作ってその中にサムネイルにしたい画像を入れて、指定します。

HTMLの記述


<ul id="lightSlider">
      </li>
      <li data-thumb="images/thumbs/1.jpg">     
        <img src="images/1.jpg"/>
      </li>
        <li data-thumb="images/thumbs/2.jpg">
        <img src="images/2.jpg"/>
      </li>
      ・・・
</ul>

jQuery lightSliderの呼び出し

ついにlightSliderのイニシャライズ(呼び出し)をします。とは言っても、一番シンプルなのはたったこれだけでできます。

sliderの呼び出し


<script>
  $(function(){
    $('#lightSlider').lightSlider();
  });
</script>

jQuery lightSliderのオプション

公式ページに書かれているオプションを翻訳してまとめました。

名前 デフォルト 説明
item 3 一度に表示するスライドの数
autoWidth false 各スライドのカスタム幅
slideMove 1 一度に移動するスライド数
slideMargin 10 各スライド間の間隔
addClass スライダーのカスタムクラスを追加し、異なるスライダーに異なるスタイルを設定することができます
mode ‘slide’ スライドかフェードで切り替える
useCSS true trueの場合、LightSliderはCSSトランジションを使用します。 fall jquery animationが使用される場合
cssEasing ‘ease’ CSSのアニメーションに使用されるイージングのタイプ
easing ‘linear’ jqueryアニメーションに使用されるイージングのタイプ
speed 400 遷移時間(ミリ秒)。 // ex =スピード:400;
auto false trueの場合、スライダーは自動的に再生を開始します。
pauseOnHover false ホバーで自動再生を一時停止する。
loop false falseの場合は、最後の要素のときにスライドの先頭にループバックする機能が無効になります。
slideEndAnimation true slideEndアニメーションを有効にする
pause 2000 各自動トランジション間の時間(ms単位)
keyPress false キーボードナビゲーションを有効にする
controls true falseの場合、前/次のボタンは表示されません。
prevHtml prev制御用のカスタムhtml
nextHtml 次の制御のためのカスタムhtml
rtl false 方向を右から左に変更する
adaptiveHeight false 各スライドの高さに基づいてスライダの高さを動的に調整する
vertical false スライドの方向を水平から垂直に変更する
verticalHeight 500 垂直モードがアクティブでアイテムが1より大きい場合はスライダの高さを設定する
vThumbWidth 100 垂直モードをアクティブにしているときのギャラリーのサムネイルの幅
thumbItem 10 一度に表示するギャラリーサムネイルの数
pager true ページオプションを有効にする
gallery true サムネイルギャラリーを有効にする
galleryMargin 5 ギャラリーとスライドの間隔
thumbMargin 3 各サムネイルのギャラリーとスライドの間隔
currentPagerPosition ‘middle’ サムネイルの位置。 ‘左’、 ‘中央’、 ‘右’
enableTouch true タッチサポートを有効にする
enableDrag true デスクトップマウスのドラッグサポートを有効にする
freeMove true スワイプまたはドラッグ中の自由移動(無制限)を有効にする
responsive null ブレークポイントごとにswipSeparate設定を自由に動かせるようにする(制限なし)またはドラッグする

自分で作ってみた簡単なスライドショー

自作の簡単なスライドショー
jQuery


<script>
  $(function(){
      $('#lightSlider').lightSlider({
        item:1,
        auto: true,
        speed: 500,1
        pause: 4000,
        gallery:true,
        thumbItem:6,
        loop: true,
        adaptiveHeight:true,
      });
  });
</script>

まとめ

今回、jQuery lightSliderというプラグインを使ってみた結果、本当に楽に作ることができて、使いやすいと思いました。さらに、オプションの幅も広く、カスタマイズがたくさんできて素晴らしいと思いました。ですが、いつまでもプラグインに頼っていてはいけないと思うので、いつか自分でJavaScriptを使って1からスライドショーを作りたいです!

新年明けましておめでとうございます。今年もどうぞよろしくお願いします。

ということで、2017年が終わってしまいました。本当にあっという間でしたね。専門学校に入学したのがつい先日あったかのような感覚なんですけどもこれを見てくれている方にも理解して頂けるでしょうか。学生のみなさまはお年玉はたくさんもらえたでしょうか?僕はもらえるならいくらでも満足です。さて、今回は2017年の振り返りと2018年の抱負を記事にします。

目次

  1. 2017年の振り返り
  2. 2018年の抱負

2017年の振り返り

一旦、2017年を振り返ってみます。

  • 高校卒業
  • 普通自動車免許取得
  • 専門学校入学
  • インターンシップ
  • WCAN2017winter

など色々ありました。
ちゃんと振り返ってみるとまだまだ出るんですけど、この中でも一番自分の中で大きな影響を与えたのは専門学校入学だと思います。自分は元々、高校頃は、特にやりたいこともなく、適当に大学行っとけばいいと思っていたのですが、ある日、授業で少しHTMLに触れて、「楽しい」と感じて、そういうことを学べるところないか探した結果、この今の学校を見つけました。

 

この学校に入ったことで、多くのことを学び、様々な体験をしてきた1年でした。この学校を選んで、この学科に進んで、特に後悔はないですし、むしろやりがいがあって楽しいと思います。

イベントの中で、WCAN2017winterという大きなイベントのライトニングトークに登壇させて頂きました。最初、学校の先生からその話が持ち出されたとき、自分なんかができるのだろうか上手く話せるのだろうか、正直かなり不安が大きかったです。ですが、WCANという大きなイベントの舞台に立てることはなかなかできることではないので、学生の特権が効くうちにやれるだけやってみようと思い、やってみました。その結果、Webサイトの高速化について知識を深めることができたし、練習中毎回噛んでいたけど、本番では一度も噛まなかったり、時間内に喋ることができたり、自分の中では一番気持ち良くスピーチを終えることができました。今回、登壇したことは自分にとって自信がついたと思うし、発表する内容について、必死こいて勉強するので、かなり力にもなったので、登壇しておいて良かったと思いました。この記事を見ている人の中にもしかしたら、やりたいことがあるけど一歩踏み出せなかったり自分にはできないと決めつけている人がいるのであれば、一度ぜひやってみてください。自分に自信がついたり、卑屈的な性格が治るかもしれませんよ!

2018年の抱負

さて、2018年になってしまったので、抱負を発表します。今年の抱負は、

  • コミュニケーション能力の向上
  • ダイエット成功

の二つです。
「コミュニケーション能力の向上」では、自分は、フロントエンドエンジニアを目指しているのですが、フロントエンドエンジニアになる上で、コミュ力は必須なのではないかと思い、コミュ力を向上させることを決意しました。同い年や年下は問題ないのですが、特に年上の人と接するとなると、コミュ障が発動してしまうので、今年は勉強会やWeb関連のイベントに参加して色々な方々とお話できるようになりたいと思います。

二つ目は「ダイエット成功」なのですが、今年でついにダイエットを初めて7年目に突入してしまいました。成功しかけたりリバウンドしたりの繰り返しでとうとうここまできてしまいました。これも、全て自分の心の問題で、「痩せたい」という気持ちが足りなかったからだと自負しております。なので、7年目の正直として、今年こそは、ダイエット成功をさせたいと決意しました。

このままでも特に不便もないのですが、就職する際、第一印象というものはとても重要ということで、体系が太っている人は普段の生活がだらしないと見られがちなので、痩せなければいけないと思いました。あとはシンプルに彼女が欲しいからですかね・・・。

てな感じで今年も頑張っていきます!このブログのことを今年もどうぞよろしくお願いします!

新年明けましておめでとうございます。今年もどうぞよろしくお願いします。

ということで、2017年が終わってしまいました。本当にあっという間でしたね。専門学校に入学したのがつい先日あったかのような感覚なんですけどもこれを見てくれている方にも理解して頂けるでしょうか。学生のみなさまはお年玉はたくさんもらえたでしょうか?僕はもらえるならいくらでも満足です。さて、今回は2017年の振り返りと2018年の抱負を記事にします。

目次

  1. 2017年の振り返り
  2. 2018年の抱負

2017年の振り返り

一旦、2017年を振り返ってみます。

  • 高校卒業
  • 普通自動車免許取得
  • 専門学校入学
  • インターンシップ
  • WCAN2017winter

など色々ありました。
ちゃんと振り返ってみるとまだまだ出るんですけど、この中でも一番自分の中で大きな影響を与えたのは専門学校入学だと思います。自分は元々、高校頃は、特にやりたいこともなく、適当に大学行っとけばいいと思っていたのですが、ある日、授業で少しHTMLに触れて、「楽しい」と感じて、そういうことを学べるところないか探した結果、この今の学校を見つけました。

 

この学校に入ったことで、多くのことを学び、様々な体験をしてきた1年でした。この学校を選んで、この学科に進んで、特に後悔はないですし、むしろやりがいがあって楽しいと思います。

イベントの中で、WCAN2017winterという大きなイベントのライトニングトークに登壇させて頂きました。最初、学校の先生からその話が持ち出されたとき、自分なんかができるのだろうか上手く話せるのだろうか、正直かなり不安が大きかったです。ですが、WCANという大きなイベントの舞台に立てることはなかなかできることではないので、学生の特権が効くうちにやれるだけやってみようと思い、やってみました。その結果、Webサイトの高速化について知識を深めることができたし、練習中毎回噛んでいたけど、本番では一度も噛まなかったり、時間内に喋ることができたり、自分の中では一番気持ち良くスピーチを終えることができました。今回、登壇したことは自分にとって自信がついたと思うし、発表する内容について、必死こいて勉強するので、かなり力にもなったので、登壇しておいて良かったと思いました。この記事を見ている人の中にもしかしたら、やりたいことがあるけど一歩踏み出せなかったり自分にはできないと決めつけている人がいるのであれば、一度ぜひやってみてください。自分に自信がついたり、卑屈的な性格が治るかもしれませんよ!

2018年の抱負

さて、2018年になってしまったので、抱負を発表します。今年の抱負は、

  • コミュニケーション能力の向上
  • ダイエット成功

の二つです。
「コミュニケーション能力の向上」では、自分は、フロントエンドエンジニアを目指しているのですが、フロントエンドエンジニアになる上で、コミュ力は必須なのではないかと思い、コミュ力を向上させることを決意しました。同い年や年下は問題ないのですが、特に年上の人と接するとなると、コミュ障が発動してしまうので、今年は勉強会やWeb関連のイベントに参加して色々な方々とお話できるようになりたいと思います。

二つ目は「ダイエット成功」なのですが、今年でついにダイエットを初めて7年目に突入してしまいました。成功しかけたりリバウンドしたりの繰り返しでとうとうここまできてしまいました。これも、全て自分の心の問題で、「痩せたい」という気持ちが足りなかったからだと自負しております。なので、7年目の正直として、今年こそは、ダイエット成功をさせたいと決意しました。

このままでも特に不便もないのですが、就職する際、第一印象というものはとても重要ということで、体系が太っている人は普段の生活がだらしないと見られがちなので、痩せなければいけないと思いました。あとはシンプルに彼女が欲しいからですかね・・・。

てな感じで今年も頑張っていきます!このブログのことを今年もどうぞよろしくお願いします!