CSS
レスポンシブ対応するためにmax-widthの指定を解除する方法
2022-04
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を使ったら一瞬で修正できました。参考コードは以下です。備忘録として残しておきます。
Uncategorized 背景画像を画面幅に左右されずに（レスポンシブ対応）background-imageを配置するヒント
今回、しょーごさんのコーディング課題【中級】に取り組んでいて、背景画像をレスポンシブ対応させようとしたときに、画面幅に左右されて（特に2000px以上の大きな幅）画像が動いてしまいました。これについての対応は、確かコーディング課題【初級Ex...
Uncategorized 隙間時間の勉強はたにぐちまことさんのUdemyの講座を聞き流し
最近の隙間時間は、たにぐちまことさんのUdemy講座でPHPとWordPressの勉強をしています。しっかりやる、というよりは、聞き流しながら「ふ～ん、そうなんだ」くらいでどんどん情報を浴びていっている、という感じです。本当は、机に座って落...
Uncategorized ここ最近（１～2週間程）の勉強時間、改善点
ここ最近のWeb制作の勉強に回す時間が減り、内容もなかなか進まないので、振り返りがてら、ブログを書くことにしました。デバッグ対応ばかりでなかなかコーディング課題が進んでいない焦りもありますが、このタイミングで勉強時間を振り返ってみたいと思い...
Uncategorized フォーム周辺（jQuery実装）の完成～Googleフォームとの紐づけ有
いろいろ不具合などもありましたが、なんとか一通りフォーム周辺（JQuery）を完成させることができました。具体的にフォーム周辺で実装したjQueryの実装機能としては、・フォームのバリデーションチェック（未入力項目へアラート表示）・フォーム...
Uncategorized Googleフォームとの紐づけ・不具合、やっと解消しました～！やったことまとめ！
具体的には、submitメソッドが効いていない、サンクスページに遷移しない、サンクスページに遷移するけど回答データが受け取れていない、という3つの問題がありました。まず、問題を解決した結論から書きます。以下のしょーごさんの記事を参考にして、...
Uncategorized Swiperの実装で参考にした動画・サイト
swiperという、jQueryに非依存のJavaScriptライブラリがあるそうです。しょーごさんのコーディング課題をこなしていくなかで出会いました。コーディング課題に取り組む時に、実際に参考にさせて頂いた動画やサイトを備忘録として残して...
Uncategorized formのバリデーションチェックでアラート表示が出なかった時にしたこと
今回の記事では、formのバリデーションチェックでアラート表示させる時に起こってしまった不具合を解消したことについて書きます。結論から入ると、入力欄（inputやtextareaなど）毎のブロックがdiv要素で囲まれていれば問題なく動いた、...
Uncategorized Googleフォームとの紐づけで不具合発生！
一度は確実にデータ送信に成功し、サンクスページへの問題もクリアできていました。swiperにとりかかっている最中に何気なしにデータを送信してみて、回答が受け取れているか再度チェックしたところ、「回答0件」という文字・・・・え😅嫌な気がして、...
Uncategorized 転職が決まり、この4月からシステム管理・運用のお仕事をすることになりました！
突然のご報告にはなりますが、この4月から転職することになりました。前職では窓口接客業兼一般事務をしておりましたが、次のお仕事はシステム管理・運用のお仕事です。異業種・異職種への転職をすることができました。今までIT業界やIT職種とは縁がなか...
Uncategorized Googleフォーム紐づけ作業時に出会ったform.runという無料のフォーム作成ツール
Googleフォームの紐づけ作業時にはいろいろとググって情報を集めていました。そんな時に出会った↓のサイト。無料のフォーム作成ツールを作っているformLabさんという会社さんのサイト記事で、Googleフォームの紐づけ作業方法を紹介されて...
Uncategorized Googleフォームとの紐づけ～参考サイト記事～
静的サイトにあるフォームをGoogleフォームと紐づけて、情報を送信できるようにしていこうと考えました。HTML、CSSコーディングは一通り終えた後、まず参考にさせて頂いたのが↓のしょーごさんの記事です。とても分かりやすく書かれていて、私も...
Uncategorized ブログサイトを少しずついじっていこうと思います
独学でブログを始めた当初から今日まで、勉強の方に重きを置いていたので、あまりブログサイトは触らず、記事を書くことだけに集中していました。しかし、周りから少しずつホームページ制作やWordPressサイトについての質問を受けることが出てきたの...
Uncategorized AOS.js（jQueryに非依存のJavaScriptライブラリ）を実装するのに参考にしたサイト
サイトに動きをつけるのには、jQueryだけでなくいろいろなJavaScriptのライブラリがあります。
Uncategorized jQueryをデザインカンプで初めて使うとき
jQueryを初めて使う時、実装する時って、ちゃんとプログラムが反映されているのか気になりますよね私も現在、5回目のデザインカンプにてjQueryを導入していますが、書籍のサンプルコード以外でjQueryを実装するのはこれが初めてです。導入...