MySQL
mysql-serverとmysql-clientって何？両方インストールしないといけないの？
tanatiyo
Web制作全般 Git Bashで便利なコマンド～インストールしたパッケージの確認とファイルの中身を見たいとき～
今、webpackとGulp導入を進めている最中ですが、個人的に便利だなと思ったコマンドを2つ挙げておきます。（Node.jsとGitをインストールして、Git Bashにてコマンドを使い操作しています。Windowsのターミナルは使い勝手...
Web制作全般 VSCodeでターミナルを開き、ショートカットキーでエディタと行ったり来たりする(for Windows)
最近は、CLIを使ってコマンドを書くことが習慣づいてきたため、キーボードを使うことが多くなってきました。そのため、ちょっとしたことでもマウスではなくてキーボードで操作をしてみたくなります。そして、VSCodeでターミナル（今までは別ウィンド...
Web制作全般 webpackとgulpの導入を進める
HP案件と並行してですが、WebpackとGulpの導入も進めています。こちらの導入に関しては、しょーごさんもロードマップを完走した後に実践しながらで良いかな、とおっしゃていました。ただ、私としては実践に入る前に出来るだけ使えるようになって...
Web制作全般 HPを作った後のことについて考える
今、web制作のコーディングを勉強中ですが、縁あってHPリニューアルのお仕事を頂けたので、サーバーの契約から公開まで担当させていただきました。いろんなことが非常に勉強になり、とても有難い気持ちです。そして公開まで至った後、クライアントの方か...
ロゴ制作 ロゴ制作
今対応させて頂いている案件でロゴ制作も依頼があったので、自分で作ってみることにしました。ロゴ制作をするツールはたくさんあって、本当に簡単に作成できるものから、凝って作りたい場合にはいろいろな機能がついているものまで様々でした。機能がたくさん...
Web制作全般 HPリニューアルの件がひと段落しました
何とか形にして、本日公開まで持ってくることができました！WordPressの有料テーマを使った案件ではありましたが、1人でサーバーの契約からWordPressの導入、HPデザイン（もどき）、制作、公開までを担当することができて、本当に勉強に...
Web制作全般 SNOW MONKEYを使ったHP制作
初めてテーマというものを使って、１つHP制作を行いました。使ったテーマは「SNOWMONKEY」という有料テーマです。このテーマは年間のサブスクリプション型で商用利用可能となっていて、web制作をお仕事にしていこうとする身としては扱っていて...
Web制作全般 しょーごさんのコーディング課題【中級編】完走しました！
レビュー2回目まで指摘された箇所（フォントのtransform）を修正して、ポートフォリオとして活用させて頂きたいと思います。以下となります。よろしければご覧ください。ユーザー名、パスワードともに「tanatiyo-01」です。参考までに、...
Web制作全般 コーディング課題【中級編】完走。出来た事。反省点。振り返り。
先日、しょーごさんのコーディング課題【中級編】を無事に終えることが出来ました。完走者のサイトを見ようか・・・と思うこともありましたが、とりあえず自力で走りきるところに拘りました。若いころ、人になんでもすぐに聞いてしまうのが私の悪い点でもある...
Web制作全般 しょーごさんのコーディング課題【中級編】レビュー依頼が返ってきました②
GW中にも関わらず、2回目のレビュー依頼では半日と待たずレビューが返ってきました！早くレビューが頂けるから、フィードバックも早くできます！今回の記事では2回目のレビュー内容と反省点を振り返ります。中級編の反省はまた翌日以降の記事にてまとめま...
Web制作全般 しょーごさんのコーディング課題【中級編】レビュー依頼が返ってきました①
ようやく、一通りのチェックも終わり、提出することができました。GW中にも関わらずレビュー依頼を提出した翌日にはもうお返事がありました。今回も早くて驚きました＾＾；今回の記事では修正内容と反省をしながら進めていきたいと思います。ちなみに、参考...
CSS tableで謎の余白が出来た～原因はthに指定したtransformだった～
tableのth（見出し）部分の文字を長細く表記するために「transform：scale(〇, 〇) translate(〇, 〇);」を実装したところ、レスポンシブ対応時にthのみ左右に謎の余白が出来てしまった事件。→transform...
デザインカンプからのコーディング【練習】 各モジュールの細かな調整は別のクラスを割り当ててそこで管理
よくあるブログカードやメディア（画像1枚とテキスト部分からなる）の構成は、CSS設計で勉強したことを踏まえてモジュールと捉え、拡張・保守・運用しやすいようにSassファイルを別で分けてコーディングを行っていました。ところが、デザインをよく見...
CSS flexboxを用いた時の子要素の幅を均一にしたい
flexboxは奥が深いので、まだまだ勉強しなければならないことが多いですが、ここではデザインカンプからのコーディング課題時によく悩んだことの一つ、「子要素の幅を均一にする」ことについて( ..)φメモを残しておきます。【コード例】HTML...
CSS 文字を細くする方法～transformを使った方法②～【AOS.js】と併用する時は注意
昨日書いた記事（1つ手前の記事）で、文字を細くする方法について書きました。ここでは、AOS.js（JavaScriptのライブラリで、簡単にスクロール連動型のアニメーションを実装できるものです）と併用した場合に、transformが効かない...
CSS 文字を細くする方法～transformを使った方法～
デザインカンプからのコーディングを行っている時に、文字のサイズや行間、文字間は指定通りなのに、なぜか文字がデザイン通りに合わない、ということが出てきました。その解決方法を備忘録がてら( ..)φメモしておきます。結論からいうと、プロパティは...
Web制作全般 web制作の勉強を始めて3か月が経ちました。
先日の4月25日で、本格的にweb制作の勉強を始めてか3か月が経ちました。最初の頃と比べれば、いろんな知識やスキルはついたと思います。でもまだ、それを自在にこなせておらず、自分なりに完璧な整理も出来ていない状態です。今はざっくりと概要を掴み...
Web制作全般 ピクセル単位での調整作業中ブラウザ上に反映されるまで時間がかかってしまう
しょーごさんのコーディング課題【中級編】も、ついに最終段階まで到達しました。無事にサーバーへのアップデートも終えて、ピクセル単位で余白やサイズの調整をしていますが、ここで困ったことが一つ発生しました。VSCodeで編集してから、ブラウザ上に...
CSS table2列複数行タイプをレスポンシブで1列にする方法
tableのレスポンシブ対応をする際に、忘れていたので( ..)φメモしておきます。いろんなパターンが考えられますが、ここでは2列複数行タイプのtableをレスポンシブ対応で1列（複数行）にする方法を書いておきます。簡単にHTML構造を書い...
Web制作全般 ヘッダー上部固定でレスポンシブが崩れた件③～原因はヘッダーじゃなかった⁉～
ヘッダーの上部を固定してから、レスポンシブが崩れた件で、前回は原因探しを行っていました。一つ一つ、コンテンツやモジュールなどを確認していくと、それぞれに原因があることが分かってきました。原因は一か所ではありませんでした(-_-;)例えば、表...
プログラミング JavaScriptの復習～隙間時間に動画学習～
今、本業の方で必要になってきそうなJavaScriptの復習をしています。一通りProgateをやっていたので、復習した時に、クラスやインスタンスと聞いてもアレルギーは起こりませんでした。なかなか机に向かって勉強が出来ない時は、以下の動画で...
Uncategorized ヘッダー上部固定でレスポンシブが崩れた件②～一から原因を探す～
前の記事に追加でいろいろと注意書きをさせて頂きました。反省して、ここからもう一度、ヘッダー上部固定でレスポンシブが崩れた件、について根本的な問題を解決するべく動いていこうと思います。私自身は、レスポンシブ対応に取り掛かる前にヘッダーの上部固...
プログラミング ヘッダー上部固定でレスポンシブが崩れた件・・・解決しました！※4月22日追記→やっぱり解決してなかったです
2日前くらいの記事で、ヘッダーを上部固定したらレスポンシブが崩れてしまった！と書きました。解決できたので( ..)φメモとして残しておきます。現象：レスポンシブ対応している時に、画面右側に謎の余白が空いている。スクロールする度に、ヘッダーの...
プログラミング Git周りで最低限やったことを一通りまとめてみる
Git関係に取り組む前に、私は一度、soucetree（初心者が気軽にGitを導入できるというものらしいです）に取り組んで、よく分からないまま放置しています。＾＾；今はしょーごさんのコーディング課題【中級編】に取り組んでいますが、それに取り...
Uncategorized 5つ目のデザインカンプからのコーディング課題に取り組んでいる時に起きた、固定ヘッダーの謎の現象
現在、しょーごさんのコーディング課題【中級編】に取り組んでいます。ペースが落ちてきていますが、ちゃんとやってます＾＾；現在、jQueryなどの動的な表現の実装も終えて、レスポンシブ対応に取り組んでいるところですが、初めてみた謎の現象に驚いた...
Uncategorized ProgateのGitとCommandLineコース終了
ProgateのWeb開発コース(Node.js)を勉強している最中に、休憩がてらProgateのGitコースとCommandLineコースに取り組んでみました。なんとなく、コマンドプロンプトを触ったことはあったのですが、なかなか思うような...
プログラミング とりあえずはWeb開発についての最低限の知識を入れるところから
昨日書いた記事で、本格的に開発周りでの知識を勉強していこうと思っています。まずは基礎的な知識から。とりあえず、ProgateのWeb開発コース（Node.js）を1周して、開発がどういったものかをざっくりと掴んだ後に、GitやCommand...
Uncategorized 本業のほうでプログラミングを使える機会ができるかも・・・
本業のほうで、仮案件として自社で使っているWEB・スマホアプリと新しいシステムを連携させるため、カスタマイズorプラグイン開発をしていけないか、という案が持ち上がっています。中長期的な案件として、私を含め複数人の方が指名されました。既存のア...
Uncategorized スライダーの各コンテンツの高さをJQueryを使って揃えることが出来ました！
スライダー部分をSwiperを使って実装している時に、各コンテンツの高さを揃えるのに、CSSでなかなか調整が出来ずに悩んでいたところ、jQueryを使ったら一瞬で修正できました。参考コードは以下です。備忘録として残しておきます。// Swi...
Uncategorized 背景画像を画面幅に左右されずに（レスポンシブ対応）background-imageを配置するヒント
今回、しょーごさんのコーディング課題【中級】に取り組んでいて、背景画像をレスポンシブ対応させようとしたときに、画面幅に左右されて（特に2000px以上の大きな幅）画像が動いてしまいました。これについての対応は、確かコーディング課題【初級Ex...