在処

福岡の片隅で、職業訓練経由でWebサイトのコーダーやってます。

在処

福岡の片隅で、職業訓練経由でWebサイトのコーダーやってます。

精製されたドットは並べられなければならない。

要件：背景をドット柄で埋め尽くす方法の理屈を述べよ フリーランスのWebデザイナーの小林さんが、ツイッターでつぶやいてくれる様々なCSS技巧について、「なんとなく判るけど、どんな理屈でそうなってるんだっけ？」を実際に触って試してみたいと思います。 ・「radial-gradient」が夢と現実に境界線を敷く　background-image: 　radial-gradient(#ddd 30%, transparent 31%), 　radial-gradient(

在処

    • 試したいことの効果は予測できるが、、そのための時間でまずやってみたくなるのがヒトの性。

      要件：デザイン～コーディングの練習にあたって、早く回す方法を考える。 「まったく作業がすすまない！」 　休職期間中、これまでコーディング中心であまり手を出していないサイトのデザインの方もやってみようと、よく行くお店のサイトのデザインに挑戦してみましたが、あまりにも手が進まない。 これは切り口と言うか、もっと別のやり方を考えた方がよさそうだと思って、以下のことを試してみました。 ・一から作るのではなくてリニューアル 　架空のサイトを作るために準備することが結構多かったので

      在処

      • 職場に音楽は流れる。しかしそれは聞き流されなくてはならない。

        「音楽は、よくわからない」 正直、音楽についてはその良し悪しや好き嫌いを通り越して、あまり執着がない。 　モノを作るのが好きな人なので、明確に形が見えないものにはあまり興味が惹かれなかったり、小学生の頃にリコーダーの演奏が本当に嫌いだったのが遠因だと思っている。 同じ手を動かす作業でも、譜面に従うのに比べ、お題を好きに解釈して木を彫り粘土を捏ね筆を走らせるほうが楽魅力的だったのだろう。 なお合唱などは普通に好きだったが、楽譜や記号類はリコーダー嫌いの延長で全く理解するつも

        在処

        • グリッドという単語から連想するもので世代は特定できない。しかし趣向は判明する。

          要件：cssグリッドを使ってみよう。 「ここに使えないかなぁ？」 　コロナの影響による休職期間中、レベルアップのため過去に構築したサイトをスリムに作り直すということにチャレンジする中で、Flexboxレイアウトしている箇所を今まで実務で使うことのなかった「CSSグリッド」を使ってやってみようと、先人の英知を検索してみました。 大まかに 親要素 ・宣言 　「グリッドやろうぜ！」 　「Access flash！」 ・縦横の区画分け 　「横要素を3等分に分ける」 　「1列に3

          在処

        精製されたドットは並べられなければならない。

        在処

        • 試したいことの効果は予測できるが、、そのための時間でまずやってみたくなるのがヒトの性。

          在処

        • 職場に音楽は流れる。しかしそれは聞き流されなくてはならない。

          在処

        • グリッドという単語から連想するもので世代は特定できない。しかし趣向は判明する。

          在処

          ＜P＞の有無にかかわらず文章は表示される。　ただしグーグルは意味を介さない。

          「サイトの記述に無駄が多いから、休業中に勉強しといてね！」 　デザイン関係の本をペソペソめくりながら、勉強がてらよく行くお店のサイトのデザインをやっている最中、出勤組の先輩Ｎ氏からそんな内容のスカイプが飛んできました。 曰く、 １：divやpタグはもっと減らせるし、idやclassも少なく簡潔にして組めるようにすることで、時間も短縮できるようになる ２：お勧めの勉強法は過去に作ったサイトもう一度を構築してみること。 …とのこと ちなみに私の基本スタンスは以下の通りです。

          在処

          ＜P＞の有無にかかわらず文章は表示される。　ただしグーグルは意味を介さない。

          在処

          予定の斜め上へ進捗しなさい。　上手くいかなくても、全てが今より下になることはありません。

          「これは不味いなぁ」 コロナによる経済活動の停滞のおかげで、会社から自宅待機を命じられ、一番嫌だったのが実務に携われないことでした。 仕事ができないなら、普段できない勉強の時間に充てるのは無論ですが、やはり業務としてHTMLやCSS、WP周りの記述に精通している段階でもないので、そこから長期間離れるのは嫌なわけです。 記述の際に疑似要素などが仕込みやすい様に予めspanを仕込んだり、class名の命名に際してのルールなど、明文化されていない様な事柄をサクっと忘れそうなんで

          在処

          予定の斜め上へ進捗しなさい。　上手くいかなくても、全てが今より下になることはありません。

          在処

          あなたの自粛はどこへ消えたのか？

          要件：自粛要請を無視して遠出することを抑制してください。 回答： ・何故自粛するのか、その理由を全員が理解できるレベルで素早く告知する。告知は継続的に幅広い分野で行う。 ・馬鹿につける薬はありません（元々病気ではなく一種の生き様なので、有効な薬がありません）。 　 ---------------------------------------------------------------- 本記事は明確な愚痴からできています。 正義が行き過ぎると加虐に際限がなくなるという

          在処

          あなたの自粛はどこへ消えたのか？

          在処

          14 Days Later

          「2週間自宅待機で！」 　リモートワークに移行した2営業日後に2週間の自宅待機という、人生の瞬間最大風速がなかなか強かった4月第2週目の月曜日。 翌日から毎日が日曜日（コロナで外出自粛）状態とあいなりまして、2週間経過しました。その間にやっていたことなどをつらつらと。 朝の散歩 　これはリモートになった際にやろうと決めていました。往復2時間の通勤時間が基本公共交通機関で立ったままなので、少なくてもそれに該当する運動量を確保しないといけないよなぁ…と思いまして。 幸いコロナ

          在処

          14 Days Later

          在処

          リモートワークが始まると思ったか？　実は自宅待機だ！

          2020年04月01日　水曜日 「作業できるＰＣって持ってる？」 志村けんさんが亡くなった週の水曜日、いよいよ東京がロックダウンだ緊急事態宣言だの騒がれ始めていたころ。それでも福岡は最初に感染が確認された数名以降は音沙汰がないままで、まだまだ対岸の火事といった感覚しか持てない状況下でした。 そんな中、出社してきた社長から、の第一声がこれでした。 　開発のメインチームは福岡県外で、福岡の事業所にいるのは社長と先輩Ａ氏、わたしの3人所帯。その中でJRと地下鉄を乗り継いで片道

          在処

          リモートワークが始まると思ったか？　実は自宅待機だ！

          在処

          お菓子の中から駄菓子を取り出しその一覧を表示させよ。　ただし駄菓子はお菓子に含まれたままでなければならない。

          ※以下、内容は実際の案件に基づきますが、名称等は別にしてありますのであしからず。 要件：「お菓子」の中に含まれる「駄菓子」の一覧を「お菓子」の一覧ページで表示される形式で別個に用意してほしい。 　　：ただし「お菓子」の一覧の中とサイドメニュー、ヘッダーのメニューには「駄菓子」が含まれたままにすること。 　初めてＷＰのカスタム投稿周りを触った案件で追加の要望がきました。 製品一覧の「お菓子」の項目で、その中に含まれる「駄菓子」の一覧を表示するページを別個に用意してほしいとの

          在処

          お菓子の中から駄菓子を取り出しその一覧を表示させよ。　ただし駄菓子はお菓子に含まれたままでなければならない。

          在処

          それらは横スクロール時にスナップされる。　ただし火狐は居場所を示さない（横スクロール、overflow-x: scroll、scroll-snap-type、scroll-snap-align）

          　今の会社では、レスポンシブでPCからスマホなどのモバイルにデザインが切り替わる際、レイアウト等の裁量はコーダーさんに任されています。 PC画面上で横並びになっている要素をタブレットやスマホで見せる際、私なんかは縦に1～2列並べる傾向があるわけですが、流石に数か月同じことをしていると「縦にズラズラ並ぶのをスクロールしていくのって芸がないよね？」と思いまして、JQの「slick」みたいに横にスクロールできると面白そうだと思って先人の足跡を検索してみました。 そうすると「over

          在処

          それらは横スクロール時にスナップされる。　ただし火狐は居場所を示さない（横スクロール、overflow-x: scroll、scroll-snap-type、scroll-snap-align）

          在処

          ファイルの中からテキストを抽出しなければならない。それらは画像ファイルを含む。

          　顧客とTELでのやり取りを行った際、製品の解説やスペック表の提出方法について話が及んだ。 「提出のフォーマットって何か決まってますか？」 「いえ、特に決まってはないですよ。よくある形式なら大丈夫です！」 口頭だったので今となっては記憶もあいまいだが、おおよそこんなやり取りだったと思う。 これまでの提出がグーグルのスプレッドシートだったので、それに準じた形式だろうと思った…まぁ思い込んだのが失敗だった。 　後日、メールが届いたのだが、大容量ファイル転送サービスのアドレス

          在処

          ファイルの中からテキストを抽出しなければならない。それらは画像ファイルを含む。

          在処

          独自の入力項目を作成せよ。それらは各ページの内容に反映される。

          要件：カスタム投稿を作成して、製品一覧と製品詳細のページに反映させなさい。 　「サイトを丸ごと構築してください」とデザインを渡されたのは見習いで入社して3か月ほど経過してからでした。 それまでサブページの構築や修正メインでしたので、「おおぅ！ついに！！」と意気込んで作業に臨み………ませんでした。 「いいのか？これがこの業界の慣例なのか？！」どちらかといえばこっちです。 　まま、疑問を呈しても現状が変わるわけでもありませんので、アニメーションやメニューの開閉、TOPのスライ

          在処

          独自の入力項目を作成せよ。それらは各ページの内容に反映される。

          在処

          それは通常隠されているが、クリックすることで中身を開示する（アコーディオンメニュー、details、summary）

          　職業訓練でHTMLを勉強したのは2018年12月からの約3か月間でしたが、それ以降で知ったタグで面白いものをがあったので残しておきます。 　長い文章や補足説明を通常折りたたんでおいて、要素をクリックすると広がって中身を見ることが出来るアコーディオンメニュー。実装する際はJQやチェックボックスを駆使する方法がありますが、HTML単体で該当する機能をもつのが「details」です。 使い方は簡単で、「details」で括った中で見出しになる文章を「summary」で括り、その

          在処

          それは通常隠されているが、クリックすることで中身を開示する（アコーディオンメニュー、details、summary）

          在処

          二種の一覧を作成せよ。それらは同種の関連する要素に繋がる。

          要件 ：カスタム投稿で検査設備と検査紹介の名称一覧ぺージを作る。 ：カスタム投稿で検査紹介と検査設備の詳細を記した一覧ページを作る。 ：検査紹介ページで、各検査紹介の項目にあるリンクから該当する検査設備ページへ飛ばす。 要件（追加） ：カスタム投稿で検査内容の名称一覧ぺージを作る（検査設備とデザイン共用）。 ：各検査紹介のリンクから該当する検査設備項目へ飛ばす。 要件（追加） 　後出しがくると、心がささくれ立つ程度に心が弱い私は、まだまだですねそうですね。 　まずはカ

          在処

          二種の一覧を作成せよ。それらは同種の関連する要素に繋がる。

          在処

          それらは6つの要素からなる。そして配置され重なり合わなければならない。

          要件： 　A：5つの画像と1つの文章からなる要素を配置する。画像についてはカーソルが乗った際にリンクボタンが出てくるようにする。その際、画像全体を透過した黒で覆うこと。 　B：5つの画像はすごくゆっくり別の画像とフェードインで入替えを行う。画像が入れ替わるタイミングは、5つの画像それぞれでバラバラにすること。 　 　PC画面いっぱいに配置された5つの画像を『「slick」でフェードイン/アウトする感じで』と言われて、この職について半年に満たない私でさえ「それはできるけどアリな

          在処

          それらは6つの要素からなる。そして配置され重なり合わなければならない。

          在処