横スクロールできるコンテンツの作成方法 先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法を紹介します。 検証してみると googleの検証ツール（デベロッパーツール）を使用して上記画像の要素を検証してみると、"top-contents__wrap" というクラスを持ったdivタグの中で、"skill-blog__link" というクラスを持ったaタグが繰り返されているということが分かります。 以下divタグを親要素、aタグを子要素と呼んでいきます。 親要素 親要素のCSSは以下です。 .top-contents__wrap { display: flex; width: 100%; overflow-x:… HTML・CSS
FutureShopの固定ページのコーディングを行った（2回） 先日地元のWEB制作会社さんからFutureShopの新規ページ作成のコーディングをご依頼いただけました。AdobeXDのデザインデータがすでにあり、それを元に構築していくという内容でした。先月と今月の2回続けて対応しました。 必要だった情報 トップページのファイルや画像, CSSをアップロードするためのFTP情報が必要でした。FutureShopでは、FTPでファイルをアップロードする必要がある箇所と管理画面から入力する必要がある場所が分かれているため、FSの管理画面へのログイン情報も必要でした。 PCとスマホでファイルが分かれている FutureShopでは、HTMLがPCとスマホで分かれているためそれぞれのファイルを用意する必要がありました。効率… ECサイト HTML・CSS
YouTubeのポップアップモーダルを作成する方法 現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「modaal」というモーダルウインドウのプラグインを使用しました。 デモサイト デモサイトはこちらです。 デモサイトにある画像をクリックすると、以下のような、YouTubeのポップアップモーダルが表示されます。 https://ki-hi-ro.com/sample/youtube-popup-demo/ 以下の手順で作成しました。 必要なファイルの読み込み HTMLを書く JSを書く https://ki-hi-ro.com/sample/youtube-popup-demo/ 手順1: 必要なファイルの読み込… HTML・CSS JavaScript
Sassでブレイクポイントを指定する方法 SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でCSSを切り替えるのかを指定する値です。 本記事では、Sassでブレイクポイントを指定する方法について書いていきます。 結論のコード まずはブレイクポイントを定義して、$breakpointに代入します。 $breakpoint: ( sm: "(min-width: 576px)", md: "(min-width: 768px)", lg: "(min-width: 992px)", xl: "(min-width: 1200px)", xxl: "(min-width: 1400px)" ); ブレイクポイントの値は… HTML・CSS
BEMについて BEMは、クラス名をどのように付けていったらいいのかについての考え方です。 BEMの前に、HTMLとCSSについて書いていきます。 HTMLとCSSについて WEBサイトのデザインは、HTMLとCSSによって成り立っています。 HTMLについているクラスに対して、CSSを記述することで、WEBサイトのデザインが表示されています。 例えば、MUJI HOTELのサイトのこちらのメッセージ部分について見ていきます。 HTMLには、message__textというクラス名が付いています。 <p id="mainTxt" class="message__text"> 泊まりながら無印良品を楽しんでいただける「MUJI HOTEL」が誕生します。旅や… HTML・CSS
XDデザインデータからの1ページ静的サイトコーディング クラウドワークスで応募して1ページ静的サイトのコーディングを任せていただけました。 AdobeXDのデザインデータからで、レスポンシブ対応で構築しました。 画像はWebp対応を行いました。 公開サイト こちらが公開されたサイトです。 使用した技術 メインスライドやページ内リンク、スマホハンバーガーメニューにjQueryを使用しました。 HTML・CSS WEBサイト制作
デザインカンプ固有のフォントをCSSで再現する方法 先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます。 今回再現できなかったフォントと代替フォント 今回再現できなかったフォント 今回、デザインデータで指定されていたフォントは、FOT-筑紫B丸ゴシック Stdです。 XDでの表示 代替フォント 代替フォントとして、「Yu gothic」を設定しました。 ブラウザ上の表示 ソースコード 以下のコードを使用して、フォントの設定を行いました。 body { font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN",… HTML・CSS Webデザイン
LPコーディングで使用した「jQuery」 先日、クラウドワークスの「XDデータからのLPコーディング案件」に応募したところ、ありがたいことに、ご依頼いただけました。 納品完了したので、今回使用した技術について書いていきます。長くなりそうなので、今回は、jQueryに絞って書いていきます。 ページスクロール ナビゲーションをクリックしたときに、特定のセクションに飛ぶようにしました。 $(function () { $('a[href*="#"]').click(function () { var elmHash = $(this).attr('href'); var pos = $(elmHash).offset().top - 70; $('body,html').animate({… HTML・CSS JavaScript
HTML / CSSで実現可能なこと おはようございます。フリーランスWeb制作エンジニアの柴田浩貴です。今回は、「HTML / CSSで実現可能なこと」というテーマで記事を書いていきます。 画面を構築することができる【HTML / CSS】 HTMLは、マークアップ言語と呼ばれ、画面の骨格を規定する言語です。一方、CSSはスタイルシート言語と呼ばれ、画面の見た目を規定する言語です。 例えば、下記サイトでは、AdobeXDというツールを使用して作成されたデザインをHTML / CSSを使用して再現して、出来上がったファイル一式をサーバーにアップして、WEBサイトとして公開しました。 例えば、コンテンツが豚の鼻にかかっている部分は、以下のようなHTMLとCSSで構成されています。 HTML… HTML・CSS PHP
レスポンシブコーディングのコツ3選 こんばんは。今回は、HTML / CSSを使用したコーディングでレスポンシブ(スマホ・タブレット対応)なコーディングを実現するためのコツを3つに絞って書いていきます。 ※レスポンシブについての最新記事（2022年11月3日投稿）はこちらです。 画像はPC用とスマホ用で分ける PCで使用する画像とスマホで使用する画像は、それぞれ見やすい画像を用意して、CSSで切り替えを行います。 例えば、こちらの記事の画像はPCとスマホで表示を切り替えています。 PC スマホ ソースコード PC用の画像にpc-img、スマホ用の画像にsp-imgというクラスを付けて、以下のCSSを記述しています。 @media (max-width: 767px) { .pc-img… HTML・CSS
