Tag : CSS

【CSS】Box-Sizingの使い方

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

August 09, 2020

Flexboxのプロパティまとめ

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

August 09, 2020

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

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

July 31, 2020

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

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

July 25, 2020

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

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

November 29, 2018

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

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

September 13, 2018