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などでインターネット上に載せることができます。 それでは皆さん、お疲れ様でした。

はじめに こんにちわ！くのと申します！ エンジニアの方ってガジェット好きな方多いですよね！！ しかしながら、エンジニアにとってガジェットを購入するために突破しなければいけない壁っていくつかありますよね。。。 突然ですが、2022年に実施されたガジェット購入時における障壁ランキングの堂々の第４位は何かご存知でしょうか！！？？ 。。。そうですね！！それは「嫁ブロック」問題ですね！！ （すいません、これは僕の妄想アンケートの結果です。） というわけで、嫁ブロックを突破し、高スペックなマシンをゲットして、強強エンジニアを目指すクソアプリを開発してみました！！ アプリ概要 スタートから、5秒以内にボタンを連打して嫁ブロックを突破するアプリです。 ＊連打回数が少ないと嫁ブロックは突破できないので、注意してくださいね。 嫁ブロックを突破するゲーム ＊スマホ向けにデザインしていますので、スマホの方が遊びやすくなっております。 使用技術 ・HTML・CSS・BootStrap・JavaScript ・プログラムを設置したサーバー：netlify 工夫したところ ユーザの操作としては、ボタンを連打することがメインなので、ボタンを押した際のアニメーションにはこだわりました。 また、制限時間はを秒数表示するのではなく、ピンクの丸を縮小させていくことで、制限時間を認識できるように調整しました！ おわりに もし興味を持っていただければ、このアプリで遊んでいただけたらすごく嬉しいです！ 記事を書いて思ったのですが、嫁ブロック突破してガジェット買っても、後でバレたら怒られてしまうので対話して納得してもらうのが一番ですね！！（笑） 皆様のいい夫婦生活を願ってます！！（笑） 5秒で遊べるアプリなので、興味を持っていただき遊んでいただければ幸いです！ 「嫁ブロックを突破するゲーム」 ↓↓↓ こちらのアプリも5秒で遊べる内容ですので、よろしければ遊んでみていただけると嬉しいです！ 「ロケットを発射するゲーム」 ここまで読んでいただき、ありがとうございました！！

#経緯 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の学習のとっかかりとしては良い課題だと感じました。

はじめに こんな感じでjsonにちょっと長めのテキストが入ることってよくありますよね？ { "id": 1, "title": "『私』のバランス", "img": "option1.svg", "text": "「仕事は自分を犠牲にしてでも・・・！」そんな風に考えているあなたへ。このワークに一緒に取り組んでみませんか？", "modalImg": "sample.png", "link": "training" }, <template> <div class="option" v-for="(option, i) of options" :key="i" > <div class="option-img"> <img :src="require(`@/assets/images/options/${option.img}`)" /> </div> <p class="option-text">{{ option.text }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; import optionsData from '../../assets/json/optionsData.json'; export default Vue.extend({ data() { return { options: optionsData }; } }); </script> このtextを任意の場所で改行したいな〜っと思い、調べてみました。 ?を参考に\\nもしくは\nを入れてみました。 { "id": 1, "title": "『私』のバランス", "img": "option1.svg", "text": "「仕事は自分を犠牲にしてでも・・・！」\nそんな風に考えているあなたへ。\nこのワークに一緒に取り組んでみませんか？", "modalImg": "sample.png", "link": "training" }, しかし！！！改行さない！！！ 追加でcssが必要でした <template> <div class="option" v-for="(option, i) of options" :key="i" > <div class="option-img"> <img :src="require(`@/assets/images/options/${option.img}`)" /> </div> <p class="option-text">{{ option.text }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; import optionsData from '../../assets/json/optionsData.json'; export default Vue.extend({ data() { return { options: optionsData }; } }); </script> <style scoped lang="scss"> .option-text { white-space: pre-wrap; // 追加！！！ } </style> これで改行されるようになりました！！！ white-space: pre;だと改行コード\nを入れた箇所以外では改行されなくなるので要注意！ 追記 v-textを使いましょう <div class="option-text" v-text="optionText"></div> Mustache構文{{}}を使用せず、v-text属性を使用しているのは、以下に理由によるものです。 タグ間のインデントや改行も出力されてしまう。 (ESLintを導入している場合)タグ間をすべて続けて書いた場合、1行が長すぎるため改行して記述するようwarningが吐かれる場合がある。 参考

はじめに DMMWEBCAMPの専門技術コースを卒業し、転職しましたが、 現在働きながら、PHPのコースを受講しております。 （業務ではRubyやPHPには全く触れていません） 使わないと忘れる まずは GitコマンドやHTML/CSSの学習からしていますが、専門技術コース受講時に学んでいたにも関わらず、「そういえばそうだった・・・」等、忘れていた箇所をまとめていきます。 Gitコマンド系 ターミナル：「↑」 ターミナルやGitBashで利用。 ↑を押すと前回実行したコマンドが表示される。 そういえばそうだった・・・。 git init の意味 git addは覚えてたけどgit initって何だったっけ？？ git initは、リポジトリを新規作成するコマンドで、 git initすることで、ローカルリポジトリとして登録される。 .gitというリポジトリに必要な内容が入っているディレクトリが作成される。 これに関しては、どういう目的でやっているのかを忘れておりました。 コマンド：ファイルへの追記 "echo" 以下のコマンドでREADME.mdにhogeeeeee追記できる echo "hogeeeeee" >> README.md HTML/CSS系 インライン要素の中央揃えは　"text-align:center;" ブロック要素とインライン要素で、中央揃えの仕方は違う。 画像"img"もインライン要素 画像のimgタグはインライン要素なので、テキストと同じ扱い。 親要素に、text-align: center; を設定します。 """親要素"""指定 HTML内部のmain要素 あまり使用できてなかったような気がします。 bodyの中はdivだらけでmainのように、ここがmainのコンテンツですよーと 明示的には記述できてなかった気がします。 HTML <main> ”ページ内の中心的なコンテンツ” 　　この中には、Webページのmainにしたい要素を収める 　　この中に　header footerがあるのはおかしい </main> HTML内部のsection要素 HTML <section> ”ページや記事の一部分を表す” 　 section要素には、必ず見出し要素（<h1>系）必要！ divとは適切に使い分けること！！ </section> CSS:ある要素の中のdiv testクラス内のdivにCSSを適用させたい場合、 CSS testクラス直下にあるdiv要素を指定 .test > div { width: 33%; height: 300px; } CSS:ある要素の中の最初の要素 ヘッダーの中の最初の要素 header>:first-child{ margin-right: auto; } flex-basis　 flex-basis フレックスアイテムの横幅を指定 flex-basis:120px;みたいな感じ flex-grow 横幅の伸びる比率 終わり HTML/CSSの箇所については、”誰にでも分かる＆見やすい”コードを書く上では必要な知識だったのに、 何だか忘れてたり、何となく覚えてはいるけど使えていなかったりしましたので、 今回しっかりと復習できてよかったです！！ 使わなくても目的は達成できるけど、ちゃんと使って覚える。