HTML– tag –

AIでLPやホームページのコーディングは本当にできるのか。 最近、このような疑問を持つWebデザイナーやコーダーの方は増えていると思います。 AIで画像を作れることは、すでに多くの人が知っています。しかし、Web制作の現場で本当に重要なのは、画像を作...

Google Apps Script（GAS）でWebアプリケーションを作るなら、最初に知っておきたいのは「普通のWebサイトとまったく同じ感覚では作らないほうがうまくいく」という点です。Apps Script の HTML Service はHTML5ベースで画面を作れますが、実行環境は ...

コーダーのオッコです。 beforeやafterのcontentに、四角や矢印などの記号を文字コードで入れる方法です。 文字コードを16進数に直す。 &#　→　¥0　に直す。 xと;は省略する。 ■　→　25A0 hoge::before { content: "25A0"; } 参考：https:/...

コーダーのオッコです。 ヘッダのプルダウンの挙動ってタグ構造に左右されたりして地味に時間を取られるので、自分なりの書き方をまとめておきます。 ヘッダの右上にプルダウンのボタンがある前提の命名になっています。 HTML <div class="header_right...

■Pote Stock とっても簡単にHTMLとCSSで実装できる参考コードがコピーできます。 ※アピコの場合はtplファイルでシステムが入り込んで複雑すぎて成功できませんでした（汗）。 https://pote-chil.com/html-maker/ 　　 　　 ■動くアイデア帳 いろんな動く表...

コーディングにはインデントを入れるルールがありますが、複数のエンジニアやコーダーが入ってコピー＆ペーストなどで編集した時、かなりインデントが乱れ、コードがわからなくなることがあります。 そんな時、カンタンにページのインデントを整形してくれ...

デザイナーのオッコです。 htmlを書いていたけど、途中で要素同士をdivで囲む必要が出てきた！ということ、ありますよね。 そんなときに使えるemmetのショートカットをご紹介します。 まずこのショートカットの名前は 「Emmet: Wrap with Abbreviation」 ...

デザイナーのオッコです。 私のプロジェクトではよくsmartyを利用するのですが、VSCodeでは、smartyやlarabel bladeといった テンプレートエンジンを使用するとデフォルトではemmetが効かないんですね。 プロジェクト参画時、一旦あきらめてタグを手打ちし...

TECN NEWS 自動表示枠 メインビジュアルに画像を重ねてリンクを張ってほしいとご依頼がありました。 今回はメインビジュアルに対し２つの画像（マーク）を配置して、①PDFリンク（ダウンロードしない場合はdownloadを削除）②サイト内ページリンクを貼りまし...

TECN NEWS 自動表示枠 画像サイズを指定してトリミングをする HTML CSS UIKITのuk-sliderを使ったTOPページのスライダーでしたが、CSVで登録した画像がサイズがまちまちだとスライダーの上下が変更し、みっともないので修正してほしいと指示がありました。...