gulpのBrowser-SyncでHTMLとCSSをプレビューする
今回はgulpのbrowser-syncを設定することで、ejsとsassからHTMLとCSSにコンパイルしたファイルを自動リロードしてプレビューできるようにしたコードを書き記した […]
shu
1/21ページ
GulpでSass(SCSS)をCSSにコンパイルできるようにする
GulpでSassのSCSSをCSSにコンパイルできるようにするための環境構築を簡単にまとめました。 コンパイル環境構築の目的は、Gulpでscssをcssにコンパイルしたcssフ […]
GulpでEJSからHTMLにコンパイルできるようにする
GulpでEJSからHTMLにコンパイルできるようにするための環境構築を練習してみたときのことをメモがてらまとめました。 ejsファイルを修正してコンパイルしたhtmlファイルを、 […]
円弧をCSSのborder-radiusで表示する
円弧のデザインにした要素を作成したかったのでCSSのborder-radiusを使用して表現してみました。 CSSで円弧にした要素を作成してやりたかったことは、以下の画像のように背 […]
WordPressに静的サイトを共存させてみる
WordPressと静的サイトを共存させてみたときのやり方についてです。 「共存させてみる」とかカッコつけて言ってますが、WordPressをインストールしているフォルダと同じ階層 […]
GitとGitHubでHTMLファイルを管理する
ウェブサイト製作の勉強で作成したHTMLファイルやCSSファイル、画像などのフォルダがローカルに溜まってきたのでGitHubで管理することにしました。 コマンドでローカルのファイル […]
WordPressのesc_urlでURLをエスケープ処理する
WordPressのesc_urlでURLをエスケープ処理するときに必要な知識としてesc_urlのパラメータと簡単なesc_urlの使用例。そしてesc_urlが関数の内部でどの […]
Flexboxで最後の行を左寄せにするやり方
CSSのFlexboxでレイアウトを組むときflex-wrap: wrapで折り返しを行い、フレックスコンテナ(親要素)内部のフレックスアイテム(子要素)の配置をjustify-c […]
WordPressのesc_htmlでHTMLをエスケープ処理する
WordPressのesc_htmlはHTMLをエスケープ処理するときに使用するWordPressで用意されている関数です。 esc_htmlを使用するクセが付いていなかったのでH […]
aタグでメールアドレスをリンクする方法
HTMLのaタグにメールアドレスをリンクするとメールリンクになり、クリックした場合には使用しているメーラーが開いてメール送信ができるようになります。 aタグでメールアドレスをリンク […]
CSSでテーブルを横並びから縦並びに切り替える
HTMLのtable要素でth、tdをマークアップしたテーブルをCSSで横並びから縦並びのレイアウトに切り替える記述を記事にまとめました。 CSSでテーブルを横並びから縦並びに切り […]
HTMLのbrタグをCSSで非表示にするやり方
HTMLのbrタグで改行した部分をCSSで非表示にするやり方と使用例を紹介します。 brタグをCSSで非表示にするやり方については細かい説明が必要ないくらい簡単です。 […]
WordPressの404.phpを作成してエラーページを表示する
WordPressでは404.phpのテンプレートファイルを作成してテーマフォルダに設置すると、存在しないページにアクセスがあった場合には404エラーページとして404.phpに記 […]
HTMLとCSSでポップアップを表示する
HTMLとCSSでポップアップを表示する作り方を説明します。 ウェブサイトでのポップアップはボタンをクリックしたときに、最初は隠れていたコンテンツがボタンに連動して表示される動作の […]
HTMLのaタグで電話がかけられるリンクを作成する
最近になって知ったのですがHTMLのaタグは電話がかけられるリンクを作成することができるのです。 HTMLのaタグで何かしらのウェブページをリンクするときにはhref属性の値にペー […]
WordPressでstyleタグをテキストエディタに記述する
最近までWordPressのテキストエディタにはstyle属性でCSSを記述することしかできないと思い込んでいましたが、styleタグでCSSを記述することができることを今さら知り […]