jQueryを使わずにスライドメニューを実装しよう
jQueryを使わずにスライドメニューを実装しようスマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成まずは HTML と CSS で「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定などで、特に変わったことはしていません。 H
全くの初心者が独学でWeb制作できるようになるまでの効率の良い勉強の進め方
独学でWebデザインやコーディングなどのWeb制作スキルを身に付けたい方向けのノウハウを紹介します。 Web制作のテクニックを学ぶ方法は、 研修やセミナーで学ぶ方法 スクールに通って学ぶ方法 お金をかけずWebサイトや本を参考に学ぶ方法 の3つに大別できます。 しかし、研修やセミナーは開催地が都市部に偏っていますし、スクールに通うのは経済的な負担が大きいのも事実です。 そこでおすすめしたいのが自宅で学ぶ独学です。 筆者自身も全くの初心者の状態から独学でWeb制作のスキルを身に付けて今はそれをもとに仕事をしています。 独学中には勉強方法としての反省点や手ごたえを感じたことも多いです。 そこで、今回は筆者がWeb制作を独学する中で分かった、独学による効率の良い勉強方法についてお話しします。何から勉強をはじめていいのか分からなかった人の指針になるかと思います。 リアルなお話をしますが、独学ではじ
liquid_video
Client: KOKUYO Co.,Ltd. Project Management: Masato Yamaguchi (THE GUILD, Alpha Version Inc.) Art Direction: Chiharu Kodama (THE GUILD, ium inc.) / Yukiya Okuda (THE GUILD, Shouwakiden Inc.) Design: Konami Endo (THE GUILD, ium inc.) / Hana Ihara (THE GUILD, Shouwakiden Inc.) Development: Niwayama Naomoto / Kenji Wada (THE GUILD, Alpha Version Inc.) Illustration: SANDER STUDIO ルール？展 Organized by: 21
JavaScriptをめぐるパラレルワールド 〜Webデザイナーから見た今どきのフロントエンド事情〜｜dwango creators' blog（ドワンゴクリエイターズブログ）
どうも、ほそだです。ゴールデンウィークも終わり、暖かい空気を感じる季節になりました。 さてちょっと前に、こんな記事が話題になっていました。 You Don’t Need jQuery – Qiita （旧題：もうjQueryは必要ない） 元々は海外の方が書かれたものを日本語訳してくださったものですが、あらかた網羅されていて感服しました。実は今回、これと全く同じようなことをこのブログのネタにしようと考えていたのですが（jQueryでやってたことをjQueryを使わずにやってみた的な）、締切間近になってさあ書くぞってタイミングでここまで完璧なものを先に出されちゃったので、こりゃ勝てねえと泣く泣く断念したのですよね。。 それで急遽新たにネタを考えなきゃいけなくなったのですが、これに対するネット上での反応がけっこう興味深いなと思って見ていました。 「もうjQueryは必要ない」に関するみんなの反応
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
【イラストレーター 環境設定 Web DTP 切り替え】やっとできた！イラストレーター環境設定の保存 : ごろうTV
◆ #いきなりHTML 2（レスポンシブ対応） なんと！スライスもコーディングも全自動！イラレからHTML+CSSへ一発出力します ◆ デザイン業界にもRPA！オリジナルスクリプトで時短革命 こんなにラクしてイイんです！お見積もり無料！お気軽にご相談ください ◆ 10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識 イラレ使いにこれ1冊！ホントに10倍ラクできます ■ ご注意 ■ 当方で公開しているスクリプトは、Mac のみ、macOS High Sierra ＋ Illustrator 2020（24.3）までの検証となります。これ以降の macOS や Illustrator のバージョン、Windows での検証はできかねますので、ご注意ください。
わたしが広告を掲載しない理由
このサイトに始めて訪れた方は、広告がないことに気付いたでしょうか？ 以前から読者である方のなかには、このサイトにはなぜ広告がないのか不思議に思っている方もいるかもしれません。現在の Web 広告には以下 5 つの問題を抱えていると考えており、掲載を控えています。 技術の問題 ユーザー体験の問題 デザインの問題 コンテンツの問題 モラルの問題 読者の足を引っ張る広告たち 何度か広告ネットワークから掲載オファーをいただいたことがあります。多くの場合、複数の JavaScript を埋め込む必要があり、パフォーマンスへの多大な影響がでることから掲載を断っています。うちのような小さなサイトであれば大きな変化はないかもしれません。しかし、ちょっとしたパフォーマンスへの負債が積み重なれば読者への影響も多大なものになります。 上記の数値は、ある有名な日本のブログメディアのトップページのファイルサイズとリ
Post by @ficc-workbook
簡単にいえば、JavaScript版 mediaqueryです。 https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia windowサイズに応じてJSの処理を書き分けることができます。
これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング
レスポンシブテーブルという言葉をご存知でしょうか。テーブル（表組み）に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。 レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。 いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている
2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ
Webデザイナーはコードを学ぶべき？ コーダーはデザインを学ぶべき？ 両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。 A brief history of web design for designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 先日の彼らの記事「しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。 1989年：Webデザインの暗黒時代 1995年：Webデザインの始まりはテーブルから 1995年：JavaScriptが表現の幅を広げる 1996年：Flashにより自由の黄金期へ 19
HTMLやCSSを知らなくても簡単にWebサイトが作成できるMac用Webエディタ「Blocs」がリリース。
Mac App Storeには現在申請中だそうですが、NormさんのWebサイト”Ui Store“では既に$49.99で販売が始まっており、トライアル版もダウンロード可能です。 使い方 使い方は非常に単純で、ユーザーはページを作成し、決められたBlocを編集していくだけです。まず、Blocを追加し、 次にBlocのスタイルを選択します。BlocはBricという要素に分かれており、各Bricは画像や動画、テキスト、リンク、見出し、フォーラム、ミュージックなどに変更可能です。 また、Bric要素の編集はサイドメニューから行います。 Bricの編集が終わったら、新たにページを増やすために右上の[+]ボタンか、メニューバーの [Page] > [New] からページを追加します。流れはメニューバーにある順番[File] > [Page] > [Bloc] > [Bric] で行えばわかりやすいと
Front-end Tooling Workflows
~ 198 slides on tools to help you stay productive on the front-end.
uilang
a minimal, ui-focused programming language for web designers clicking on ".try-it" toggles class "hidden" on ".info-box" Try It Getting Started Insert uilang.js in your page, write some uilang as shown above in a simple <code> element and use CSS to show, hide and animate things. Download 1KB Build Interfaces Create popovers, tabs, galleries, overlays and more using a language specifically designe
Choosing Vanilla JavaScript
A lot of JavaScript developers out there, myself included, love jQuery. And rightly so! Like any great tool, it makes our lives easier. When building something with a large amount of front-end code, like a robust site or application, jQuery is a powerful ally. However, if you’re building a small- to medium-sized library, you should seriously consider using vanilla JavaScript. Sometimes it makes se
【Labs】CSSだけでドロップダウンメニュー
こんにちは（・∀・） CSSだけで作ってみましたシリーズです。今回はドロップダウンメニューをご紹介します。通常のドロップダウンメニューとtransitionプロパティで動きのあるドロップダウンメニューの横バージョンと縦バージョンの4タイプです。 transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなり、表示している矢印も表示されなくなります。 1. 横並びドロップダウンメニュー 横並びで表示するドロップダウンメニューのサンプルです。 ① 通常のドロップダウンメニュー HTML <ul class="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Strategy</a> <ul> <li><a hr
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Framerで動くモックアップを簡単作成
ツクロア - DESIGN LAB
CSS Nite LP47「Coder's High 2016」
http://www.polymer-project.org/tools/designer/