CSSのコーディングをスピードアップするテクニックやツールを集めてみました。 対象の読者 デザインカンプをもらってHTML/CSSをコーディングする人 HTML/CSSの文法は分かってる人 CSSを大まかに書いた後の微調整に苦労してる人 PerfectPixel(GoogleChrome拡張機能) デザインカンプを半透明で重ねることができます。 インストール方法 こちら↓から「Chromeに追加」ボタンでインストールは完了です。 こちら↓の押しピンみたいなアイコンをクリックしておくと、常に表示されるので便利です。 アイコンを右クリックして「拡張機能を管理」をクリック。 「ファイルのURLへのアクセスを許可する」をONに変更。 カンプを重ねて表示する 今回はこちら↓からポートフォリオのテンプレートを拝借して説明します。 デザインカンプのトップ部分がこんな感じだとします。 書きかけのHTML/CSSがこんな感じだとします。 PerfectPixelのアイコン↓をクリックすると、メニューが表示されますので、デザインカンプ(pngかjpg)をドラッグ&ドロップします。 デザインカンプが半透明で重ねて表示されます。この段階では、ピッタリとは重なっていません。 カンプの表示位置を調整する メニューの3つの数字↓を順に、0、0、1にしておき、カギのアイコンをクリックしておきます。次に、デベロッパーツールを開いてデバイスアイコンをクリックし、画面の横幅にカンプと同じサイズを入力します。 デザインカンプがピッタリ重なりました。ズレているところを修正していきましょう。 デベロッパーツールでCSSを修正し、自動的にファイルに保存する デベロッパーツールでCSSを修正しながら、リアルタイムに結果を確認し、元のファイルにも自動保存する方法です。 デベロッパーツールに特定のフォルダの変更を許可する デベロッパーツールを開き、「ソース→ファイルシステム」を選択します。(画面が狭いと「 》 」に入っています。) 「ワークスペースにフォルダを追加」をクリックし、htmlやcssが入っているフォルダを選択します。 修正したい要素を選択する 「ページ内の要素を選択して検査」ボタンをクリックし、修正したい箇所をクリックします。クリックした箇所に対応するHTMLの要素と、その要素に適用されているCSSが表示されます。 CSSを修正する CSSの値の部分をクリックすると、値を編集できます。入力候補も出るので便利。 数字部分はキーボードの上下で変更できます。 余白の部分をクリックすると、次の行に入力できます。 「＋」ボタンをクリックすると、新しくセレクタから入力できます。 結果はリアルタイムに表示され、また元のファイルにも自動的に保存されています。 保存されていることを確認するために、画面をリロードしてみましょう。自動保存がうまくいっていれば、修正後の状態が表示されます。うまくいっていなければ、修正前の状態に戻ります。 ここで、 ↑このアイコンが表示されていれば、修正したcssは自動的に保存されています。 緑の丸が表示されていることを確認してください。なぜか自動保存の状態が外れてしまい、緑の丸が表示されていないことがあります。画面をリロードしたり、Chromeを閉じて開き直したりすると再び自動保存の状態になります。 なお、この方法はhtmlやjsには使えません。(デベロッパーツール上で編集・保存はできますが、CSSのようにリアルタイムに表示はされません。それならVSCodeなど使い慣れたツールがあればその方が良いです。)

CSSのコーディングをスピードアップするテクニックやツールを集めてみました。 対象の読者 デザインカンプを元にHTML/CSSをコーディングする人 CSSを大まかに書いた後の 微調整の作業効率を上げたい人 なお、ツールの都合上 Google Chrome に絞って説明しています。マウス操作を中心に説明しますが、ショートカットキーが使えるところは ( Ctrl+Z ←こんな感じ ) で示します。 デベロッパーツールの設定 CSSのコーディングの前に、デベロッパーツールの設定等についてまとめておきます。 画面は、こちらのサイト↓から、ポートフォリオのテンプレートをお借りして説明します。 htmlファイル等は自分のPCの適当なフォルダに存在するものとします。 htmlファイルを開くと、ブラウザでページを表示できる状態だとします。 デベロッパーツールを開く メニューから、デベロッパーツールを開きます。(F12) お好みで画面の配置を変えます。 要素 「要素」を開くと、HTMLが表示され、▼をクリックして要素を開いたり閉じたりできます。 「ページ内の要素を選択して検査」ボタンをクリックすると、マウスが当たっている要素に対応するHTMLの要素がハイライトされます。(Win: Ctrl+Shift+C / Mac: Command+Shift+C) 選択された要素に適用されているCSSを確認できます。cssファイル名や、ユーザーエージェントスタイルシート(ブラウザがデフォルトで設定するcss)などを確認できます。 コンテンツ領域や、padding, marginなどがそれぞれ何px占めているか確認できます。 デバイス表示 「デバイスのツールバーを開く」ボタンをクリックすると、デバイス表示に切り替えることができます。 画面上部の灰色の四角をクリックすることで、画面の横幅を変更できます。自動的に画面が収まるように縮尺が変わるので、大きくしたつもりが小さくなって見えることがあります。 数字を直接入力して、画面の横幅を変更することもできます。 よく使う画面サイズは登録しておくことができます。 表示の倍率を変更できます。 表示の倍率とは別に、画面が拡大表示されることがあります。スマホで二本指で拡大した状態と思われます。これをリセットするためには、Win: Ctrl+0 / Mac: Command＋0 を押下します。 デベロッパーツールでCSSを修正し、自動的にファイルに保存する デベロッパーツールでCSSを修正しながら、リアルタイムに結果を確認し、元のファイルにも自動保存することができます。 フォルダを登録する 「ソース→ファイルシステム」を選択します。(画面が狭いときは「 》 」に入っています。) 「ワークスペースにフォルダを追加」をクリックし、htmlやcssが入っているフォルダを選択します。 「許可」をクリックします。 修正したい要素を選択する 「ページ内の要素を選択して検査」ボタンをクリックし、修正したい箇所をクリックします。クリックした箇所に対応するHTMLの要素と、その要素に適用されているCSSが表示されます。 CSSを修正する CSSの値の部分をクリックすると、値を編集できます。 数字部分はキーボードの上下で変更できます。Altキーを押しながらだと0.1ずつ、Shiftキーを押しながらだと10ずつ変更できます。 余白の部分をクリックすると、次の行に入力できます。プロパティ名を入力し、Tabキーを押して値を入力します。(細かいですがプロパティ名は部分一致で入力できます。例えば「padding-bottom」は「ng-bo」と途中だけ入力してTabキーを押すと速い。) 「＋」ボタンをクリックすると、新しくセレクタを入力できます。 結果はリアルタイムに表示され、また元のファイルにも自動的に保存されています。 保存されていることを確認するために、画面をリロードしてみましょう。自動保存がうまくいっていれば、修正後の状態が表示されます。うまくいっていなければ、修正前の状態に戻ります。 ここで、 ↑このアイコンが表示されていれば、修正したcssは自動的に保存されています。緑の丸が表示されていることを確認してください。なぜか自動保存の状態が外れてしまい、緑の丸が表示されていないことがあります。画面をリロードしたり、Chromeを閉じて開き直したりすると再び自動保存の状態になります。 なお、この方法はhtmlやjsには使えません。(デベロッパーツール上で編集・保存はできますが、CSSのようにリアルタイムに表示はされません。それならVSCodeなど使い慣れたツールがあればその方が良いです。) Undo 画面をリロードする前なら、Win:Ctrl+Z / Mac:Command+Z でUndoが可能です。 RedoはWin:Ctrl+Y / Mac:Command+Shift+Zです。 PerfectPixel(GoogleChrome拡張機能) PerfectPixelを使うと、デザインカンプを半透明で重ねることができます。 インストール方法 こちら↓から「Chromeに追加」ボタンでインストールは完了です。 ピンのアイコンをクリックしておくと、右上に常に表示されるようになります。 PerfectPixelのアイコンを右クリックして「拡張機能を管理」をクリック。 「ファイルのURLへのアクセスを許可する」をONに変更。 カンプを重ねて表示する まずはPerfectPixelを使わずに、作成したページとデザインカンプを並べて見てみましょう。 目視だけでも、タイトル部分の文字の太さが違うことがわかります。 PerfectPixelのアイコンをクリックすると、メニューが表示されますので、デザインカンプ(pngかjpg)をドラッグ&ドロップします。 デザインカンプが半透明で重ねて表示されます。 メニューの3つの数字↓を順に、0、0、1にしておき、カギのアイコンをクリックしておきます。次に、デベロッパーツールで画面の横幅に、カンプと同じ横幅を指定します。 デザインカンプがピッタリ重なりました。 目視ではわからなかった、フォントサイズのずれなども分かりますね。 CSSの記述量や考える手間を減らす工夫 class名やid名ではなくタグ名で区別する この部分は「mv-title」「mv-subtitle」「mv-text」というclass名で区別されていますが、そもそもこの名前を考えるのが面倒な場合は、タグ名で区別すると良いです。ここでは「h2」「h3」「p」タグで区別してみます。 ↓ CSSもこれに伴って、class名ではなく子孫セレクタと要素名で記述します。 メリット：class名やid名を考える手間が省ける。 デメリット：cssだけ見た時に意味が取りづらくなる。タグ名の種類は限られているので、部分的にしか使えない。タグ名本来の意味から逸脱していないか考慮する必要がある。タグにデフォルトでついてくるcssの影響を考慮する必要がある。h1~h6, p, div, span, b, i, small, big などは使いやすいかと。

はじめに HTML言語を全く触ったことがない超初心者が、学校で学んだことを忘れないようにすることを目的に作成しています。 HTMLとはどういったものなのか、結局何ができるのかを一緒に学んで行きましょう。 注意事項 この投稿はこれまでの総復習になります。そのため、過去に紹介した内容は説明せずに進めていきます。 ド素人ゆえ間違った記載(独自の解釈をしている)場合があるかもしれませんがご容赦ください。 説明に関してはできるだけ図を用いてわかりやすく、作成していこうと思います。 使用するのはGoogle Chrome、Visual Studio Code、GitHubの3点になります。 また、数がかなり多くなってしまうので、いくつかのパートに分けて説明していこうと思います。 基本的な操作はcssで行います。 今回はこちらの続きになります。 完成図 コードの全文に関してはGitHubの方から確認できます。 目次 1.ホームページに肉付けをしていこう 2.ホームページを完成させよう 1.ホームページに肉付けをしていこう 先ずは題名から付けていこう 前回同様、flexboxを用いてホームページに肉付けをしていきます。 今回は親要素一つに本題とサイトコンテンツが分かるように2つの子要素を用いて肉付けしていきます。 それでは前回のコードの続きに親要素を書いて行きます。 <div class="container"> <div class="item01"> </div> <div class="item02"> </div> </div> div class="container"という親要素の中にdiv class="item01"、div class="item02"という子要素を追加します。今回はこのitem01に本文を書き、item02にサイトコンテンツを書くという作りにしていきます。 それでは次にstyle sheetの方でflexboxを適用させていきます。詳しい内容については前回説明したため、割愛します。 .container{ width: 800px; margin: 0px auto; display: flex; } display: flex;でflex boxが使えるようにしています。 各子要素についても書いていきます。 .item01{ width: 70%; } ここでの幅70%とは画面の左端から右端というわけではなく、親要素のwidth: 800px;の70%となります。 .item02{ width: 30%; } ここまでできたら本文を書いていきましょう。 htmlタグのdiv class="item01"の下にmainタグを入れて書いていきます。 <main> <h2><font color="red">サイトの題名</font></h2> <img src="img/画像名"> <p> 紹介文 </p> </main> 今回サイトの題名にはhamuoのオリキャラ図鑑-Part1-と入れ、紹介文に3Dキャラクターを作成した経緯について軽く書きました。 次にサイトコンテンツを書いて行きますこのときasideを使って書いていきます。asideはメインコンテンツとはあまり関係の無い内容を書くときに使います。 div class="item02"の下にasideタグを入れてサイトの概要などを書いていきます。 <aside> <h2>サイトコンテンツ</h2> <ul> <li>キャラクター紹介</li> <li>特徴</li> <li>制作期間</li> <li>ここがポイント!!!!</li> <li>問題点</li> <li>解決方法</li> </ul> </aside> 次にcssの方で画像、文字の大きさを変更していきます。 .item01 h2{ text-align: center; border-bottom: 1px solid navy; } .item01 img{ width: 99%; } .item02 h2{ font-size: 22px; margin-top: 6px; text-align: center; } .item02 ul{ list-style-type: none; margin-top: 36px; padding-left: 1px; } .item02 li{ border-bottom: 1px dotted black; } サイトコンテンツに区切りを付けるためにborder-bottom: 1px dotted black;で下に黒の点線を引いています。 2.ホームページを完成させよう 今回はメインタグの内容を捕捉するという構成でホームページを作成するのでarticleタグを使用します。 <article> <h2>キャラクター紹介</h2> <div class="article_container"> <div class="article_item"> 　　<img id="shiseki" src="img/test001.png"> <P> 　　 シセキ キライ 前 </P> </div> <div class="article_item"> <img src="img/shiseki_side.png"> <P> シセキ キライ 横 </P> </div> </div> <div class="article_container"> <div class="article_item"> <img id="shiseki" src="img/siseki_front_wire.png"> <P> シセキ キライ 構図 </P> </div> <div class="article_item"> <img src="img/siseki_back_wire.png"> </div> 　</div> <p> <h2>特徴</h2> </p> <p> 　 内容 </p> 　　　　　 <p> <h2>制作期間</h2> </p> <p> 内容 </p> <h2>ここがポイント!!!!</h2> <p> 内容 </p> <h2>問題点</h2> 　　　　　　<p> 内容 </p> <h2>解決方法</h2> <p> 内容 </p> </div> </article> ではおなじみのcssでレイアウトをしていきます。 .article_container{ display: flex; } .article_item{ width: 50%; } .article_item img{ width: 99%; } .article_item p{ text-align: center; } 最後にフッターを付けていきます。 付け方はヘッダーの時と同様にfooterタグを用意します。 <footer> <h2>サイト名</h2> </footer> footer{ width: 100%; background-color: #eee8aa; padding: 30px 0px; } footer h2{ text-align: center; font-size: 16px; } ここもheader同様、footerの前に.を付けないようにします。 これで上記のホームページ作成に必要な操作方法は以上になります。 さらに内容を追加していきたい場合はmainタグの外に別のmainタグを作るか、articleタグの終わりに新たにarticleタグを作成することで内容を増やすことができます。 いかがだったでしょうか、幅の調整や文字の色を自分好みに書き換えるだけでもデザインが変わって新しいものに見えると思います。 できあがったhtmlのホームページはお名前.comやGitHubなどでインターネット上に載せることができます。 それでは皆さん、お疲れ様でした。

#経緯 Javascriptのトレーニングを兼ねて何か作りたいなーと思い、ネット記事を漁っていると... ウェブカツというブログが簡易的な電卓の作り方を掲載していたので、早速取り組んでみることに。下記URL参照。 https://webukatu.com/wordpress/blog/27277/ 自身で作成してみたので、学習のアウトプットとして自身なりの解釈を交えながらご紹介したいと思います。 #対象者 ・HTML、CSSをProgate等で一通り学んでいる方。 ・Javascriptを少し齧り始めた方。 ・Javascriptでどんなことができるのか興味のある方。 今回紹介・作成するものは非常に簡易的なものになるので、複雑で高度な技術は一切必要ございません。 #作成物 ブラウザ上で動く電卓を作成します。 一番上には計算結果が出力される液晶画面、 液晶以下には演算子・数字を入れ、簡単な四則演算ができるようにしています。 CSS内でボタンの色やhoverなどを追加しています。 　今回Javascriptの中には、ボタンが押されたときに正しい回答が出力されるようなコードを記述していきます。 ※なお当記事の目的は投稿者のアウトプットを主たる目的としております。ウェブカツブログ様の投稿内容を盗用しQiita内でLGTMを稼ぐつもりは一切ございません。ご了承のほど何卒宜しくお願い申し上げます。 #実践 index.html <!DOCTYPE html> <html lang="ja"> <head> <title>calculator</title> </head> <body> </body> </html> HTMLの記述をしていきます。 一番はじめはこの状態からスタートします。 主なコードの記述先はタグの中です。 まずは液晶画面を記述します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <title>CALCULATOR</title>. //ここのタイトル部分は何を入れても問題ありません。 </head> <body> <form name="calculator"> //formタグ内のnameプロパティに後々Javascriptの動きをつけていきます。 <table> <!---液晶画面---> <tr> <td colspan="4"> <input type="text" class="display" name="display" value="" disabled> </td> </tr> </form> </body> </html> titleタグには「電卓」を意味するCALCULATORを記述し、 同様にフォームタグ内のnameプロパティにも"calculator"と記述します。 作成者が理解できれば。基本的にどのような文字列でも大丈夫ですが、なるべく関連語や英単語等を記述するような習慣を心がけましょう。 現状のコードをブラウザに表示させるとこのようになります。↓ trタグは「table header」の略です。 通常は表の見出しに使用されるタグです。 子要素であるtdタグは、表の見出しを指定するタグです。 tdタグ内のcolspan="4"を指定することで、セルを連結することができます。 tdタグ内では、inputタグを用いています。 これが液晶画面の核となる部分です。 disableを指定することで、液晶画面に直接文字を打てないようにしています。 まだスタイルもJavascriptもつけていないので、ただの入力欄のみが表示されています。 どっちみちstyleもjavascriptも読み込まないといけないので、この段階で読み込んでおきましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="style.css"> <title>CALCULATOR</title>. //ここのタイトル部分は何を入れても問題ありません。 </head> <body> <form name="calculator"> //formタグ内のnameプロパティに後々Javascriptの動きをつけていきます。 <table> <!---液晶画面---> <tr> <td colspan="4"> <input type="text" class="display" name="display" value="" disabled> </td> </tr> 　　　　　　　　　<script src="script.js></script> </form> </body> </html> ページの見た目に変更を加えるCSSファイルは。headタグ内に記述します。 Javascriptはformタグの最下部へ記述してください。 ちなみにファイルの場所ですが、私はCALCULATORというプロジェクトにそれぞれ個々のファイルを作成しております。 linux環境内で学習・開発中の方は、 mkdir <ディレクトリ名> でディレクトリ作成。 touch <ファイル名> でファイル作成ができます。試してみてね。 続いて、各ボタンを配置していきます。 電卓はピンからキリまで様々な仕様のものがございますが、今回は最低限の四則演算機能のみを実装する予定です。 よって配置するボタンは、 ・0~9 ・= ・C（クリア） ・四則演算子 以上です。 index.html <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="style.css"> <title>CALCULATOR</title> </head> <body> <form name="calculator"> <table> <!---液晶画面---> <tr> <td colspan="4"> <input type="text" class="display" name="display" value="" disabled> </td> </tr> <!---上から１段目（7〜9+÷)---> <tr> <td><input type="button" value="7" onclick="get_calc(this)"></td> <td><input type="button" value="8" onclick="get_calc(this)"></td> <td><input type="button" value="9" onclick="get_calc(this)"></td> <td><input type="button" value="÷" class="operator" name="div_btn" onclick="get_calc(this)"></td> </tr> <!---上から２段目(4〜６+×)---> <tr> <td><input type="button" value="4" onclick="get_calc(this)"></td> <td><input type="button" value="5" onclick="get_calc(this)"></td> <td><input type="button" value="6" onclick="get_calc(this)"></td> <td><input type="button" value="×" class="operator" name="multi_btn" onclick="get_calc(this)"></td> </tr> <!---上から３段目(1〜3+-)---> <tr> <td><input type="button" value="1" onclick="get_calc(this)"></td> <td><input type="button" value="2" onclick="get_calc(this)"></td> <td><input type="button" value="3" onclick="get_calc(this)"></td> <td><input type="button" value="-" class="operator" onclick="get_calc(this)"></td> </tr> <!---上から4段目(0/C/=/+)---> <tr> <td><input type="button" value="0" onclick="get_calc(this)"></td> <td><input type="button" value="C" onclick="get_calc(this)"></td> <td><input type="button" value="=" class="equal" onclick="get_calc(this)"></td> <td><input type="button" value="+" class="operator" onclick="get_calc(this)"></td> </tr> </table> <script src="script.js"></script> </form> </body> </html> trタグを用いて、上から一段ずつ記述しています。 ここでもinputタグを使用しています。 第一引数でtype="button"とすることで、単純なボタンを描画します。 第二引数であるvalueでは各ボタンで描画する文字を記述します。 第三引数、第五引数に記述しているonclick属性は、クリックされたときにどのような動きをするかを設定することができます。 今回はJavascriptも活用するため、get_calcメソッドを入っています。 get_calcメソッドに関しては後で説明いたします。 進捗をブラウザで表示するとこのようになります。 スタイルを整えていないのでかなり簡素な見た目ですが、これでも十分に電卓っぽいと思います。 かなりあっさりですがこれでHTMLの記述は終了です。 続いてCSSに移ります。 ###見た目の調整 ここではコメントアウトを参照して各CSSの機能を確認してください。 style.css /* テーブルの装飾 */ table { /* 電卓のサイズ */ width: 300px; height: 400px; /* 電卓が浮き出るように影をつける */ border: solid 1px #dcdcdca4; border-right: solid 4px #dcdcdca4; border-bottom: solid 4px #dcdcdca4; border-radius: 10px; /* インライン要素を中央に配置 */ text-align: center; /* 余白調整 */ padding: 8px; margin: 20px; } input { /* ボタンのサイズ */ width: 70px; height: 70px; /* ボタンの文字サイズ */ font-size: x-large; /* 数字部分の背景色 */ background-color: #dcdcdca4; /* ボタンの詳細設定 */ border: none; border-radius: 20px; /* クリック時の黒枠を消す */ outline: none; } /* ディスプレイの詳細設定 */ .display { width: 250px; text-align: right; /*文字列を右詰めに*/ /*見た目の詳細設定*/ background: #ffffff; border-top: solid #dcdcdca4 5px; border-bottom: solid #dcdcdca4 5px; border-right: solid #dcdcdca4 6px; border-left: solid #b6b6b6 6px; border-radius: 5px; } /*演算子の背景色を上書きで設定*/ .operator { background-color: #87cefa; } /*記号=の部分の背景色を上書きで設定*/ .equal { background-color: #6b6b6b; } /*カーソルを上に乗せたときに色を濃くする*/ input:hover { background: #747373b9; } .display:hover { background: #ffffff; /*ディスプレイ部分は無効化*/ } .operator:hover { background: #339cdd; } /*クリック時に色を濃くする */ input:active { background: #5a5a5a; } .operator:active { background: #2c80b4; } ###動きをつける（Javascriptの記述) 続いて、Javascriptの実装に入ります。 とはいってもボタンが押されたら液晶に表示されて計算してくれる程度の機能なので、記述量は少ないです。 script.js function get_calc(btn) { if(btn.value == "=") { document.calculator.display.value = eval(document.calculator.display.value); } else if (btn.value == "C") { document.calculator.display.value = ""; } else { if (btn.value == "×") { btn.value = "*"; } else if (btn.value == "÷") { btn.value = "/"; } document.calculator.display.value += btn.value; document.calculator.multi_btn.value = "×"; document.calculator.div_btn.value = "÷"; } } １行目、function get_calc(btn) {}で先ほどHTMLにて記述したget_calcメソッドを定義しています。引数にはボタンを意味するbtnを入れています。 中括弧のなかで、if文を記述しています。 script.js if(btn.value == "=") {} // {}の中に、「=」が押された際の動きを記述します。 ここでは script.js document.calculator.display.value = eval(document.calculator.display.value); としています。 これは、「=」が押された際、evalメソッドで式を評価し演算を行うということを意味しています。 その下のelse ifでは, script.js else if (btn.value == "C") { document.calculator.display.value = ""; } 「=」が押されたときと同様に「C」が押されたときの動きを記述しています。 すでに上述の通り、「C」の機能は液晶表示をクリアにすることなので、空文字列を代入することで、液晶に表示されている文字列を消去することができます。 その下、 script.js else { if (btn.value == "×") { btn.value = "*"; } else if (btn.value == "÷") { btn.value = "/"; } 「×」が押されれば、掛け算を、「÷」が押されれば割り算をするように記述します。 ###完成、作ってみた感想 最終的にこのような形となります。 Javascriptの練習で始めましたが、ここまでサクッと且つ直感的に学べるとは思ってもいませんでした。 より大きく複雑なものを作成しようと思ったら、コード量もかなり多くなってしまうと思いますが、今回は１時間以内で作成できてしまうと思います。 Javascriptの学習のとっかかりとしては良い課題だと感じました。

はじめに この記事はまとめページの予定です。 内容を小分けにして各ページでコード及び簡単な解説をつけたいと思います。 最終的には以下のようなものができます↓。 リンク 各ページのリンクです 番号順に見ていけば混乱なく読める…と、思いたいです。 １. 実装機能イメージ、ベースのHTML ２. -工事中-Canvas(HTML5)の操作 ３. -工事中-トーナメント表の構築(DOM要素の配置) ４. -工事中-トーナメント表の線引き ５. -工事中-トーナメント結果のファイル保存･読込-工事中- ６. -工事中-その他細々とした機能 順次作成更新出来たらなと思います。 なお、本人は作成時に設計メモを以下しか残してないので、お察しです。

はじめに Android／iOSのWebブラウザのアドレスバーを非表示にする方法です。 ネットで調べて出てくることには出てくるのですが、なかなかたどり着かなかったのでQiitaに投稿しておきます。 やりたいこと 据え置きのタブレット端末でWebアプリを動作させるときに、アドレスバーを非表示にしたい。 ↓ 調べたところ、Webブラウザの設定でフルスクリーン（アドレスバー非表示）にするのは無理そう。 （フィッシングサイトによる悪用などを考慮している？） ↓ Webブラウザの設定変更以外の方法でアドレスバーを非表示にしたい。←今回やりたいこと 結論 以下のサイトを参考にしました。 [HTML5] フルスクリーンの開始と解除 対象ページのheadタグ内に以下のmetaタグを記述します。 <!-- iOS用 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Android用 --> <meta name="mobile-web-app-capable" content="yes"> 対象ページへのショートカットをホーム画面に追加し、ホーム画面から対象ページに移動するとアドレスバーが表示されなくなります。 AndroidのChromeブラウザであれば、対象ページを開いた状態でブラウザのメニューから「ホーム画面に追加」を選択することでショートカットを作成できます。 作成したショートカットから対象ページに移動するとアドレスバーが非表示になります。 （スクショ撮るのにXperia 1を使ってるので画面が長い。。。） アドレスバーが非表示になりました。 ちなみに、普通に表示したとき（アドレスバーあり）はこんな感じです。 Androidを例にしましたが、iOSでも同様です。 おわりに Android／iOSのWebブラウザのアドレスバーを非表示にすることで、Webアプリをネイティブアプリっぽくすることができました。 初めからネイティブアプリで作っていれば、こんなことに煩わされなくて済むんですけどね。 モバイルアプリ開発の知見がまだないので、時間があるときにUdemyあたりで勉強してみようと思います。

もうHTML/CSSは書きたくない 「もうHTML/CSSは書きたくない」とちょっとタイトルで釣りましたが、最後まで読んでくれると嬉しいです！ 結論から言うと、Amplify StudioとFigmaを連携させて、Reactのコンポーネントを作成すると言う記事です。 StudioとFigmaを連携させる機能は、2021年の12月に発表されました。 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現 実際に、インターンシップで触れる機会があったので、触れた感想や結果を書きたいと思います。 先に感想を Amplify StudioとFigmaを連携させる方法は、僕以外の人も書いているので、僕の感想を先に書きます。 感想だけでいいと言う方は、ここで離脱しても大丈夫です！ 僕のプロフィール エンジニアインターンとして5ヶ月経ち、インターンではReactとAWSを使って開発中。 クラウドプラクティショナー取得済み。 実際にやってみた感想 ・ Figmaを完璧に使えこなせていないと厳しい Figmaの方で雑にデザインを作っていると、いざReactでUIコンポーネントとして利用したときに、ずれが起きたり、画面サイズが変わったときにデザインが崩れたりします。また、Amplify Studioでコンポーネントとして出力させるとこうなるんだ！ということもわかっておくと、進めやすいと思います。 ・ 全部のコンポーネントを置き換える必要は特にない 一応プレビューの段階のため、できないこともあるようです。また、すでにコンポーネントがあるなら、わざわざ置き換えるメリットはないと思います。そのため、新しい比較的小さいコンポーネントを作成する際に少し使ってみるとかはありかもです。 ・ Amplify Studioの操作が難しい これについては、慣れろよとしか言いようがないのですが、DynamoDBからデータを引っ張ってこれたり、型定義ができたりします。AWSの機能は大体そうですが、慣れないと複雑だなーと感じることがあります。 先にFigmaのリンクを取得する 以下Figmaの画面の右上にある、青いShareボタンを押すと、モーダルが出てきます。 そのモーダルの左下にあるCopy Linkを押して、Figmaのリンクを取得します。 以下の画像はサンプルのため、デザインを作成していません Amplify Studioにログインする ここから先は、GraphQL APIバックエンドとReactフロントエンドを持つ、サンプルReactアプリケーションをデプロイしていることを前提に、書き進めていきます。 Amplifyがわからない方は、Amplify SNS Workshopを参考にしてください。 まずはマネジメントコンソールにログインして、Amplifyコンソールにある作成したアプリケーションを開きます。 その後、左のメニューのアプリの設定から、Amplify Studio Settings(設定)を選択します。 すると、以下の画面が出てくるので、Enable Amplify Studioをオンにして、右側にあるInvite usersを押します。 そこで、自分のメールアドレスを打ち、届いたメールに書かれているUDとパスワードで、Amplify Studioにログインします。 Amplify StudioとFigmaを連携させる ログインして、以下のような画面が開ければ、右のメニューにあるUI Libraryを押します。 その後、画面が変わり、真ん中にGet startedがあるので、押します。 すると、上で取得したリンクを記入する欄があるので、そこにペーストして、Continueを押します。 これで連携が完了です。 ReactのUIコンポーネントとして使えるようにする。 Figmaと連携して、右上のFigmaのマークの隣にあるSync with Figmaのボタンを押すと、Figmaで作成したコンポーネントが出てきます。 そこで、以下の画像の前に、RejectもしくはAcceptボタンが出てくるので、必要なコンポーネントのみAcceptします。 そうすると、以下の画像のようになります。 そして、この画像の右少し上にあるConfigureボタンを押すと、画面が少し変わり、下の方に</> Get component codeボタンが出てきます。 それを押すと、ReactのUIコンポーネントとして使えるようにする方法が出てきます。 詳しくは進めるとわかるので、ここではざっとだけ説明すると、amplify pullして、jsxファイルが作成されるため、それを別のファイルからインポートして利用します。 まとめ ここでは、最短でFigmaからReactのコンポーネントを作成する方法を書きました。 Amplify Studioには、まだまださまざまな機能が存在するため、ぜひ試してみてください。 また、もし間違えていることや追加コメントがあれば、教えてください！