WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

HTML5+CSS3

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1…

HTML5でのアウトライン構造を理解する

アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが非常に重要になってきます。また、正しいアウトライン構造を作るためにはsectionタグを使用したセクショニングをしっかりと理解する事が大事です。webサイトを…

object-fitを使って動画を要素にはめ込む

www.ditjapan.com object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。 fill 置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が…

フォントサイズremについて

emを使ったフォントサイズ emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。 remを使ったフォントサイズ 次にremを使ったフォントサイズの指定です。…

background-clipを使ってcssを使って文字で画像を切り抜く

以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。 background-clip background-clipプロパティは、背景の適用範囲を…

既存サイトのトレース|家具のECサイト

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 www.bloomingville.com 今回のレイアウトのポイント 最大幅を指定したグリッドレイアウト cssはモバイルサイズから指定(モバイルファースト…

画像にあしらいをつける

あしらいとは、デザインにおいての「装飾」のことです。入れる事で雰囲気や華やかさが出るので色々なパターンのあしらいを覚えてみましょう。 radial-gradientを使ったあしらい See the Pen css3での使ったあしらい1 by yachin29 (@yachin29) on CodePen. tr…

スマートフォンの時だけ電話番号のリンクを有効にする

スマートフォンやタブレットでウェブサイトを見ている時にボタンをタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンではtelリンクを設定していない、電話番号で無いただの文字列もリ…

スマートフォンでのナビメニュー

ナビゲーションメニューの押し易さ(使い易さ)というのはページ全体の使い易さに繋がる為、非常に大切です。 PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。 スマホでは制限され…

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

画像や要素をcssでクリッピングする「clip-path」

clip-pathプロパティ clip-path CSS プロパティは要素のどの部分を表示するかを定義するクリッピング領域を作ります。クリッピング領域の内側が表示され、外側は隠されます。クリッピング領域はインラインや外部 SVG を参照する URL、または circle() のよう…

cssプラグインを使ってハンバーガーメニューを作る

前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしま…

CSS transitionを使ったホバーアクション

7月30日の作業データ index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>画像にホバーアクション</title> <style> html,body,p{ margin: 0; padding: 0; } img{ vertical-align: bottom; } .wrapper{ width: 1000px; margin: 100px …</meta></meta></head></html>

スマホでよくある横スクロールのUIを実装

最近はスマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また…

CSSの新しい便利な機能を使う

Windows OSのサポートには期限があり、各OSの期限は、Windows 7は2020年1月14日で終了済みで、Windows 8.1は2023年1月10日に終了となります。 Windows 7のサポート期限が過ぎた事で、今後IE11のサポートを切るという選択が一層増えてきます。 HTML5やCSS3に…

IE11のサポートが切れれば使用出来るHTMLやCSSの便利な機能

Windows 7のサポート期限が過ぎた事で、今後IE11のサポートを切るという選択が一層増えてきます。 HTML5やCSS3にはIE11がサポートしていない為、使えない便利な機能が多くあります。そういった便利な機能が今後は使えるようになって来るので、知っておきまし…

レスポンシブイメージをpicture要素で作成する

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみ…

cssだけで作るドロワーメニュー

css3のUI疑似クラス「E:checked」を使うことでcssのみでクリックイベントの指定が可能になります。 UI疑似クラス「E:checked」はフォームの部品である「ラジオボタン」「チェックボックス」の2つで使用可能です。さらに「~」や「+」などのセレクターを使う…

cssの正規表現を使って要素を絞り込む

divなどの要素に複数のクラス名を付けてcssでコントロールする、という事自体は以前からやって来ましたが、クラス名が増え過ぎてしまうと、逆にコントロールし難くなってしまいます。 そういう場合に正規表現を上手に使う事でコントロールしたい要素を絞り込…

cssプラグインを使ってハンバーガーメニューを作る

前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしま…

リセットcssのスニペット

/*! * ress.css • v1.2.2 * MIT License * github.com/filipelinhares/ress * 全ての要素にbox-sizing: border-box;. * 全ての背景画像にbackground-repeat: no-repeat. */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{backg…

background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く

以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。 background-clip background-clipプロパティは、背景の適用範囲を…

cssで枠線や見出しを作る

以前は画像で作るのが一般的でしたが、現在では多くの物をCSSのみで表現出来るようになったので、積極的に使って見ましょう。 saruwakakun.com saruwakakun.com https://www.nxworld.net/tips/css-scroll-down-button.html coliss.com

CSSで変数が使えるカスタムプロパティ

cssで変数というとSASSやLESSといったcssを拡張したメタ言語が一般的ですが、最近ではcssのみでも変数を使う事が出来ます。 SASSやLESSと比べると、出来る事は少ないですが、cssファイルに直接記述する事が出来、非常に簡単なので、まずはcssカスタムプロパ…

cssでの色々な指定方法

授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。 また、細かい要素の指定方法が必要になるので、 「~」で同じ階層の後ろに並…

CSS3 filterでの画像加工

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。 それにより、フェルタ毎に複数の画像を用意する必要がなくなります。 cssのfilterプロパティで出来る事 grayscale(グレースケール) saturate(彩度) sepia…

SEOに適した無限スクロールの制作

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

css3を使ったドロワーメニュー

右端から出てくるドロワーメニューindex.html <html lang="ja"> <head> <meta charset="utf-8"> <title>ドロワーメニュー</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> </link></meta></meta></head></html>

object-fitを使って動画を要素にはめ込む

object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。 fill 置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…