タグ: デザイン

パーツを組み合わせてレスポンシブなサイトを作った

2018年7月28日 CSS

過去の3つの記事で、記事一覧部分のデザイン、ヘッダーメニュー部分のデザイン、なんかスライダー部分のデザインを作りました。 これらの3つの記事の応用で一つのレスポンシブなサイトを作ってみました Bootstrapとフレックスボックスで記事一覧部分のデザインを作る 記事やコンテンツが流れていくスライダーのアレを作ってみた オーバーレイをかけた...

オーバーレイをかけたスライドメニューを作った[簡単]

2018年7月28日 jQuery

レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。 メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。 スライドメニューを作る 前回記事やコンテンツが流れていくスライダーのアレを作っ...

記事やコンテンツが流れていくスライダーのアレを作ってみた

2018年7月28日 jQuery

ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか?とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。 コンテンツスライダーを作る まずは作ったデモサイトをご覧く...

Bootstrapとフレックスボックスで記事一覧部分のデザインを作る

2018年7月28日 CSS

ワードプレスのテーマを自作している時に、トップページに新着記事一覧を表示することが多いのですが、その記事一覧部分のデザインは非常に重要ですね。どんな記事なのか知る前に、視覚的に見やすいか見やすくないかという情報が入ってきてしまうので考えて作るべきです。 記事一覧部分を作る まずはBootstrapを使って作るパターンと、Bootstrap...

cssだけでレスポンシブなナビゲーションメニューを作る

2018年6月27日 CSS

ソースコード   ヘッダーのメニューが横一列に並んでいて、画面幅が狭くなるとアイコンが出てきて、クリックするとメニューが表示されるという、スマホサイトではあるあるの仕組み。 だいたいが、jQueryのトグルクラスを使って実現しているのですが、今回はcssだけで作ってみました。 まだまだ改良の余地があるのですが、一応機能的には十分...