Web制作全般
GitLab（無料版）で自動デプロイ(WordPress)まで設定したい
2022-07
CSS flexboxのレスポンシブ対応で可変にしたくないアイテムのCSS指定
display: flex;で指定した子要素にあたるものの幅を可変にしたくない時ってありますよね。例えば画像とテキストが横に並んだメディアと呼ばれるようなものです。画像とテキスト部分をそれぞれFlexアイテムとして、flexboxの子要素と...
JavaScript selectタグの初期値の色だけ変更する実装方法
私はこの実装にすごく苦労しました。調べるとCSSで実装できる情報がたくさん出てくるのですが、最後までCSSでは実装出来ませんでした。このあたり、時間があればしっかり調べたいです。最終的には、下の参考サイトに載せている、のせっちさんの記事を参...
Web制作全般 FTPツールを使ってファイルをサーバーにアップロードする
しょーごさんのレビューを受ける時、【中級編】までは、ブラウザでconohawingのサーバーにログイン後、ファイルアップロードをドラッグアンドドロップでupしておりました。しかし今回【中級Ex】まできたので、今回からはFTPツールを使って実...
Web制作の勉強 flatpickrでplaceholderの実装エラーで得た経験
flatpickrで、カレンダーを実装しようとした際に、表現したい文言にならず「年/月/日」とずーっと入っていて調べてみたり、いろいろいじってみても、placeholderについての記述があまり出てこない・・・もしかして、皆そんなに悩まずに...
デザインカンプからのコーディング【練習】 デザインカンプからのコーディング練習-ピクセルパーフェクトチェック-
デザインカンプからのコーディング練習で、作業も大詰めを迎えるころ、ピクセルパーフェクトを目指してデザインと見比べて細かな調整をしていくと思います。コーディングの練習をここまでしてきて、少しずつ慣れてきましたが、中級編を終えるころ、私の中で2...
JavaScript JavaScriptのaddEventListnerでエラー発生
モーダルウィンドウの開閉操作でエラー発生し、ボタンで動作させるつもりがヘッダーナビゲーションのリンクをクリックするだけでモーダルが開いてしまう事態に・・・・イベントバブリングやイベントオブジェクトあたりが怪しいとふんで時間をかけて取り組んで...
CSS GoogleMapをレスポンシブ対応させた時に出た余白の解決方法
Googlemapをレスポンシブ対応でcssを充てている時に、お手本になぞらえてコードを書いたつもりが、地図の下のほうに大きな余白が空いてしまいました・・・通常、ググって辿り着いた情報だと以下のようなパターンになっていることが多いです。一応...
CSS レスポンシブ対応を少しでも楽にしたい【フォント編】
コーディングに時間がかかってくるところの一つに、レスポンシブ対応があります。モバイルファーストという言葉があるくらい、スマホでの見え方は検索エンジンに見つけてもらうためにもレスポンシブ対応は必須の作業となっています。そんなレスポンシブ対応で...
Git gitをサブマシンでcloneしてpushするまでの流れ【メモ用】
Githubを用いてソースコードを管理していますが、今回はいつも使っているPC(メインマシン)からではなくそれ以外のPC(サブマシン)で作業してみてうまくpushまでいけたので、メモをしておきます。①Githubの該当するリポジトリまでアク...
Git GitHub Flowを参考に個人開発用(自分用)としてGitHubを活用
以前にGitHub Flowについて書いた記事がありましたが、あれはチーム開発用らしく個人用にはforkなどの機能が使えませんでした。そのため、改めてここで流れを一から整理しなおすことにします。【前提条件】既にGiHub上にリポジトリを作成...
Git GitHub Flowとは【勉強用メモ】
勉強用メモです。(以下参考サイトより)GitHub Flowではメインのmasterブランチと機能開発のためのfeatureブランチの2つのみのシンプルな構成【流れ】①開発リポジトリをfork(※プロジェクト画面右上「Fork」ボタンから)...
Web制作の勉強 別の場所でも編集できるようにGitHubFlowを取り入れてみる
しょーごさんのコーディング課題【中級Ex編】に取り掛かる前に一応Gitの知識と簡単な設定はしておきましたが、実際は毎日「git add」「git commit」「git push」だけしかしていません。一応、ソースコードの管理はGitHub...
CSS フォームの送信ボタンを中央揃えする時に少しハマりました・・・
初級の時にも、はまっていた記憶があります。備忘録として残しておきます。フォーム部品などに使われる送信ボタンのbuttonやinput。それ自体に「margin： 0 auto;」を一生懸命指定しても思ったような挙動にはなりません。これらを中...
JavaScript Vue.jsの次はNuxt.jsについて調べてみた-メモ用です-
参考サイトをもとに自分なりにまとめました。勉強用です。Nuxt.js「ナクスト」とは、Webアプリ開発の機能が最初から組み込まれているVue.jsベースのJavaScriptフレームワーク。UIなどフロントエンド向けのフレームワークであるV...
JavaScript JavaScriptフレームワーク-気になったので調べてみた-
参考サイトをもとに気になる記事をまとめました。メモ用です。■フレームワークとライブラリの違いライブラリ・・・汎用性の高いプログラム(コード)パーツのコレクション。クラスや関数を、それぞれの機能をもつパーツとして使い回す。よく使うパーツを集め...
CSS flexbox使用時に各item(子要素)間の余白を調整したい
flexboxを用いている時に、flex-item間、つまり子要素間の余白を取るときはgapという方法があるそうです。例えば、横向きで並んでいる場合(デフォルト時)にとすると、縦方向に20px、横方向に30pxの余白をとってくれます。mag...
JavaScript フォームで日付を選択できるflatpickrを初めて実装しました【エラー対応中】
今取り組んでいる課題からflatpickr(軽量 & 外部ライブラリの依存が無いjavascript製ライブラリ)なるものを実装することになりました。公式サイトはどうやら英語なのですが、「にほんご。」に訳してくれた方々がいらっしゃるようです...
CSS fontのMediumってどう指定するの？
font-weightがbold以外の時、例えばMediumとかLight、ExtraBoldなどに出会ったことはありませんでしょうか。実はこれ、font-weightに数字を指定して実装できます。対応表がMDNのサイトに載っています(↓【...