デザイン制作– tag –
画像・UI・LP・ビジュアル等を制作・改善する記事。
-
scroll-hintで横長の表の操作性を改善する
デザイナーのオッコです。 どうしても横長のコンテンツをスマホで表示しなければならないときってありますよね。 でもぱっと見て「横スクロールができる」とユーザーに分からせるUIを作るのは案外難しいです。 そこで、指マークが出てくれるプラグイン「sc... -
インデント【無料】HTMLのコード整形ツール
コーディングにはインデントを入れるルールがありますが、複数のエンジニアやコーダーが入ってコピー＆ペーストなどで編集した時、かなりインデントが乱れ、コードがわからなくなることがあります。 そんな時、カンタンにページのインデントを整形してくれ... -
position:stickyを使ってテーブルの1行目を固定する【css】
デザイナーのオッコです。 表が長くなると、見出しを固定したくなることがありますね。 今日はそんなときに使える、position:stickyを使った処理をご紹介したいと思います。 前提：UIKitを使用しているためある程度のテーブルが既に出来上がっている（ukク... -
Emmetで文字列を囲んでタグを後付けする【Visual Studio Code】
デザイナーのオッコです。 htmlを書いていたけど、途中で要素同士をdivで囲む必要が出てきた！ということ、ありますよね。 そんなときに使えるemmetのショートカットをご紹介します。 まずこのショートカットの名前は 「Emmet: Wrap with Abbreviation」 ... -
コンテンツが少ない場合にfooterが上にせり上がる問題について
デザイナーのオッコです。 現在改修しているサイトで、コンテンツの量が少ないときにフッタが上に詰めて表示されてしまうという問題がありました。 フッタがせり上がって、下に空間が空いてしまっていますね。 このようなときは、bodyとfooterに以下のコー... -
メインビジュアルに画像を重ねてリンクを張る方法
TECN NEWS 自動表示枠 メインビジュアルに画像を重ねてリンクを張ってほしいとご依頼がありました。 今回はメインビジュアルに対し２つの画像（マーク）を配置して、①PDFリンク（ダウンロードしない場合はdownloadを削除）②サイト内ページリンクを貼りまし... -
ECサイト TOPページ スラーダー サイズ調整
TECN NEWS 自動表示枠 画像サイズを指定してトリミングをする HTML CSS UIKITのuk-sliderを使ったTOPページのスライダーでしたが、CSVで登録した画像がサイズがまちまちだとスライダーの上下が変更し、みっともないので修正してほしいと指示がありました。... -
新米 WEBデザイナー発信 BtoBサイトデザイン②
TECN NEWS 自動表示枠 BtoBサイトはPCファースト！ 現在、WEB閲覧のデバイス解析では7割がSP（スマホ）といわれていますが、BtoBサイトの閲覧解析では平日の限られた時間によく見られていることから仕事中にオフィスで発注するために閲覧してるといえます... -
新米 WEBデザイナー発信 BtoBサイトデザイン①
TECN NEWS 自動表示枠 WEBサイトとブランディング 前職がグラフィックデザイナーだったことで、デザインでは一定のクオリティーを創り出すことができますが、WEBデザインとなると目に見えない気をつけるべきことが何倍にも増えます。 システムが絡むECサイ... -
Shopify人気無料テーマ
Shopifyの人気の無料テーマ紹介です。
