マロリリコーダー部

マロリリコーダー部

”静的サイトにGoogleフォームを埋め込む”について考える

最近カスタマイズ性が上がり、webサイトへ埋め込むこともできるようになったGoogleフォーム。 とても便利なツールですが、webサイトに埋め込み使用するのは業界ではまだ主流でないように感じます。 2023年1月現在でのメリデメを洗い出し、今後について考えてみたいと思います。 メリット無料で簡単に運用できる Googleスプレットシートと連携して問い合わせ履歴を管理できる Googleが管理しているので、セキュリティ面では個人管理より安全という見方もある WordPr

マロリリコーダー部

    • CSSで指定できる単位について

      CSSで指定できる単位について改めて洗い出してみます。 絶対単位と相対単位絶対単位 px（ピクセル） pt（ポイント）　1pt=0.035cm cm（センチメートル） mm（ミリメートル） in（インチ）　1in=2.54cm pc（パイカ）　1pc=12pt Q（キュー）　1Q=1/4mm xx-small x-small small medium large x-large xx-large 相対単位 em（エム）　その要素の文字の大きさ

      マロリリコーダー部

      • 【第7回勉強会】レスポンシブ時のおまじないviewportについて

        レスポンシブ時におまじないのように使っているmeta要素のviewportについて、普段はコピペで使っている方が多いと思います。 私もよく理解できていなかったのですが、viewportで設定できるのは実はこの１パターンではありません。 これを機にちゃんと理解して書けるように、中身の要素を深掘りしていこうと思います。 <head><meta name="viewport" content="width=device-width, initial-scale=1.0"></he

        マロリリコーダー部

        • 【第6回勉強会】headタグ内に記述するmeta情報について（コーダー部：岩本）

          【この記事の内容】headタグ内に記述するmeta情報の内容について基本的なものや理解度が低く今回の勉強会で理解を深めた内容を中心にまとめた。 【headタグ内に記述する内容】headタグ内には主にmeta情報と呼ばれるページには表示されず検索エンジンやブラウザに伝達するための情報を記述する。 【普段使用しているテンプレ】 <!DOCTYPE html><html lang="ja"><head> ①<meta charset="UTF-8" /> ②<meta n

          マロリリコーダー部

        ”静的サイトにGoogleフォームを埋め込む”について考える

        マロリリコーダー部

          【第５回勉強会】センター揃えの方法

          デザインのレイアウトに合わせて、左右、上下の中央揃えにするやり方は何通りかあります。デザインや要素に合わせた手法をまとめてみました。 このブログ内で使用する共通のHTMLです <div class="outer"> <div class="inner"> テキストテキストテキストテキストテキストテキスト </div></div> 左右中央揃え①text-align: center .inner{ text-align: center;} この場合、中身の

          マロリリコーダー部

          【第５回勉強会】センター揃えの方法

          マロリリコーダー部

          【第4回勉強会】テーブルレイアウトを深掘りする

          【基本】テーブルを縦並びにする横に長いテーブルをスマホで縦並びで見せたいときなどに使えるレイアウトです。 th,td { display: block; width: 100%;} tableタグはデフォルトでdisplay: table;が適用されているので、ブロック要素に変更し、幅を100%にすることで縦並びになります。 参考：HTMLでtableを縦並びにする方法を現役エンジニアが解説【初心者向け】 【応用】縦軸にも横軸にも見出しがあるとき縦軸にも横軸にも見出し

          マロリリコーダー部

          【第4回勉強会】テーブルレイアウトを深掘りする

          マロリリコーダー部

          【第3回勉強会】よくあるレイアウトのコーディング方法について

          ※このnoteを書いた人：コーダー部せいすけ（岩本） コーディングはスマホファーストが効率的画面幅が狭ければ狭くなるほどデザインがシンプルになる場合が多くシンプルなものを基準として上書きしていったほうが無駄がなく、コーディングしやすい。 PCファーストに比べCSSの上書きが少なく済む場合が多い 参考になった文献：https://zenn.dev/tak_dcxi/articles/690caf6e9c4e26 【個人的な感想】 この辺に関しては個人的には文面では中々頭

          マロリリコーダー部

          【第3回勉強会】よくあるレイアウトのコーディング方法について

          マロリリコーダー部

          画像データの違いを理解し、効果的な画像フォーマットを選択しよう

          画像の単位dpi 印刷（DTP）における画像の単位は dpi( dot per inch ) で表します。印刷の場合、画像はドットの集合体です。チラシや雑誌など、ルーペで拡大してみると、ドットの１つ１つが見えるでしょう。dpi は、１インチ（2.54cm)という長さの中にどれだけのドットがあるかの値で、数が大きいほど滑らかな画質となります。 ppi Webにおける画像の単位は ppi ( pixel per inch ) で表します。ピクセル（px）とは、コンピューター

          マロリリコーダー部

          画像データの違いを理解し、効果的な画像フォーマットを選択しよう

          マロリリコーダー部

          【第２回勉強会】WebPの使用における注意点！

          WebP(次世代フォーマット）WebPとは WebP(ウェッピー）とは、Googleが開発したオープンソースの次世代画像フォーマットです。圧縮しても画質が落ちにくいままに容量を減らすことができるため、webサイトの表示速度を改善することができ、SEO対策に効果的です。 以前は対応しているブラウザが限定されていましたが、現在はほぼ全ての主要なブラウザに対応しています。 新しい次世代画像フォーマット、AVIFとは AVIFは、webpよりもさらに圧縮率に優れた次世代フォーマ

          マロリリコーダー部

          【第２回勉強会】WebPの使用における注意点！

          マロリリコーダー部

          【第１回定例勉強会】HTMLタグ洗い出し_20220701

          HTMLタグについてQAQ1,article/asideの使い所がよくわからない（せいすけ） HTML5になってHTMLタグに意味付けが多くなった →迷うことが多くなったかも A1,マロリリさんの個人的見解 article：RSSに近い、articleの中で完結する内容、WPのブログ記事もarticleでくくられている aside：サイドメニューで使う、左右にないといけないわけではなく、その記事に関する関連記事・補足情報など。フッターのナビゲーションの中の関連記事もa

          マロリリコーダー部

          【第１回定例勉強会】HTMLタグ洗い出し_20220701

          マロリリコーダー部