HTML/CSSを学ぶ 【両端揃え】たった1行のCSSで文章の見栄えを美しくする
こんにちは。今回はHTML上でどのように文章の両端揃えを行うかを解説します。 指定方法 指定はとても簡単で、1行追加するだけです。 text-align: justify; これだけで両端揃えを実現できます。 英語や数字が混ざっていても概ね...
HTML/CSSを学ぶ
HTML/CSSを学ぶ 
HTML/CSSを学ぶ 【徹底解説】google fontsの読み込みを高速化する
こんにちは。google fontsってとても便利ですよね。リンクタグを数行コピペするだけでフォントを読み込めますから、普通にフォントファイルを用意して配置するより簡単です。 でも、実は場合によって読み込み速度が遅いことがあり、ユーザーの離...
HTML/CSSを学ぶ Google Fontsの使い方【コピペするだけ】
こんにちは。コーディング案件においては、デザイナーさんからフォントの指定をされることがよくあります。場所によってフォントが異なったり、フォントファイルを準備する必要があったり、意外と大変です。 そこで今回は、Google Fontsを使って...
HTML/CSSを学ぶ line-heightの邪魔な上下の余白をこの世から消す
こんにちは。html上のテキスト、文字の行間を調整するcssプロパティ、line-heightってありますよね。でも余計な上下の余白に困ったことはありませんか？ 今回は、line-heightの邪魔な上下の余白をこの世から消す方法を解説しま...
HTML/CSSを学ぶ margin: auto;の正体を暴く
こんにちは。htmlの要素を中央揃えするためにmargin: autoを指定したけど効かない！ってことよくありますよね。 今回は、margin: auto; がそもそも何なのか、その正体を暴いていきます。 追記：応用編を書きました。post...
HTML/CSSを学ぶ 【徹底解説】CSSでチェックボックス/ラジオボタンをカスタマイズする方法を超絶優しく解説する
はい、今回はHTML/CSSの中でも比較的高難易度な、チェックボックスやラジオボタンのカスタマイズについてです。高難易度でありながら実務においては頻出です。 デザイン上デフォルトのチェックボックスやラジオボタンを使う場合はほぼありえませんか...
HTML/CSSを学ぶ HTMLにおける、上手に比率維持した画像を作る方法（imgタグ/background-image）
こんにちは。今回はHTMLにおいて意外と厄介な「画像の扱い方」について説明していきます。 比率維持した状態でimgタグを使う まずはimgタグです。imgタグは基本的には画像の元のサイズ/比率のまま出力されます。これを調整する場合、親要素の...
HTML/CSSを学ぶ HTMLタグに必ずクラスをつけるべき理由
こんにちは。今回はHTMLタグになぜ必ずクラスをつけるべきなのか、その理由を解説していきます。 タグの意味をわかりやすくするため 例えば、こんな要素があったとします。 htmlはこんな感じ。 <div> <div> <img src="./...
HTML/CSSを学ぶ HTMLだけじゃない？emmetを使ってCSSを爆速で書く方法
こんにちは。今回はemmetというHTML/CSSを短縮記法で書けるようになるツールを紹介します。主にCSSのよく使う短縮記法をお伝えしようと思います。 emmetとは emmetは、先に紹介したようにHTML/CSSの短縮記法を使えるよう...
HTML/CSSを学ぶ input type=”date”で、どこをクリックしてもカレンダーが表示されるようにする。
こんにちは。今回はinputタグについてです。最近仕事で出くわしたので紹介します。（ブラウザによっては動作しない可能性があります。Chrome/Firefoxで動作確認） input type="date"は、次の画像のように日付を入力する...