HTML/CSS
CSSだけでテキストを無限ループアニメーション可能です。実際のコード例と解説、注意点などまとめて掲載しています。
width、height、align、radius、relativeなど間違いがちなHTML/CSSの読み方を、一般的な読まれ方と実際の英語の発音などと照らし合わせてWeb現場で使えるようまとめて解説しています。
前回パート1から引き続きのコーディングの思考の流れを具体的に言語化して実践していく記事です。 ▼#1からご覧になられる方はこちらからどうぞ。 webabc.hatenablog.jp 模写コーディングにつまづく方向けに、より簡単なサンプルサイトデザインを作成しました…
以前、模写コーディング以上に簡単な練習用のデザインを作成し、記事にて公開しました。 webabc.hatenablog.jp webabc.hatenablog.jp 今回はこちらのデザイン画像から、実際にどういった思考の流れでコーディングしていくかを解説していきたいと思います。 …
CSSのみで実装したハンバーガーメニューの動きのバリエーション5種をサンプルコードとともに解説しています。 ２本線のメニューアイコンから、定番の3本線ハンバーガー。ステンシル風、ブラインド風の動きなど紹介しています。
Webデザインを独学で始める方で、まず何から手をつければ良いか分からない方がいらっしゃると思います。 HTML/CSS等のWebデザイン入門系の参考書を手に取って一通り読み終えても、そこから「独学を進めることが出来ない…」という相談も実際のレッスン生の方…
前回、2020年振り返りということで、アクセスの多い記事をまとめてご紹介しました。 webabc.hatenablog.jp 年明け初投稿の今回も、引き続きまとめ記事シリーズ第2弾。 Web制作を学ぶ上で役立つ記事をなるべく学習ステップ順にまとめていこうと思います。 入…
Webブラウザ界の問題児Internet Explorer、通称IE。 サイト納品の際に一安心したと思ったら後からIEでの表示がおかしいと、対応に追われるなんてことがよく起こります。 こういった問題が起きないよう、受注の際にブラウザ対応、特にIEについてどこまで対応…
要素を中央揃えや自在に配置したい時の方法としてcalc()関数を使ったテクニックを解説しています。 positionと組み合わせて幅広いレイアウトが可能なので是非ご参考ください。
今回はWebサイト制作・コーディングについて学習し始めて間もない方向けの基礎まとめです。 よく使う基本のHTMLタグやCSSプロパティについてざっとまとめてるので、初心者の方はもちろん 、久々のコーディングでブランクがあるという方にもご参考頂ければ幸…
ウェブサイト上でユーザーに対して何らかのファイルのダウンロードを促す時があるかと思います。 今回はそういったダウンロードリンクを貼る方法について、記したいと思います。
font-weight: boldが効かない！そんな、思うように文字の太さを調整出来ない時、太字を適用させる対処法「text-shadow」を用いる方法と「ウェブフォント」を用いる方法、２つをご紹介します。
CSSでは背景にlinear-gradient()関数を用いてグラデーション表現が可能です。 二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。 developer.mozilla.org このグラデーションを応用して、色の変化を急にすることで、斜線やストライプ…
CSSだけで簡単ハンバーガーメニューの実装コード例をご紹介。JS無しで各ブログサービスにも導入しやすい、お手軽な方法です。 アイコンのアニメーションについても説明しています。
多くの方がご愛用の「Googleマップ」。 お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。 このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Ma…
2020年現在、Web制作においてCSSでベンダープレフィックスを何につければいいのか質問を受けたので、少し調査してみました。 ベンダープレフィックスとはCSSの比較的新しいプロパティに各ブラウザを対応させる記述です。 「vendor」ベンダー…各ブラウザの提…
aタグのmailto属性を使って件名や本文定型文、CC、BCC入力済の状態でメールソフトを起動する方法を解説しています。WebサイトのリンクからOutlookなどOS標準メーラーが起動するようにできます。
コーディングに用いられるエディタの定番といえばVScode/Brackets/Dreamweaver/ATOMなどでしょうか。 今回はどのエディタでも使えるコーディングが爆速に捗る省略記法、 「Emmet」 を紹介したいと思います。 映画のTENNETに似た感じでエメットと読みます。 T…
ウェブサイトの見た目は通常、HTMLにCSSのファイルを読み込んで、タグやclassやidによる指定で装飾を施して成り立っています。 HTMLで構造を記述 CSSで装飾を指定 という具合。 その際に、classとidはどう違って、どう使い分けるべきなのか。 Webデザイン勉…
Flexを使って横並びにした要素に均一の左右縦ボーダーを引く例です。 横並びメニューなどでよく左右にボーダーがついてる場合、全ての要素に左右ボーダーとしてborder-leftとborder-rightを指定してしまうと、隣合わせの要素のボーダーが二重になって太くな…
ハンバーガーメニューって美味しそうな名前ですね。 よくスマホサイトなんかに使われる事の多い、アイコンをタップすると開閉式でニュっと出てくるナビゲーションの事です。 このサイトでは現在スマホで見た時に使っています↓ 三本線のアイコンがハンバーグ…
Web制作で良く出てくる上下中央揃え、天地センタリングの方法を解説しています。 HTML/CSSを使って一番簡単なFlexboxを用いた実装方法を例にしました。 前回、要素の左右中央揃えを解説した続きの記事です。
はてなブログでメニューを表示したいという方向けにカスタマイズ方法を解説しました。 HTML/CSSを用いて横並びのメニューを実装例になるべくコピペで簡単に出来るよう解説。 ブログの上部にナビゲーションは必要か不要かも論じています。
Web制作、コーディングで中央揃えがなぜか効かない、、という方へ。 中央揃えの方法についてきっちり理解出来るようインライン、ブロックレベルの違いも合わせて解説しています。 右寄せについても補足説明あり。
私もよく悩みますが、class名って「どうしよう…？」ってなりますよね。 英語強い方ならそう迷わないかもしれませんが、あまり英語に慣れていない方だと困りますよね。 自分だけであればローマ字でも問題なかったりもしますし、場合によってはありですが、案…
CSS3のdisplay: flex;を使いこなせば横並び、縦並び、中央揃え等レイアウト自由自在！コーディングレベルがぐっと上がります。 使い方の基本のご説明から各プロパティ使用まとめも記載。
HTML/CSSはじめたての人がつまづくポイント、要素の重ね方。 通常はhtmlは縦に積まれていくので、要素同士は重なりません。 今回は「position(ポジション)」というCSSプロパティを使って要素を重ねたり、自由に配置出来る方法を図解していきます。 ではやっ…
sectionとarticle、ややこしいですよね。 asideはこれらと比べるともう少しわかり易いですが、それぞれシンプルに解説していきます。 section…「章・節」などひとつのまとまりを表す汎用的な分け方。例えば導入部、新着情報、連絡先など。 article…「記事」…
「display: flex;」これが使えるようになってFloatは過去のものになってきています。 ウェブの歴史においてデザインの自由度が少なかった時代からテーブルを駆使したレイアウトなどを経て、長らく横並びのレイアウトにはfloatが主流となっていました。 そし…
CSSの基礎、marginとpaddingの余白の違いをしっかり理解する事は脱初心者として重要です。 margin…要素の外側の余白 padding…要素内側の余白 この図のような感じでボーダーを境目に内側がパディング、外側がマージンとなっています。 これはdivやpタグ、h1～…
