Tag : CSS

Programming

【CSS】Flexboxのプロパティまとめ

Flexboxは、CSSはWebページのレイアウトを設定できるモジュールです。 今回の記事では、Flexboxでよく使うプロパティをまとめました。 Flexboxの使い方 Flexboxを使う時は、整列させたいアイテム(item)をまとめて格納するコンテナ(conteiner…

August 09, 2020
Programming

【CSS】Box-Sizingの使い方

CSSプロパティのBox-sizingの説明です。 Box-sizingはdivやpなどのボックスサイズの計算方法を指定してくれる。 ボックス幅の計算方法 デフォルトのcontent-boxだと、 ボックスの幅=コンテンツ幅(width)+内側の余白(padding…

August 09, 2020
Programming

Flexboxで作るヘッダーのサンプル集

Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。 Flexboxを使うと簡単に整列したり、配置できるようになるので、ヘッダーなどのレイアウトに使われています。 今回の記事では、Flexbox…

July 31, 2020
Programming

CSSとJavaScriptで作るハンバーガーメニュー

ハンバーガーメニューとは スマホなどで、ホームページを表示した時に見える3本線のこと。 この3本線が、ハンバーガーのように見えることから、ハンバーガーメニューと呼ばれています。 クリックすると、メニューが表示されます。 参考サイト:The Virginia…

July 25, 2020
Design

箇条書きリストをおしゃれにするCSS10個【女性向け】

ブログ記事を書いていると頻繁に登場するのが、箇条書き。 項目を並べたり、まとめるのに便利で、わたしもよく使います😄 今回は、CSSコピペでできる、おしゃれなリストのデザインをご紹介します。 リストのHTMLの書き方 リストには「番号付き」と「番号なし」の…

November 29, 2018
Design

【CSSコピペOK】おしゃれな引用blockquoteデザイン10選

記事を書く時に、他のホームページやブログの文章を一部紹介したいことって、けっこうありませんか? ただ、ブログテンプレートに使われているオリジナルの味気なかったりする。 コピペで使えるCSSのサンプルを5つ用意しました。 ブログやWordPressで引用符(blockquote…

September 13, 2018
Design

CSSで作れるシンプルな飾り枠デザイン

見出しデザインに続いて、CSSのコピペだけで反映できる、飾り枠のデザインを用意しました。 フォントのサイズや色はご自由に変更ください。 基本の飾り枠 この記事で紹介するデザインでは、HTML…

August 24, 2018
Design

CSSで作れるかわいいブログ見出しのデザイン

CSSのコピペだけで反映できる、簡単な見出しデザインを用意しました。 フォントのサイズや色はご自由に変更ください。 見出しデザインを設定するには この記事で紹介するデザインを使う時には、HTMLに見出しタグ(h…

August 22, 2018
WordPress

WordPressのテーマにcssとjsを読み込む書き方

cssやJSの読み込みを行うときは、WordPressが自動で読み込むファイルと重複しないよう、functions.phpにまとめて記述します WordPressテーマにCSSファイルを読み込む functions.phpで読み込みたいcss…

August 03, 2018
WordPress

【WordPress】プルダウンメニューのデザインを整える

今回は、WordPressのグローバルメニューの設置&カスタマイズの仕方です。 メニューが階層になっていると、メニューにマウスをあてると、子メニューが表示されるようにします。 また、スマホとPC…

July 24, 2018