webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

css3

cssのdisplay:grid を使ってグリッドレイアウトを作ってみる

CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。 CSS グリッドを使用する事で表で実現するよりもより複雑なレイアウトが可能で簡単に実現できます。またflexboxの場合、多段…

cssのクラス命名規則

小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…

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

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

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

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

レスポンシブイメージの設定

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

background-attachmentを使ったパララックス 風サイトの作成

パララックスとは視差の効果を用いて、サイトに動きをつける事です。多くの場合はスクロールする際に複数の要素に異なるスピードにスクロールするように設定する事で視差が生じ、結果としてレイヤー構造を意識出来る重層的なデザインになります。 pogg-sweet…

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

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

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

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

スマートフォンの時だけ<a href="tel:">を有効にする

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

モダンリセットCSSのress.css

/* ress.css • v1.2.2 * MIT License * github.com/filipelinhares/ress */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-…

スマホ時に横スクロールのUIを実装

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

SVGとCSSを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、…

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

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

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

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

@font-faceを使ったWebフォントの使い方

webフォントには大きく分けて2種類の使い方があります。 1つはGoogleFontのようにネット上にあるCDNを使うパターンです。 今回は、もう1つの、「自身でフォントデータをサーバーにアップする」方法をやってみましょう。こちらの方法を使えば、GoogleFontに…

縦書きとrubyタグの使い方

「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…

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

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

カンプ作成の練習

1、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事 2、ロゴ画像をSVG形式で作成し、h1の背景画像で表示。この際、h1のテキストはcssで隠すように。 3、webアイコン(Font Awesome)を使う事 4、適切な余白の設定 5、各画像を指定され…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

レスポンシブデザイン基礎

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…

画像をレスポンシブに対応させる(可変にする)

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。 この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに…