稼ぐために始めたプログラミングのこれまでの振り返り。勉強方法や役立った本も紹介。僕がプログラミングを始めてから2年8ヶ月が過ぎました。 今までは基本的にフロントエンドをメインに取り組んできましたが、勉強しているうちに興味が移り、今後はバックエンドに方針転換するつもりです。良いタイミングなので、今までの取り組みを振り返っておこうと思います。
ハンバーガーメニューをおしゃれにするCSSスニペット9選。アイコンからすぐ実用できるサンプルまで | KodoCode
スタイリッシュなデザインのハンバーガーメニューのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 ハンバーガーメニュー（三本線のメニュー）はメニュー表示の定番となっていて実装することも多いと思います。モバイルファーストの時代になり限られたスペースを有効活用するために生まれたデザインです。本記事ではフォームの中でも「ハンバーガーメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 ハンバーガーメニューアイコンの多彩なデザイン・動作がよく分かるCSSデザイン例。シンプルな三本線のハンバーガーメニュー。クリック時の多彩なアニメーション。See the Pen CSS Menu Icons by Naoya (@
モダンなサイトで良く見るWeb表現技術 | 東京のホームページ制作 / WEB制作会社 BRISK
デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか？ 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめました。 これらの技術はデザインに沿ってコーディングをする以上のものになります。 実務では工数が掛かるためあまり行われず、知っていても使う機会は少ないと思いますが、それでも抑えておくと自身のWeb制作への理解が深まると思いますので、興味のある方はご一読下さい。 それではいきます。 はじめに制作にあたり、複数のプラグインやライブラリを使用しています。 Webサイトで使われるプラグイン(ライブラリ)の多くが海外製となっており、最近ではIEを非対応としたプラグインもあります。 特に最近の制作環境の主流である
nth-childのカッコの中にプラスを使うのが地味に便利 | Travelogue
地味に便利なCSS3のセレクタの話。 使い慣れてないとあまりよく考えず別々のclassを割り当てたりしがちですが、使い慣れてくるととってもスマートにコーディングできてなんだか嬉しい。 例えばnth-child()。これ自体は前からよく使ってましたが、カッコの中にはただの数字をいれたり、evenやoddを入れたり、あとは3nみたいに倍数で指定したりという使い方でだいたい終わってました。 HTMLは普通にulのliで並べます。ulにはclearfixを指定しますがこれの説明は省略。 <ul id="list1" class="cf"> <li><img src="thumb.jpg" alt=""><p>てきすとてきすと</p></li> <li><img src="thumb.jpg" alt=""><p>てきすとてきすと</p></li> <li><img src="thumb.jpg"
背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法
背景画像をズームアップしながらフェードで切り替えるスライダーを実装する Swiper自体にはズームアップしながらフェードする機能がありません。そこでCSSを使ってズームアップ機能を追加します。 Swiperのファイルを読み込む 今回はCDNを使ってSwiperに必要なファイルを読み込みます。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 背景画像１ --> <di
2段階でアニメーションさせるスクロールエフェクト | oku-log
最近、よく見かけるスクロールすると文字とかの背景が横からブワッと出てきて、そのままブワッと消えて文字が現れるみたいなエフェクト。 例えばこういうのです。 https://tympanus.net/Development/BlockRevealers/ シンプルなレイアウトでも動きをつけることで単調にならないってメリットもあり、こういうエフェクトは重宝します。 実装する場合、いくつか方法はあるのですが今回は二つほど紹介します。 プラグイン「Block Reveal Effects」を使う方法 先ほどリンクを貼った「Block Reveal Effects」はcodropsで公開されています。 まずは以下のページの「Download source」から一式ダウンロード可能です。 https://tympanus.net/codrops/2016/12/21/block-reveal-effec
.htaccessを使ったよく使うリダイレクトまとめ
Webサイト公開後、.htaccessを使って旧ページから新ページにリダイレクトをかけます。何度も同じようなことをしているのですが、やはり忘れっぽいので、よく使うリダイレクトの書き方をまとめておきます。 私と同じような誰かのお役に立てれば幸いです。 私がよく使うリダイレクトは301リダイレクトのため、この記事のコードは全て301リダイレクトとなっています。302リダイレクトを用いる場合は、適宜変更してください。 0. .htaccessとは？1.あるURLから別のURLへのリダイレクト2.ディレクトリまるごとリダイレクト3.類似したファイル名のURLをまとめてリダイレクト4.特定のディレクトリをリダイレクトから除外する5.特定のファイルをリダイレクトから除外する6.wwwなし / ありを統一する7.https(SSL)のURLへリダイレクトまた、上手く動作しない場合のパターンも挙げてみまし
【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介 | HPcode（えいちぴーこーど）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="dist/css/swiper.css"> <title>Title</title> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/05/swiper01.png" alt="Swiper01"><
jQueryを使わないスワイプ対応のjavascriptスライダーSwiper の使い方 - Qiita
jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。 【使い方（Usage）】 GitHubから最新バージョンのSwiperをダウンロードする。 Swiper 下記をHTMLに記載 <head> .... <link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css"> <script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script> .... </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <!--First Slide--> <div class="swiper-slide"> <!-- ここに
カルーセルスライダーを条件別にスライド位置を変える - webプロダクトいんふぉ
カルーセルスライダーとは？ 画像やコンテンツがスライドして別のコンテンツを切り替えて表示する方法 DEMO Download ライブラリとしては、良くslick.jsやbxslider.jsが使われる 個人的にはslick.jsが使いやすい。カスタマイズする際、bxsliderはハマりやすい。その代わり、高機能。 今回はslick.jsを使用する。 slick-theme.cssは必須ではないですが、公式のdemoみたいな見た目にしたいのであれば入れた方がいいです。一応jQueryも読み込んでいます。 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> <link rel="stylesheet" type="text/css" href="css/s
これでもうアイコンがにじまない！ SVGのデータ作成で気をつけるポイント
下の図を見ると、imageAははっきり表示されていますが、imageBはぼやけています。 高解像度のRetinaディスプレイを搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 高解像度のRetinaディスプレイ※1※1Retinaディスプレイとは、Apple製品に搭載されているディスプレイの呼称のことをさす。を搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 SVG自体は1998年頃に開発されていましたが、Internet Explorerで標準対応されて
タッチデバイスにもCSSの:hoverを機能させる | Be Clue
タッチデバイス向けのサイトを作っていると、どうしてもぶつかる一つの壁、それが:hoverの挙動。以前に僕もその問題に直面し、改善したことがあったので、その経験をメモ。 Ads タッチデバイスの:hoverの挙動がおかしい マウスカーソルを乗せたときのスタイルを設定できるのが:hoverです。 PC向けのサイトだと実に多種多様なホバーアニメーションが実装されており、それらで遊んでいるだけで一日を過ごせる程にそのバリエーションは豊かです。 しかし、この:hover、タッチデバイスにも同じように適用すると少々挙動がおかしいです。指が離れてから:hoverで指定したスタイルが適用され、そのまま元のスタイルに戻りません。 特に問題なのはリンク要素（aタグ）に:hoverを指定した時です。リンク要素をタップしてもリンク先に推移せず、もう一度タップしないといけない場合が見受けられました。 これではユーザ
jQueryで上から降りてくるトグルメニューを作る５つのステップ
WEBサイトを作っていると、 レスポンシブ表示時のグローバルメニューをボタンクリックで表示・非表示を切り替えたい Q&Aなどのページで、ボタンクリックで一部のテキストの表示・非表示を切り替えたい テキストや画像ブロックをクリックで表示・非表示を切り替えたい といった、クリックで要素の表示・非表示の切り替えを行いたい機会が多々訪れます。 このような、クリックによる表示・非表示切り替え機能のことを「トグル（toggle）」と呼びます。 トグルには、 一瞬で表示が切り替わるもの フェードイン・フェードアウトで表示が切り替わるもの スライドイン・スライドアウトで表示が切り替わるもの といった複数の種類があります。 ここでは、トグルを実現するための全ての手順を紹介していきます。 【STEP1】jQueryライブラリの読み込み トグルメニューを実現するためには、jQueryを利用します。 まずは、jQ
スマホのハンバーガーメニューでpositionにfixedを入れてスクロールできなくなる問題を解決 | SHINGO IRIE
スマホでハンバーガーメニューを実装していたのですが、positionにfixedを入れていると位置が固定されてしまい、スクロールできなくなります。メニューの数が多くなるとスクロールできないため、メニューとして機能しなくなるという問題の解決法について。 下のようになっているような場合に発生します。 <nav> <ul> <li>メニュー</li> （中略） </ul> </nav> nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } こういう場合、navの下のulにoverflowを入れれば解決します。 nav ul{ height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling:
最近見かけるCSS3アニメーションを使ったトグルのメニューボタンを再現してみた | スターフィールド株式会社
最近、↓こちらのサイトのように、 Leen Heyne 47株式会社 | もっと暮らしやすくなるための日本づくり CSS3のアニメーションで３本線のアイコンから×のアイコンに切り替わるメニュボタンを見かけることがありました。 これまで私はメニューボタンの切り替えのとき、それぞれのアイコン画像を用意して切り替える方法をとっていたのですが、 CSS3を使った方法だと画像を用意する必要もなく、アニメーションも面白いと思ったので、 今後そちらを使えるようにしたいと思って、再現してみることにしました。 ↓こちらが作ってみたもの DEMO 方法 いくつか種類があるようですが、一番シンプルな「Leen Heyne」さんのものを今回は再現してみました。 方法は、CSS3のtransitionとtransformを使ってアニメーションさせます。 HTML
jQueryは使わない！ネイティブJavaScriptで実装してみた10選
よしだです。 最近夢占いに凝っています。夢占いとは見た夢によって自らの運気や精神状態、暗示を占うといったものです。 驚いたことに怖い夢や悪い夢は意外にもプラスな暗示を示していることが多いようです。ちなみに私が最近見た夢はトラの赤ちゃん×2と戯れる夢でした。 ところで、昨今JavaScript標準APIが充実してきたことやjQueryを不要とするJavaScriptフレームワークの登場により脱jQueryの兆候が見受けられます。 本記事ではJavaScriptの標準APIを使用してタブメニューや画像スライダー等Webサイトでよく実装されているものをサンプル付きで10種ご紹介します。 目次 タブメニュー アコーディオンパネル スムーズスクロール 画像ロールオーバー ハンバーガーメニュー モーダルウィンドウ 画像スライダー フェードイン・アウト パララックスアニメーション ローディングアイコン
スマホでフルスクリーンになるレスポンシブメニュー - yuri memo
今回は以下のようなレスポンシブメニューを実装しました。 ・モバイル時に、メニューをフルスクリーンで表示 ・メニュー開閉アニメーションはフェードイン／フェードアウト ・jQueryのfadeToggleなどは使わずに、classの付け外しをjQueryで行う デモはこちらです。 yuri memo - レスポンシブメニュー DEMO デモは、以下のような構成になっています。 HTML [ fade_menu.html ] CSS [ css/style.css ] jQuery [ js/jquery-2.0.0.min.js ] [ js/script.js ] HTML 順番にコードを載せていきます。 <body> <header> <h1 class="logo">yuri memo</h1> <!-- ハンバーガーメニュー部分 --> <div id="toggle"> <div c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
-webkit-overflow-scrollingを指定するときについでにやっておいた方がいいこと - Qiita
【レスポンシブ化】ハンバーガーとアコーディオンのコラボ | MaruMari Labo
https://blog.mismithportfolio.com/web/20150529scrollfixed
