KYO

タグ: css
CSS

cssデザインメモ。自分の勉強用

2018年8月27日

cssでちょっとしたデザインをメモしていきます。背景画像系はまだまだ面白く操作できそうだ。 ボックスの左上と右下にアイコン画像を設置して、引用文などに使えるデザイン [crayon-5c19dd8514363120243151/] [crayon-5c19dd8514371521624153/] リストの右橋にアイコンをつける [cray...

CSS

高さの違う画像を揃えてレスポンシブに横並び表示する

2018年8月20日

今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。 さらにレスポンシブに表示させます。 高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。 イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。 [ca...

Vue.jsで、スライドメニューを作る

2018年8月17日

最近Vue.jsを勉強し始めました。 対してjQueryも使いこなせないんですが、Vue.jsってjQueryより使いやすいんじゃね?と思ってしまうほどにハマってしまいました。 というわけで、Vue.jsでサイドメニューを表示させます。   jQueryみたいにクリックした時に、この要素にクラスを付与するみたいなロジックを書かず...

Sassの基本

2018年8月3日

Sass(サース)を勉強しています。cssの勉強でcodepenとか見ているとsassで書かれたものが時々出てきます。なんか特別な環境とか必要なのかな?と避けていたんですが、どうやら簡単に導入できてしかも、特別環境とかが必要なわけでもないとのことで早速勉強しました! Sassを使う cssの上位互換的なやつです。 最終的にはcssに変換し...

CSS

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

2018年7月28日

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

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

2018年7月28日

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

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

2018年7月28日

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

CSS

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

2018年7月28日

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

CSS

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

2018年6月27日

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