html

※Web開発

【slick】カスタマイズ用オプションまとめ一覧

slickのカスタマイズ用オプションってどんなのがあるの? 今回はそんな疑問にお答えします。 スライダーを簡単に実装できるプラグインとして有名なslickですが、オプションが色々あり、かなり幅広くカスタマイズ可能です。 slickの基本的な...
※Web開発

イメージをジャンプさせるアニメーション

html でこのイメージをジャンプさせるアニメーションをつくれますか? はい、HTMLでこのイメージをジャンプさせるアニメーションを作ることができます。そのためには、以下の手順を踏む必要があります。 まず、イメージをHTMLの<img>タグ...
※Web開発

CSS z-indexの使い方:CSSで重なり順を指定する

前回の講座 CSSのpositionを総まとめ!absoluteやfixedの使い方は? 今回は、要素の重なり順を指定するCSSプロパティz-indexについて、分かりやすく解説します。 この記事の目次 z-indexの使い方 効かないとき...
※Web開発

【CSS】justify-contentの使い方や効かない原因を解説

Web制作をしていると、要素を横並びにするレイアウトをよく使います。そこで「横並びにした要素を均等に配置したい」「両端の要素を親要素の端に揃えたい」などと思うことはありませんか? そのようなレイアウトを作成するには、display: fle...
※Web開発

フレックスボックス

フレックスボックス(Flexbox) は、アイテムを行または列に並べるための 1 次元のレイアウト方法です。アイテムがたわんで(伸びて)追加の空間を埋めたり、縮んで小さい空間に収まったりします。この記事では、すべての基本事項について説明しま...
※Web開発

【CSS】background-colorとbackgroundの違い

ふと、CSSのbackground-colorとbackgroundの違いって何だろう?って思いました。 いつもは背景色を指定する場合は、 SyntaxHighlighterについて <style> #TableA { background...
※Web開発

h1タグは画像でも問題ない!画像を設定する時のポイント3つ!

h1タグは、そのサイトのテーマを示す重要なテキストです。SEOを考える上でも、h1タグには上位表示を狙いたいキーワードを取り入れるなど、戦略的な対策を行う必要があります。 h1タグを使用する時に、デザインの兼ね合い上「画像」で視覚的に訴えた...
※Web開発

HTML・CSS・PHPなどのコードへのコメントタグの書き方まとめ

HTMLの場合 1<!-- ここに表示させないコメントを入れます --> HTMLの場合、コメントアウトは「<!--」と「-->」の間に入れます。また、コメントが正しくない一例を以下に示します。 1<!---------コメント------...
※Web開発

altテキスト SEO

altテキストは、画像や動画などの非テキスト要素に付与するテキストです。altテキストは、画像や動画が読み込まれなかった場合に、代替として表示されるテキストです。また、検索エンジンが画像や動画の内容を理解するためにも使用されます。 SEOに...