Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装
2016年9月21日 CSS, Wordpress ブログ等の個別記事でよく見かける、「前の記事」「次の記事」へのリンク。これまでも実装方法やスタイリング方法は紹介されてきましたが、Flexboxを使ったらもっと楽に作れちゃうよ！ということで、その方法と、ついでにWordPressでの実装方法も紹介します。 ↑私が10年以上利用している会計ソフト！ 1. モバイル用リンクを作成 まずは小さい画面用のリンクを作成します。「モバイルファースト」と呼ばれる手法ですね。前の記事のリンクを上に、次の記事のリンクを下に並べて表示します。ここでは特に込み入った事はしないので、簡単に実装できるはずです。 HTML <div class="prev-next-link"> <a class="prev-link" href="#"> <p class="prev-next-label">前の記事</p> <
高級感あるWebサイトをデザインするときに参考になるサイトと、7つのコツまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まきこです。好きなハロプロの秋曲は「ハピネス～幸福歓迎！」です！ さて今回は、「Webサイトの高級感ってどうやったら表現できるの？」という課題について考えてみます。デザイナーとして仕事をする上で、「もっと高級感がほしい」というオーダーは多いんです。そんなときでも迷わず解決に向かってひた走れたら、デザイナーとしても高級になれるはず！ ということで、わたしが個人的に「高級感がある」と感じたサイトを、その高級感を醸成している理由ごとにご紹介していきます。 1. クオリティーの高い写真 オークヴィレッジ木造建築研究所 https://www.oakv.co.jp/kenchiku/ 木造建築を専門とする建築事務所のサイトです。まるで写真に使われている家で暮らしているかのような気持ちになる、臨場感あふれる写真がトップページに大きく使われています。 Equipos de Aire Acon
デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
セブンイレブンを想いながらファミリーマートに抱かれる - 真顔日記
近所にセブンイレブンができた。 といっても、家からは微妙に離れており、最寄りのコンビニではない。それでも生活圏ではあるから、オープニングセールに行ってみたんだが、これが予想以上に大きい店舗だった。たまに郊外で見かける駐車場が異常に広いコンビニ、と言えば伝わるだろうか。 だから品揃えも充実しており、もともとセブンイレブンは自社ブランドに力をいれていることもあって、私のなかに突発的なセブンイレブンブームが生じた。色々と商品を買ってみては、これはうまい、あれもうまいと考えている。 だが先述したように、最寄りのコンビニではない。歩いて十分ほどかかる。たとえば深夜三時に小腹がすいて、ジャージのままパッと行くには遠い。しかも歩いて二分のところにはファミリーマートがある。だからそちらで済ませる。 しかし今日気がついたのは、私はファミリーマートの店内をうろつきながらも、セブンイレブンのことを考えてしまって
[CSS]line-heightとpaddingの使い分け方、リストの各アイテムの間隔を設定するテクニック
メニューなどをリストで実装する時に、クリックができないデッドゾーンができてしまうことがあります。この問題を解決するline-heightとpaddingを使い分けて実装するテクニックを紹介します。 In CSS, set line-height first, padding second 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 何が問題か？ 何が起きているか？ 解決方法はありますか？ 何が問題か？ ハッカーニュースを見ていたら、Zapierブログのこの記事を見つけました。 このメニューにおける問題に気付かないわけにはいきませんでした。
![[CSS]line-heightとpaddingの使い分け方、リストの各アイテムの間隔を設定するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/83c4f532cae57691e0dfee1fb4e0ee860a4bd504/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016091401.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
