タグ

web制作に関するtsugiikimasu22のブックマーク (5)

  • 脳に収まるコードの書き方 - hitode909の日記

    アーキテクチャを理解可能にするために、同時に見るべき関心事は最大7個にしよう、という話がよかった。 よくわからない難しいコンポーネントの話をしてると、「これってこういうこと?」「それは〇〇という概念があって…」というのが延々と続いて、話が全然進まない、ということがある。 そういうときは、抽象を見つけるのに失敗していて、フラットに様々な概念を並べてしまっている、と言える。 適切に意味をまとめていって、中心概念と、それの付随する概念が最大6個となるように、六角形の花、ヘックスフラワーにプロットしよう、というアイデア。で、そのフラワーの1セルを拡大すると、さらに、中心概念と付随する概念6個、というかたちで、入れ子にしていく。 ソフトウェアの分割統治っていうと新しい話ではないけど、フラットな20個の概念に分割されても、覚えてられない。 このでは人間が一度に覚えていられるマジカルナンバーを参照して

    脳に収まるコードの書き方 - hitode909の日記
  • Web制作の現場で使える無料のWebサービス13選 | MxGrain - デザイン制作

    CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa

    Web制作の現場で使える無料のWebサービス13選 | MxGrain - デザイン制作
  • 効率よくコーディングを進めるためにChatGPTを使ってみよう

    この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSChatGPTで生成してみよう H

    効率よくコーディングを進めるためにChatGPTを使ってみよう
  • VSCodeで最強のMarkdownノートエディタを作ろう

    昨日の自分「今作ってる曲まじで良すぎる。天才かもしれん」 今日の自分「ナニコレ。曲作り下手すぎか~~」 この記事は新歓ブログリレー23日目の記事です。 こんにちは、カシワデと言います。サウンド班に所属していてパソコンで音楽を作っています。 皆さん、DTMってしってますか? DTMとはDeskTop Musicという和製英語の略で、パソコンで音楽を作ることを広く指します。パソコンで音楽を作ると言っても昨今の曲は大体パソコンを用いて作られているので、DTMというと特に"打ち込み"のニュアンスが出るような気がします。 でも、『パソコンで音楽を作る~』とか『打ち込み』っ… 🎉入学おめでとう🎉まずは新入生の皆さん、ご入学おめでとうございます!!!これから始まる大学生活は非常に短いですし、世間で言われる程時間に余裕があるわけでは無いので、後悔の無い充実した生活を送ってください!

    VSCodeで最強のMarkdownノートエディタを作ろう
  • ユーザーの反応率を高めるマイクロコピーの優れた事例17選 - 小さな会社のWEBビジネスの方程式

    1-3. リンク先の内容を具体的に表示する ボタンやバナーのマイクロコピーでは、リンク先の内容を具体的に表示することが大切です。 「詳しくはこちら」のような表現でリンク先の内容がわからないと、ユーザーはそこに知りたい情報があるのか判断できないために離脱する可能性が高いからです。 デジタルツールの大手メーカーであるAppleが“M1システムオンチップ”を紹介するページでは、リンクボタンに以下のようなマイクロコピーが設置されています。 出典:Apple これらのマイクロコピーによって、ユーザーはリンクボタンの先にどんな情報があるのかを一目で理解できます。 スマホが普及した近年は特に、サイトを閲覧するユーザーはその内容をじっくりと読んでいるというよりも、流し読みをしているケースが多いものです。 「詳しくはこちら」だとそれが何のことだったか記憶に残っていない可能性があり、理解するためにはページを遡

    ユーザーの反応率を高めるマイクロコピーの優れた事例17選 - 小さな会社のWEBビジネスの方程式
  • 1