2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事内容は3年以上前のものなので、記事内にあるアプリケーションなどの動作やUIは実際と異なる可能性があるのでご注意ください。 (2023/01/04追記) iPadでプログラミングwwwアホちゃうかwww ワイ「え？お前全部iPadでプログラミングしてんの？そんなん効率悪いに決まっとるやんw」 ワイ「せいぜいでっかい画面でGithubのコード眺めるくらいしかできないやろwてかハイライトすらないんじゃn」 ?!(Monokaiで表示されとるやんけ...) ワイ「おっ、おう。シンタックスハイライトくらいはできるんやな。」 ワイ「まあ

社内向け勉強会で作ったスライド ※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです！

私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで

ざっくりとこんな認識で問題ないかと思います。 書きながらなんとなくつかめていきたいと思います。 いざ開発開始！ というわけでそろそろ開発に移りたいと思います。 新しいPENを作成する codepenでは一つ一つのプロジェクトをpenと呼びます。 それを作っていきましょう。 をクリックして新しいPENを作ります。 (この記事の画像をクリックしても作成できます) 新しいPENに名前をつける 画面左上の「Untitled」の隣のアイコンをクリックして名前をつけます。 一度保存する ここで一度保存します。 このボタンをクリックして保存します。 と表示されたら自動保存が有効になっているので次からあまり気にしなくて済みますね。 文字を表示する とりあえず一番無難な文字の表示を行いたいと思います。 ただし、文字と言っても何種類もあるのでそれぞれ試していきたいと思います。 pタグ pタグは段落を示します。

5年間コードを書き続けたエンジニアが、新人に読んでもらいたい11冊+αを紹介する 新人エンジニアのうちに読んでおくと役立つ名著やおすすめの本を紹介。開発全般やコーディングなどの作法を学ぼう。 某社でサーバサイドエンジニアをしている @ikenyal と申します。開発言語は主にPHP。新卒入社から5年、エンジニアとして働いています。学生時代にもプログラミング、サーバ・ネットワーク構築や運用を経験しました。 これまで、社内外で新卒からベテランまで多くのエンジニアを見てきました。その中で、新人のうちに身につけておいた方が良いだろうと思うものは「お作法」と「基礎知識」です。 プログラミング言語やシステムの専門的な知識は後からでも勉強できます。一方で、さまざまな自己流の癖は時間が経つと身に染みついてしまい、指摘されても直すのが難しくなってしまいます。そのため、新人のときに良いお作法を勉強しておくこと

こんにちは、開発部長でエンジニアの青柳です。 皆さんはコーディング用のフォントに何を使っていますか？ 私は全くこだわりがなくて、OS に標準で用意されているMSゴシックや Ubuntu Monospace をいつも使っています。どんな環境でも開発してみせる！との思いから「こだわらないのがこだわり」なんて妙なこだわりがあったりするのですが、もしかするとフォントを変えるだけで開発効率がグッと上がったりするのではないかと、ちょっと考えなおしてコーディングに適したフォントを探してみることにしました。 コーディングに適したフォントとは ところでコーディングに適したフォントとは、どんなフォントなのでしょうか？ よく言われるのが文字の視認性が高いフォントです。 例えば、1（イチ）I（アイ）l（エル）や、O（オー）0（ゼロ）の判別がしやすいフォントです。これらの文字が判別しにくいと、読み取りミスや入力ミス

はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず

JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、**それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、**使用してはいけません。 ==、!= ==と!=を使用してはいけません

［Chapter1-02］ Git機能を提供するWebサービス ファイルの変更、追加、修正などを管理する場所である「リポジトリ」は、自分のPCにも、ネットを介したサーバ上にも作成できます。サーバを設定するには専門知識を必要としますが、サーバ機能を提供してくれる便利なWebサービスのひとつがBitbucketです。 2015年6月24日／TEXT：大串 肇 使用するコマンド ――――――― $ git --version ――――――― ■ローカルリポジトリとリモートリポジトリ 前述（Chapter1-01）したように、Git によってバージョン管理を行う場所として指定した場所を「リポジトリ」といいます。自分ひとりだけで開発・制作、バージョン管理を行う場合は、リポジトリは自分のPCにあればよいでしょう。しかし、リポジトリをサーバに用意して、ネットを介してどこからでも利用したい、あるいはチーム

プログラミングを学ぶことは簡単なことではありません。それは誰でも知っていることです。 ですが、残念ながら「プログラミングは簡単！」といった文句でビジネスをしようとするマーケターはたくさんいます。彼らのプロダクトを使えば、あるいはそうなるのかもしれませんが。 Hearing the WWDC keynote say coding isn't hard frustrates me. It's extremely hard. You're setting beginners up for huge disappointments. — Tyler McGinnis (@tylermcginnis33) 2016年6月13日 WWDCキーノートで「プログラミングは難しくない」と言っているのは本当に腹が立ちます。ものすごく難しいですから。初心者を騙してがっかりさせるだけです。 誰かがあなたに対してプ

まえがき JavaScript、書いてますか？ JavaScriptは今や世界中の人々に愛されています。 stackoverflowの2016年の調査によるとJavaScriptは地球上で最も一般的に使用されているプログラミング言語だそうです。 JavaScript is the most commonly used programming language on earth. Even Back-End developers are more likely to use it than any other language. link しかしJavaScriptは愛されすぎているが故、しばしば黒魔術のようだと比喩されることも少なくありません。 愛と憎しみが紙一重とはこのことですね。 ということでそんなこんなはどうでもいいのですが、自分もJavaScriptは大好きです。 今回は黒魔術まと

ここではコーディングスタイルを考える上で、ES6（ECMAScript2015)の以下の特徴に注目して考察するものです。 変数宣言は、constを基本とする クラス宣言文や関数宣言文はブロックスコープ 文字列では、テンプレートリテラルを活用する ジェネレータのために、複数の構文が拡張された また、以下の基準を採用していることを特に触れておきます。 ES5コードの混在、ES5時代のスタイルとの互換性は取らない ES6 modulesが存在しない状況で適用可能なスタイルを取る 視認性を犠牲にコーディング時のミスの影響を隠蔽するスタイル(ヨーダ記法など)は取らない 局所視認性より、全体視認性での高さを重視する 微妙に違うものを区別しやすいスタイルにする 同じものは同じスタイルを取る 一覧しやすくコンパクトに書ける方を採用する 変数宣言は、constを基本とする ES6では再代入を認めないcons

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

ドーモ、デザイナーのigguです。 ドワンゴでもっぱらエンジニアと連携しながらWebサービスやツールのUIをデザイン/実装したりしています。 今日のお話 僕は2012年8月ごろから3年間ほどSublimeTextを使っていました。その前はDreamweaverです。DreamweaverにおけるGUI中心の環境はマウスとキーボードを行き来する場面が多く、ストレスになっていました。加えてSASSやLESSのメタ言語を使い始めていたのでそれが扱えるキーボード主体で高速なエディタが無いかなーと探していた所でSublimeTextに乗り換えたわけです。 からの・・・約2ヶ月前でした。 そろそろSublimeText飽きたなーと思っていた所に、以前Betaを試したっきり放置していたAtomがにわかに盛り上がっている模様をキャッチ、物は試しとメインエディタをSublimeText (以下Sublime

こんにちは。 新卒デザイナーのshikaです。 入社から早くも3か月が経ちました。仕事をする上で「高いクオリティ」と「限られた時間」との両立がどれほど大変かということを、強く実感しています。学生の時は時間に余裕もあり、ポートフォリオを作る時も自由に時間を使えました。Webページの制作にもCSSを生のまま書いていたのですが、コーディング作業の効率化をしようと思い、以前から気になっていたSassに手を出してみました。 その結果、ある程度使えるようになったので、Sassの導入方法や初歩的な部分を解説してみようと思います。 Sassって？ Sassとは、「Syntactically Awesome StyleSheet」の略です。直訳すると構文的に、凄い、スタイルシート…？ とりあえず、いろいろ便利になったCSSというイメージで大丈夫だと思います！ Sassは2種類の構文で構成されたスクリプト言語