【CSS】JavaScript不要！CSSだけで実装トグル式アコーディオンの作り方
WEBサイトで「アコーディオン」といえば、クリックするとパネルが開閉するUIの定番パターンですね。 多くの場合、JavaScriptと組み合わせて実装することがほとんどだと思います。 でも、CSSだけでもシンプルなアコーディオンを実装で...続きを読む
【CSS】linear-gradient（グラデーション）を使ったボタン作成
CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。 ※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded ...続きを読む
【HTML】Internet Explorer 対応したBootstrapの選び方
Webサイトの制作を相談をいただく際に、「Internet Explorer に対応したい」という要望をうかがうことがあります。主要ブラウザの日本国内のシェアを調べてみると、最新バージョンの「Internet Explorer 11」で約7...続きを読む
【WP】WordPressで出力されるHEADタグ内の内容を整理する
WordPressを利用してWebサイトを構築すると、HTMLを構成するHEADタグ内にWordPress特有の記述が見れます。このWordPress特有の記述は自動的に生成されるため、テーマファイルのソースに記述されているheadタグ内の...続きを読む
【HTML】Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法
前回、ブログにて「Sass・SCSSを使うことでWEBサイトの制作を効率化すること」をとりあげました。そこでSass・SCSSは、どちらもCSSを効率よく記述することができること。そして、Sass・SCSSを変換（コンパイル）してCSSとし...続きを読む
【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する
現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくて...続きを読む
【HTML】Font Awesome 5 をWEBサイトに組み込む方法
Font AwesomeはWEBサイトにも組み込むことができるアイコンフォントです。現行の最新バージョン（Version 5.8.1）では、無料版で1,513種類、有料版で5,097種類ものアイコンが利用することができます。アイコンは矢印や...続きを読む
WordPressで投稿された記事の本文の一部「抜粋」を取得するために、テンプレートタグthe_excerpt()とget_the_excerpt()があります。the_excerpt()とget_the_excerpt()は、投稿時に抜粋...続きを読む
【HTML】Bootstrap4を使いレスポンシブサイトをコーディングする《導入編》
Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレー...続きを読む
【HTML】Bootstrapの基本「マージン」と「パディング」
『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサ...続きを読む