HTMLとCSSについて

シンプルなのに映えるテクニック グラデーションは、Webサイトを華やかに見せる表現として、よく利用されます。 背景はもちろん、文字にもグラデーションを使った演出は、見た目のインパクトも十分にあります。 文字にグラデーショ […]

円形のグラデーション表現はCSSでできます デザインする時に、グラデーションをかけたい事があると思います。 昔は、グラデーションをかけた画像を用意して、背景に設定して、リピートして・・・ 色の変更があった場合は、画像を作 […]

文節の途中で改行される事を防げるプロパティ Webサイトでは、文字を表示させるブロックの端までくると、文字が折り返して表示されます。 br要素を使う事で任意の位置で改行させる事ができますが、PC・スマホで共通のHTMLを […]

CSSだけで高さ0から要素の高さまでの変化をtransitionでアニメーションさせたい 近年、CSSは色々な事ができるようになりました。 たとえばアニメーションの実装。 変化前後の値を利用する事で、アニメーションを実装 […]

clip-pathって何？基本を知ろう CSSのclip-pathプロパティは知っていますか？ 図形を書くときに、CSSを使って文字情報だけでできるようになる便利なプロパティです。 要素の表示させたい領域を作って、図形を […]

ブラウザ上では難しい文字の配置 Webサイト制作の現場で、デザイナーからは「文字を両端揃えにしてほしい。」とか、「字詰め（カーニング）をして、文字の間隔を整えてほしい」とか聞かれる場面があると思います。 弊社はデザインと […]

表示デバイスに最適化された画像へ切り替えて表示しよう 同じ画像であっても、スマートフォンの画面表示と、パソコンの画面表示とで別々の画像を表示させたい時があります。 画面の縦横比率が異なるので、パソコンの画面を想定した画像 […]

CSSを使って画像をトリミングする Webサイトを作っていくと写真の縦横比で悩まされる事も多いのではないでしょうか。 見た目の問題で、写真の下に来る文字の先頭を揃えたい！！という事はよくあるもの。 作り初めの頃は写真を撮 […]

画像などの読み込みを遅延させて表示速度を上げる Webサイト上で大きな影響力を持つ画像。 文字で説明されるより、絵で見た方が理解できる物もありますし、なにより表示したときのインパクトは絶大です。Webサイトの印象を左右す […]

使用する言語を示すlang属性 Webサイトは世界のどこからでもアクセスできるます。もちろん生活圏が異なれば言語も異なりますね。 なのでWebサイト上に掲載する言語も日本語や英語など、多岐にわたります。 Webサイト上の […]

リセットCSSは各種ブラウザで初期設定されているCSSを無効化するために使う そもそもリセットCSSとはなんじゃいな？という方もいるかもしれないのでまずは説明いたしましょう。 インターネットを使ってWebサイトを閲覧する […]

配置間隔の制御も簡単にできる 前回Flexboxをつかったコンテンツ配置をご案内しました。使ってみると、とても便利な事に気が付きますね。 でも子要素の配置が難しい？とお考えではありませんか？ 大丈夫、そんなことはありませ […]

要素を並べるのに便利で素敵なFlexbox Webサイトのコンテンツ配置に使える「Flexbox」 他にもfloatを使ったり、inline-blockで並べたりと、様々な方法がありますが、細かい調整を自動でしてくれるの […]

Webサイト上で英文を改行する Webサイトにおいて英文は単語の途中で改行されないようになっています。 なのでハイフン(-)や空白を含まない文章の場合、改行される事なく続きます。 これによって何が起こるかというと、Web […]

CSSを見直して読み込み速度改善を図る Webサイトの表示速度が遅いと感じる事があると思います。 多くはデータ容量の大きな写真が沢山貼られているなど、単純に読み込む情報量が大きすぎる場合だと思いますが、CSSなどのソース […]