FooBar

note to self

HTML CSS

MacでGulpを導入する方法

こんにちは。本日はgulpのインストールと簡単な使い方についてです。 タスクランナーのgulpを使えば定義した処理を自動で行ってくれます。 フロントエンド開発では最早鉄板のツールになっているので、簡易的ではありますが導入方法を残しておきます。

Netlifyで静的サイトを公開する

こんにちは。本日はホスティングサービスのNetlifyを使って静的サイトを公開する方法です。 自分のサイトを公開するのにGitHub PagesやHeroku、firebaseなどを使っていましたが、Netlifyを使ったことがなかったので、今回備忘録として手順を残しておきます。…

【HTML】headタグ内に最低限書くものまとめ

こんにちは。本日はhead内に書くタグのまとめです。 タグの種類はたくさんあって、設定しておいたほうがいいタグと設定しなくても問題ないタグがあります。 今回は最低限書くものと、書いてあるとメリットがあるタグをまとめてみました。 ==== 最低限書くも…

cssで画面の大きさに縛られず要素の高さや幅を画面いっぱいにする

こんにちは。本日はcssで高さ・横幅を自動で100%にする方法です。 従来通りだったらcssで%やpxを使い、レスポンシブデザインでデバイスごとに要素の高さや幅を書いていたと思います。 しかしながら、それでは親要素の高さ・幅に左右されてしまったり、コード…

ヘッダーをサイト上部に固定する

こんにちは。本日はHTMLやCSSでヘッダーを固定する方法です。 サイトを制作する上でヘッダー(メニューやナビバーなども)を上部に固定しておきたいと思うことがあると思います。 これはよくWeb制作で使われますが、HTML・CSSの基礎基本で、比較的簡単に実装す…

SNSシェアボタンをキレイに横並びにする

こんにちは。本日はSNSボタンを横並びにする方法です。 SNSボタンを横並びにすると微妙に?高さがズレることがありますよね。 今回はそれを解決するためのTipsを共有したいと思います。 ==== ソース ソース SNSシェアボタンを横並びにするにはいくつかの方法…

flexboxでword-wrapが効かない

こんにちは。本日はFlexboxのTipsを紹介したいと思います。 Flexboxは便利ですが、長い文字列を折り返す「word-wrap: break-word;」が効かない問題が存在します。 今回はその解決策を共有したいと思います。 ==== flexレイアウト 解決方法 flexレイアウト ま…

CSSのborder-radiusで角丸をつくる

こんにちは。本日はCSS3から使えるようになったborder-radiusの使い方についてです。 要素に対して角丸を指定することができ、ボタンや画像などの角を簡単に丸くすることができます。 ==== ボタンの角を丸くしてみよう 一部分だけ角を丸くしてみよう アイコ…

CSS3で影をつけるbox-shadowとtext-shadowの使い方

こんにちは。本日はCSS3で使われるbox-shadowとtext-shadowの使い方です。 CSS3ではこれらを用いて簡単に要素に影をつけることができるようになりました。 ==== バージョン box-shadowの基礎基本 ボタンに影をつけてみよう box-shadow text-shadowの基礎基本…

CSSで長い英語文字列を折り返しする方法

こんにちは。 本日は英語などの外国語で長い文字列の場合、ボックスをはみ出てしまうのを防いで、きちんとボックス内で改行するようにするTipsを紹介したいと思います。 ホームページやwebサービスによっては長い英語の文字列があって、ボックスの外に文字列…

レスポンシブwebデザインの基礎基本

こんにちは。本日はレスポンシブwebデザインの基本的なことを説明したいと思います。 スマートフォンやタブレットが普及している昨今、従来のPCだけでなくスマホやタブレットから見ても綺麗なレイアウトを提供するためにレスポンシブwebデザインは現代のweb…

CSS3のbox-sizing: border-box;の使い方

こんにちは。本日はCSS3から使えるようになったbox-sizing: border-box; について説明したいと思います。 border-boxを使えば要素内のborderとpaddingを含めて要素の幅や高さを自動で計算してくれるのでレスポンシブデザインに対してすごく便利です。 レイア…