読者です 読者をやめる 読者になる 読者になる

アプリ魂

はじめてのプログラミング生活

新しいはてなブックマークボタンのステッカーを手にいれた♡

新はてなブックマークボタン公開CPのステッカー賞に当選したーめちゃカワイイやつ(ノ△・。) #はてなブログ pic.twitter.com/CgYGgrItkD — アプリ魂@はてなブログ (@appdamacy) 2017年3月20日 @appdamacy MacとiPhoneにぺたりと貼ろうかな。。。どこかで見かけた…

気持ち伝わる絵文字アイコンフォント「Speakemoji」がとっても可愛い!

こんばんはアプリ魂(@appdamacy)です。今日は可愛い絵文字のアイコンフォント「Speakemoji」を簡単な使い方と併せて紹介していきます。 Speakemojiの特徴 Speakemojiで使用できる絵文字の種類とサイズについて説明します。 48種類の絵文字 クラス名:.se…

綺麗で見やすいリファレンスサイト「HTML Reference・CSS Reference」がおすすめな理由!

@appdamacyです。今回はHTML・CSSを学習し始めたばかりの初心者でも使えるリファレンスサイトを紹介します。 頻繁に使うことのないものは使用するときのルールを忘れてしまいがちなので、困った時はこれから紹介する2つのサイトを活用してみてください。 HT…

人工知能でタイピングの練習ができる「Typing Bolt」を使ってみた!

@appdamacyです。今日はタイピング練習サービス「Typing Bolt」を使ってみました。普段からパソコンを使う習慣があるのでキーボードを見なくてもタイピングはできるのですが、特定の指しか使っていない我流タイピング・・・毎日ちょこちょこやって矯正してい…

Amazon2段階認証のSMSが届かないから「認証アプリ」を登録して設定する方法を調べてみた!

@appdamacyです。Amazonの2段階認証を設定しておいた方がいいかなと思ったので、実際に設定してみました。 ときどきテキストメッセージ(SMS)が届かない不具合がおきるみたいで、タイミング悪く認証アプリを使った設定をすることに・・・難しかったので自分…

無料で商用利用可能な写真素材を検索できる「CC Search」を育てよう!

@appdamacyですペコリ(o_ _)o)) ブログを書いているとクオリティの高い写真を使いたい欲がでることがあります。何日か前にクリエイティブ・コモンズから新しい画像検索サービスがでたというニュースを見たので調べてみました。 ちなみにクリエイティブ・コ…

【初心者向け】レスポンシブ対応のCSSフレームワークは「Responsive Grid System」がオススメな理由

@appdamacyですペコリ(o_ _)o))今日は初めてレスポンシブデザインのWebサイトを作ったときに役立ったCSSフレームワークを紹介します。 趣味でWeb制作を勉強している人や学習を始めたばかりの人向けです。 Responsive Grid Systemとは CSSフレームワークとい…

【ブログ高速化】一括で劣化なく画像を圧縮できる「TinyPNG」の使い方!

2ヶ月くらい前からブログを投稿する前に画像を圧縮しています。最近はどこのサイトでもスマホユーザーの割合がぐっと増えていると思うので軽量化は必須事項です。ということで私が普段から使っている画像圧縮ツールについて今回は書いていきます。 画像圧縮…

今が当てどき?抽選で「PS4・PS VR」が当たるキャンペーンが実施中だから応募してみた!

@appdamacyです。世の中がNintendo Switch(ニンテンドースイッチ)で持ち切りになっている裏で「PlayStation4の本体」やバーチャルリアリティを体感できる「PS VR」が抽選で当たるキャンペーンが始まっています。VRは発売日から入手困難な状況なのでいっそ…

paizaさんからAmazonギフト券・500円分が届いたよ!

こんばんは@appdamacyです。月初めに開催されていたpaizaラーニングの独立オープンキャンペーンでAmazonギフト券・500円分が当選しました。 こんなの当たったことないから嬉しいー!アマゾンで何を購入するときに使わせてもらおうかワクワクです。 上の記事…

【138日目】jQueryでドロワーメニューを開閉させてみた

@appdamacyですペコリ(o_ _)o))「toggle」という便利なメソッドを知り、やっとドロワーメニューを自由に閉じたり開いたりできるようになりました。ハンバーガーメニューを押してアクティブになったときの横幅がピクセル指定なのでまだレスポンシブになって…

【137日目】ドロワーメニューを開閉させるボツコード

@appdamacyですペコリ(o_ _)o))今日はドロワーメニューを作ろうと思ってあれこれ試行錯誤したもののカタチになりませんでした。寝る前にもう一度自分で書いたコードを振り返ってみると理解できていない部分が浮き彫りになりますね。 クラスを追加するパター…

【136日目】コーポレートサイト風のシングルページとハンバーガーメニューをCSSで作ってみた

@appdamacyですペコリ(o_ _)o)) 今回は1ページだけのシンプルなコーポレートサイト(風)を作ってみました! GitHubに全てのコードを置いています day136.html · GitHub day136.scss · GitHub これまではアイコンフォントでハンバーガーメニューを表示して…

【135日目】カード型デザインのスライダーを作ってみた

@appdamacyですペコリ(o_ _)o)) 今日はカード型デザインのスライダーを作ってみました!スマホで右に左にコンテンツを閲覧できる感じのやつです 縦はぜんぶVHで指定して全画面に対応させる ウェブサイトでもアプリっぽい全画面コンテンツを作ってみたいとい…

【133日目】このブログが「レバテックキャリア」で紹介されました!

@appdamacyですペコリ(o_ _)o)) 過去にも何度かブロガーさんに紹介してもらったことのある当ブログですが今回はなんと転職エージェントのレバテックキャリアさんのサイトで紹介されました! ぱちぱち〜ぱちぱち〜!! 実際に作ってみた!ゲーム開発ができる…

【132日目】JavaScriptで簡単なスライダーを作ってみた

@appdamacyですペコリ(o_ _)o)) 今回は念願のスライダーを作ってみました! スライダーに関してはプラグインを使ったことがあってもどうやって動いてるのかは全く理解できず(=ω=;) GitHubにあがってるコードをたくさん読んでスライダーに必要なポイントを…

【131日目】10秒ですぐやる人になってすべてを手に入れる

@appdamacyですペコリ(o_ _)o)) 今日で一月も終わっちゃいましたあと11ヶ月しか残っていないと思うと時間はいくらあっても足りないなぁ。。。 立て続けに自分のまわりで不幸が起きて時間の使い方を考えさせられるこの頃ですが頭のなかであーだこーだ考える…

【130日目】モリサワのフォント製品「MORISAWA PASSPORT ONE」を買ってみた

@appdamacyですペコリ(o_ _)o)) 以前から気になっていた「MORISAWA PASSPORT ONE」を買ってみました。 アマゾンだと5000円くらい安くなっていて45000円くらいでゲットできました。といっても値段が値段だけに購入ボタンを押すまでためらってしまったけど(…

【129日目】ボタンを作ってみた#3

@appdamacyですペコリ(o_ _)o)) 今日はグラデーションのかかったボタンを作ってみました。マウスホバーすることでグラデーションが右から左へと移動します。あらかじめ大きめのグラデーションを用意してはみ出した部分を「overflow:hidden」で隠しています…

【128日目】プロフィールを作ってみた#2

@appdamacyですペコリ(o_ _)o)) 淡い色あいでカッコいいプロフィール欄を作ってみたくなって作ったものです。最終的にはホバーエフェクトやアニメーションが重要だなと感じたので勉強しなければと感じました。 RESULT HTML CSS

【127日目】ナビメニューを作ってみた#1

@appdamacyですペコリ(o_ _)o)) jQueryの書籍を読んで基礎を学んだので簡単な動きをするナビメニューを作ってみました。 RESULT HTML CSS jQuery

【126日目】見出しを作ってみた#1

@appdamacyですペコリ(o_ _)o)) 今日はウェブサイトのワンポイントとして使われるような動きのある見出しを作ってみました。ページを開いたら別の色をもったテキストが左からゆっくりと表示されていく仕様です。 動作のタイミングについては、キーフレーム…

【125日目】有料の日本語フォントが欲しくなってきた

@appdamacyですペコリ(o_ _)o)) まずはじめにお知らせですが、先週から毎日取り掛かっていた作ってみたシリーズを公開しました。 自分で書いたコードだったり作ったデザインをまいぴーしーに保存していてもなんの意味が無いので表に出していこうと思ったの…

【124日目】ボタンを作ってみた#2

@appdamacyですペコリ(o_ _)o)) 今回はグラデーションをつかったボタンを作ってみました。右端の色は白に近いので、背景が画像だったり濃い目の色のときに使うのが良さそう。ホバーエフェクトを活用する練習をしていきたいです。 RESULT HTML CSS

【123日目】プロフィールを作ってみた#1

@appdamacyですペコリ(o_ _)o)) 少し前にプロフィール欄を新しくしたのですが、そのときにボツになった案を手直ししてみたものです。横長の大きめのプロフィール画像はヘッダーデザインと被ってしまうので採用しませんでした。 RESULT HTML CSS

【122日目】引用を作ってみた#1

@appdamacyですペコリ(o_ _)o)) 今回は引用部分をデザインしてみました。はてな公式のテンプレートをカスタマイズしていますが、引用部分についてはデフォルトのままでした。本文との違いが明確でありつつもシンプルにまとめています。フォントサイズは2px…

【121日目】ボタンを作ってみた#1

@appdamacyですペコリ(o_ _)o)) 今回はボタンをデザインしてみました。ポップなデザインに合わせて丸っこい可愛らしいフォントを使っています。ちょっとだけ色を抑えて安っぽさを消しているのがポイントです。 RESULT HTML CSS

【120日目】HTMLテンプレートを作ってみた#1

@appdamacyですペコリ(o_ _)o)) これからは書いたコードだったりデザインを公開していきたいと思っています。今回は記事一覧画面で使えそうなコードを書いてみました。画像の拡大・縮小が甘い気がするので重点的に技術を磨かなければいけないなと感じました…

【119日目】transform:skewで背景画像に傾斜をつけてみた

HTML CSS POINT @appdamacyですペコリ(o_ _)o)) 今回は背景画像に傾斜をつける表現に挑戦しました。 というのもコンテンツの区切りが斜めにスパーンとひかれているオシャレなサイトをよく見かけるので、いちどやり方を覚えておきたかったのです。 実際に傾…

【118日目】CSS3で背景画像に透過グラデーションをかけてみた

@appdamacyですペコリ(o_ _)o)) 今日は画像の上に透過グラデーションをかける方法を学びました。Photoshopなどの画像編集ソフトを使わなくてもさくっとCSSで実装できるのが便利ですね。 RESULT 今回はわかりやすく強めにかけてみました。グラデーションの色…

【117日目】コンテンツの高さをVHで指定して全画面表示してみた

@appdamacyですペコリ(o_ _)o)) ここ最近はウェブサイトのつくりかたを学ぶのにはまっています。「あれどうやってつくられてるんだろう」をどんどん解決していきたいなー。 コンテンツの高さをVHで指定 横幅をいっぱいに広げる時は「width:100%」を指定して…

【116日目】Wi-Fiルーターが不安定だから「BUFFALO WSR-300HP」に買い替えた

@appdamacyですペコリ(o_ _)o)) Wi-Fiルーター「BUFFALO WSR-300HP」を購入しました。ずっと前から買い換えようと思いつつも、まだ使えるし勿体無いと渋っていたのですが、あまりの不安定さに根負けしちゃった! Wi-Fiルーターが不安定な原因 ●古いWi-Fiル…

【115日目】新年のご挨拶【2017年】

@appdamacyですペコリ(o_ _)o)) 年があけて1月も中頃になりすこし落ち着いたので本日からブログの更新を再開していきます。久しぶりの投稿にワクワク! 下書きに徹する日々 年末から忙しくなってしまったので学習する時間を確保するためにブログの更新を切…

【114日目】サイドバーにプロフィール欄を追加してみた

@appdamacyですペコリ(o_ _)o)) 今年に入って趣味にかけられる時間も増えてきました。そろそろリアルタイムでの更新も復活できそうなのでブログのデザインを改善しました。 Before ロゴの下にあったプロフィールへのリンク。しまってみえるけどなんだか重た…

【113日目】CSS3で無限回転するアニメーションをつくってみた

@appdamacyですペコリ(o_ _)o)) あんまり回転させることってないけど以外に簡単に実現できたのでメモ。 要素を無限に回転させる keyframesを初めて知りました・・・明日も練習がんばりますペコリ(o_ _)o))

【112日目】jsoffでJavaScriptをオフにして速くよみこむ

@appdamacyですペコリ(o_ _)o)) JavaScriptをきったままサイトをまわっているとびっくりするくらい速いことに気づきました。 頻繁に見るサイトはStylishをつかって読み込みに時間がかかる要素を消すことができますが、はじめて訪れるサイトはそういう訳には…

【111日目】Stylish(Chrome拡張機能)で自分好みのサイトにする

@appdamacyですペコリ(o_ _)o)) Chrome拡張機能を漁っているなかユーザースタイルシートを簡単に管理できるStylishを発見。 予めCSSを設定しておくことで閲覧するサイトを自分好みのデザインに変更することができます。練習にもなるのでおもしろい。 もちろ…

【110日目】AutoprefixerでCSSを最適化してみた

@appdamacyですペコリ(o_ _)o)) 今日はブラウザごとに指定する必要があるベンダープレフィックスの有無を自動で判断してくれるAutoprefixerをつかってみました。 Autoprefixer適用前 Autoprefixer適用後 必要なベンダープレフィックスが追加されました。逆…

【109日目】要素を順番に表示させてみた

@appdamacyですペコリ(o_ _)o)) 今日はjQueryをつかってフェードインする方法を学びました。 明日も練習がんばりますペコリ(o_ _)o))

【108日目】jQueryでアニメーションさせてみた

@appdamacyですペコリ(o_ _)o)) 今日はjsを簡単にかけるjQueryに触れてみました。 3番目のボックスを下にアニメーションさせる ブラウザ上で自由に動かせることができるのが新鮮でたまらない。今後はもっと複雑なことにも挑戦していきたいです。 明日も練習…

【107日目】JSで背景の色を変えてみた

@appdamacyですペコリ(o_ _)o)) 今日はjavascriptをつかって要素の色を変えてみました。 クリックすると背景の色が赤に つくってから気づいたけどCSSだけでも簡単にできそう。 明日も練習がんばりますペコリ(o_ _)o))

【106日目】CodecademyのJavaScript入門 #6

@appdamacyですペコリ(o_ _)o)) 今日はユーザーの入力内容によって進行が変わるというプログラミングを学びました。シュミレーションゲームとかと同じ感じかな。 明日も練習がんばりますペコリ(o_ _)o))

【105日目】CodecademyのJavaScript入門 #5

@appdamacyですペコリ(o_ _)o)) 基本的な部分を学習する「Getting Started with Programming」を全て終了しました。 無料で学べるのでこれぐらいかなと思ってシラバスをみるとまだまだ先が用意されていてビックリ!他の言語もあるのでしばらく遊べそうです…

【104日目】CodecademyのJavaScript入門 #4

@appdamacyですペコリ(o_ _)o)) 今日はif〜else文と文字列の指定した部分を取り出す方法を学びました。 明日も練習がんばりますペコリ(o_ _)o))

【103日目】CodecademyのJavaScript入門 #3

@appdamacyですペコリ(o_ _)o)) HTML上に返すときにはdocument.write("")をつかっていたけど、今回はconsoleをつかってコンソール上に文字列を返してみました。 デバックをするときに便利ということらしいけど詳しいことはまだよくわかってないのです。

【102日目】CodecademyのJavaScript入門 #2

@appdamacyですペコリ(o_ _)o)) まさかたった一行でウィンドウにダイアログを表示できるとは知らなかった!さらにpromptをつかうと入力ができるので閲覧するためのパスワードを入力させるみたいなこともできるそうです。

【101日目】CodecademyのJavaScript入門 #1

@appdamacyですペコリ(o_ _)o)) 海外のプログラミング学習サービスを調べていたところCodecademyを知りました。JavaScript入門があったのでしばらく淡々とこなしていきたいと思っています。 今日はHTML上での文字列の表示とその文字数を調べる方法、簡単な…

【100日目】PHPで簡易掲示板をつくってみた #2

@appdamacyですペコリ(o_ _)o)) 今日はフォームとデータベースを接続して入力できるようにしました。 フォームにデータを入力 入力したデータを表示 これで簡易掲示板ができあがりました。データを受け渡すことができるだけで、できることが増えそうだなと…

【99日目】PHPで簡易掲示板をつくってみた #1

@appdamacyですペコリ(o_ _)o)) これまでのデータベースをそのままつかって、PHPで投稿するプログラミングを書いています。フォームの作成と既にデータベースに入っている記事の表示をおこないました。 whileで繰り返しながらデータを取り出せるのは本当に…

【98日目】PHPでデータベースを動かしてみる

@appdamacyですペコリ(o_ _)o)) 今日は管理画面で遊んでいるだけでは楽しくないので実際にPHPファイルを動かしてみました。 PHPからデータベースに入力してみる 実行したあとのデータベース 実行した数だけ追加されているのがわかります。今回はテストなの…

2016 アプリ魂
Powered by Hatena Blog.