スマホ時に頻出のハンバーガーメニュー クリック時にクラスを追加したり消したりするだけのシンプルな動きで実装。 【ポイント】 ・✖️アイコンなど以外にも背景クリック時にも元の画面に戻れるように実装する script.js jQuery('.drawer-icon').on('click', function (e) { e.preventDefault(); //aタグなどクリック時の動作を初期化、クリックイベント作成時には必ずつける jQuery('.drawer-icon').toggleClass('is-active'); jQuery('.drawer-content').toggleClass('is-active'); jQuery('.drawer-background').toggleClass('is-active'); return false;//古いブラウザへの対処 }); //背景クリック時 jQuery('.drawer-background').on('click', function (e) { e.preventDefault(); jQuery('.drawer-icon').toggleClass('is-active'); jQuery('.drawer-content').toggleClass('is-active'); jQuery('.drawer-background').toggleClass('is-active'); return false; });
jQueryの基本構文 これからよく使うであろう。。。 jQuery $(セレクター).イベント(function() { $(セレクター).命令 });
技育CAMPの初めてのハッカソン~vol.3~に参加した記事です。 開発したもの アップロードされた画像を北斎風に変換して出力するwebアプリです。僕にとっては初めてのwebアプリ開発でした。 URL:https://github.com/koouu/hackathon20210508 チームメンバー 学校の同級生と2人で出場しました。 役割 僕 ：画像変換、バックエンド N君 :フロントエンド 使用した技術 変換モデル Googleのcolabで、画像変換の機械学習を行っていました。UGATITというcycleGANの応用したものを使いました。形状の変化に強くて、人間をアニメ風に変換したとかが有名です。全結合層にAttentionを使ってるみたいです。 また記事にまとめるかも。 ※GANとは 偽物作るAI作る時偽物かどうか分別するAIも一緒に学習すれば上手な偽物作れるようになるよねって感じ ※cycleGANとは 本物に戻せる偽物作れるように学習すれば元画像の特徴残せるよねって感じ 論文 U-GAT-IT: UNSUPERVISED GENERATIVE ATTENTIONAL NETWORKS WITH ADAPTIVE LAYERINSTANCE NORMALIZATION FOR IMAGE-TO-IMAGE TRANSLATION https://arxiv.org/pdf/1907.10830.pdf バックエンド pythonのflaskを使いました。flask使うのは初めてだったけど、シンプルで使いやすかったです。 フロントエンド htmlを使いました。ほんとはJS使いたかったけど、Pythonとうまくデータのやりとりができなかったので断念。 大変だったこと UGATITの学習モデルのサイズが1G超えてて、ローカルだと、cuda out of memoryがでて動きませんでした。結局風景を北斎風にする以外の部分全部削って動きました。gitからダウンロードできるモデルもその状態になってます。 あとシンプルにwebアプリ開発初めてだったんで難しかったです。 今後 ローカルでしか実装できなかったんで今度は公開できるように頑張ります。 後発表終わった後に二枚目以降の画像の変換の出力が全部1枚目の画像を変換したものになっていることがわかりました。原因がわからないからもうちょっと勉強します... まとめ 楽しかった!
はじめに HTMLを使っていると使う機会が多いtableタグについて徐々にまとめていこうと思います。 基本的なタグ <table> </table> テーブルの始まりと終わりを示す <th> </th> 見出し（talbe header）をつける <tr> </tr> 行（table row）を定義している <td> </td> データセル（table data）を定義し、1つ1つのセルの内容を示す。 単純なマスであれば、上記の4つで作成することができます。 例えば、1〜9の数字を3x3で表すとすると以下になります。 <!DOCTYPE html> <html> --省略-- <body> <table> <tr> <!--1行目--> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <!--2行目--> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <!--3行目--> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html> 実行結果 1 2 3 <!--1行目--> 4 5 6 <!--2行目--> 7 8 9 <!--3行目--> このままではマスにはなりませんがCSSでborderを与えてあげることで3x3のマスが完成します。 sample.css table{ border-collapse: collapse; } table td{ border: solid 1px #000000; } ※border-collapse: collapse;を使うことでborder同士の隙間をくっつけて表示することができます。 マス目をカスタムする 横に繋げるcolspan 上の画像の1と2のマスを横に繋げて表示したいとします。 その際に役立つのがcolspanです。 colspanで指定した数だけ横向きにマスが拡張されます。 例えば、1番の<td>タグにcolspan="2"を追加してあげると 表示結果は下のようになります。 colspan="2" としたことで1番のマスが横に拡張され2マスとなったため、3番のマス目がはみ出てしまいます。 そのため、3番目のセルは削除してしまいましょう。 縦に繋げるrowspan 今度は上の画像の1と4のマスを縦に繋げて表示したいとします。 1番の<td>タグにrowspan="2"を追加してあげます。 <td rowspan="2">1</td> 表示結果はこちらです。 今度は6番がはみ出てしまっています。 rowspan=""は<tr>タグをまたいでセルを追加されるため、2列目のセルが1つ不要になるのです。
どうも7noteです。文章を途中で折り曲げる方法 某有名使徒アニメのタイトルで、文字がL字に曲がっていたので、「これCSSで再現できるのでは？」 ということで、まずは参考イメージを用意します。 ※筆者は某アニメを見ていませんのであしからず。 作り方 「縦(たて)書き」からの「横(よこ)書き」 index.html <p class="Ltype"><span>使徒</span>、襲来</p> style.css .Ltype { font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif; font-size: 40px; font-feature-settings: "palt"; } .Ltype span { -webkit-writing-mode: vertical-rl; /* Safari用 */ -ms-writing-mode: tb-rl; /* IE用 */ writing-mode: vertical-rl; } <結果> ふむふむ、それなりにいい感じ。 「横(よこ)書き」からの「縦(たて)書き」 index.html <p class="Ltype">せめて、人間<span>らしく</span></p> style.css .Ltype { font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif; font-size: 40px; font-feature-settings: "palt"; line-height: 1; /* ← 追記 */ transform: scale(0.6,1); /* ← おまけで追記 文字を長体にする */ } .Ltype span { -webkit-writing-mode: vertical-rl; /* Safari用 */ -ms-writing-mode: tb-rl; /* IE用 */ writing-mode: vertical-rl; vertical-align: top; /* ← 追記 */ } <結果> 解説 予めbodyに対して、color: #fff;とbackground: #000;を指定しております。 いわゆるLの方向に文字を曲げるほうが指定が簡単で、縦書きにしたいところをspanで囲ってあげて、縦書きのCSSを当てるだけで簡単に作成できます。 横書きから始まる場合は追加でいくつか指定が必要になります。特にvertical-align: top;がないと( 」)の形に配置されるので注意が必要です。 まとめ 普通のwebサイトを作っていれば作ることのないものなので、発想力が鍛えられます しやっていても結構面白いものです。 どうしてもwebでは字詰めが甘いので完璧にはならないですが、それっぽさを出すには十分の出来ではないかなと思います。 他にも思いついたらどんどんやっていきたいと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
レスポンシブデザインのhtml記述方法 １．headにviewportを記述する ２．cssでメディアクエリを設定する １．headにviewportを記述する 用語 viewport：Webページを表示するデバイス（PCやスマートフォンなど）を検知し、そのデバイスの画面サイズなどを取得する。htmlのhead内にmetaタグで記述する。 ポイント viewportを記述しないとメディアクエリが機能しないので必ずセットで記述する！ 例） <!doctype html> <html> <head> <meta charset="utf-8"> <!--ここから--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--ここまで--> </head> <body> </body> </html> ２．cssでメディアクエリを設定する 用語 メディアクエリ：画面のサイズに合わせてCSSの適用を分岐できる機能 @media screen and (min-width:サイズpx) { cssの定義 }で記載する ポイント ブレイクポイント デバイス 480px以下 スマートフォン(縦） 600px以下 スマートフォン(横) 960px以下 タブレット 1280px以下 パソコン(画面小) 1280pxより大きい パソコン(画面大) 例） <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--ここから--> <style> .media { background-color: #333; } @media screen and (min-width:480px) { .media { background-color: blue; } } @media screen and (min-width:640px) { .media { background-color: red; } } </style> <!--ここまで--> </head> <body> </body> </html>
