投稿

【第5回】chrome拡張 chrome.tabs.onUpdated.addListenerのコールバック関数の引数調査

イメージ
すとちゃん130といいます。よろしくお願いします。 基礎的なWebの学習をしながら簡単なWebサイトを作ったりしています。せっかくなのでWeb学習をの様子をなるべくに公開するサイトです。 Qiitaに記事 『Chrome拡張のページアクションを作ってみた』 を投稿しました。その際にchrome.tabs.onUpdated.addListenerのコールバック関数の引数を調査しましたので公開します。（※ chrome.tabs.onUpdated.addListener はタブが更新されると発火されるイベントです）  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){ 　　・・・省略 }) tabId:更新されたtabのID changeInfo:変更された情報(オブジェクト) tab:変更されたtabオブジェクト
コメントを投稿
続きを読む

【第4回】『jQuery標準デザイン講座』を真似してプペル画像をクリックすると拡大するサイトを作ってみた

イメージ
すとちゃん130といいます。よろしくお願いします。 基礎的なWebの学習をしながら簡単なWebサイトを作ったりしています。せっかくなのでWeb学習をの様子をなるべくに公開するサイトです。 ※ご質問あればコメント欄にお願いします 僕はキングコング西野亮廣さんのファンです。思いが溢れ出てきました。せっかくなので、Webの学習も自分の好きな要素を取り入れようと思い、こんなものを作成しました。 『プペル画像をクリックすると拡大するサイト 』 を作ってみた   プペル画像をクリックすると拡大するサイト 書籍 『 jQuery標準デザイン講座 』のChapter4のLESSON11 "Lightbox風モーダルウインドウ"を参考に作りました。技術的には、jQueryでfadeIn,fadeOutするだけなので簡単なものです。
コメントを投稿
続きを読む

【第3回】CSSの position: absoluteとrelativeのデフォルトにimargin:autoを設定した際の挙動の相違についての調査

イメージ
すとちゃん130といいます。よろしくお願いします。 基礎的なWebの学習をしながら簡単なWebサイトを作ったりしています。せっかくなのでWeb学習をの様子をなるべくに公開するサイトです。 ※ご質問あればコメント欄にお願いします 【やったこと】 　書籍 『 jQuery標準デザイン講座 』の学習中 に、cssのpositionとmarginの併用をしたサンプルがあった。挙動を確認する経緯として position: absoluteとrelativeのそれぞれデフォルト(top,left,rightの設定なし)でmargin:autoの併用を実施。挙動がことなるため調査を実施。 図.position:absoluteの挙動  図.position:relativeの挙動 【わかったこと】 Chrome Developer Tools にて属性の確認を実施。positionのデフォルトが異なるために absoluteは左寄り、relativeは中央に配置されることがわかった 図 .position:absoluteの属性値 図 .position:relativeの属性値
コメントを投稿
続きを読む

【第2回】CSSの position: absoluteとrelativeのについてWebサイトの記事を参考にやってみた

イメージ
すとちゃん130といいます。よろしくお願いします。 基礎的なWebの学習をしながら簡単なWebサイトを作ったりしています。せっかくなのでWeb学習をの様子をなるべくに公開するサイトです。 ※ご質問あればコメント欄にお願いします 書籍 『 jQuery標準デザイン講座 』 でモーダルウィンドウの学習中に、使用されているposition: absoluteとrelativeの動作が不明だったため、学習しました。 【やったこと】 　①下記の記事を参考に学習 　　 CSSのposition: absoluteとrelativeとは 　②上記で子要素にあたるえる影響が疑問になったなため別途調査を実施 【わかったこと】 　- absoluteとrelativeの基準位置の違い 　- 後続の要素位置に与える影響の違い 　- 親要素にposition: absoluteまたはrelativeを指定すると親要素を基準とした位置となること 【補足①】 HTMLクイックリファレンス よりpositionのデフォルトは"static"であり、この場合、基準値はウィンドウとなっていること 親要素:static 親要素:absolute 親要素:relative 親要素:fixed 【補足②】この例ではfixedはabsoluteと同じ結果となったが『スクロールしても位置が固定されたまま』となるのが違い html <head> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="box1">box1</div> <div class="box2">box2<div class="child">child</div></div> <div class="box3">
コメントを投稿
続きを読む

【第1回】Web学習の勉強の様子を公開します

すとちゃん130といいます。よろしくお願いします。 製造業でソフトウェア開発をしながら趣味でWebサイトを作ったりしています。せっかくなのでWeb学習の様子をなるべく具体的に公開します。 すこし自己紹介します。 　 　【名　前】すとべい130(Stbay130) 　【年　齢】いい中年 　【職　業】製造業でソフトウェア開発 　【住まい】愛知県 　【性　格】悩みやすくて気が小さいが、ピンチになると無謀な行動にでる 　【趣　味】①Webサイト、アプリ作成(初心者) 　　　　　　②SHOWROOM 永濱文理さん応援 仕事でソフトウェア開発を行っていたため、そのあたりの知識は多少あります。 Web関連については、2，3年前に以前、 ドットインストール で はじめてのHTML  (全14回) 、 はじめてのCSS  (全15回) とあとは自分でWebサイトを作りながら勉強しました。機会があればそちらも公開したいと思います。 次回から、具体的に公開を開始します。
コメントを投稿
続きを読む