はてなブックマーク

プログラミング 【jQuery】シンプルなニュースティッカーが簡単実装！jquery.simpleTicker.jsの使い方 ニュースティッカーとはニュースティッカーって何っていう人もいると思うんだけど 下からテキストがシュルッと出てくるものだよ。 この機能の用途としては お知らせ、ニュース、新着情報などを掲載する時に使えるよ。 この機能を簡単にシンプルに表示できるのがjquery.simpleTicker.jsだよ。 サンプルデモページを用意したから見てみてね。 サンプルデモページはこちら simpleTickerの使い方ファイルのダウンロードまずはjQueryの設置をするよ！ jQueryの公式サイトからファイルをダウンロードしてね。 jQueryの公式サイトはこちら 次にjquery.simpleTicker.jsを入れるために GitHubからダウンロードするよ。 jquery.s

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！ わたくしラファエロは１０年近くMacBookを愛用しているのですが、これまでMacBookの不具合や故障とは無縁だったので修理などに出したことがありませんでした。 ところが、2016年頃に買ったMacBook Pro（2015年モデル）が購入から3年ほどでバッテリーに不具合が起き急に充電できなくなり、初めてApple Storeでバッテリー交換をしてもらいました。 その際にApple Storeを利用して良かったことやApple Storeの店員さんから教えてもらったバッテリー交換についての豆知識などなど、色々とありますのでザッとまとめてみました！ まず素人では自分で交換することはできないバッテリー交換が必要になった場合、大体の人はまず「自分でも簡単に交換できるのか？」と考えるのではないでしょうか。 ネットでMacBookのバ

ドロワーメニューとはドロワーメニューは、スマホサイトでよく使われるメニューの表示手法で ボタンをクリックすると 横や縦からメニューがシュッと現れるものだよ。 サンプルページで確認してみてね。 サンプルデモページはこちら ちなみにクリックするボタンは 横棒三本のアイコンが使われる事が多くて このことをハンバーガーメニューと言うよ。 それでは実際にDrawer.jsを使って ドロワーメニューを実装してみよう。 必要なファイルの用意ファイルのダウンロードまずはjQueryの設置をするよ！ jQueryの公式サイトからファイルをダウンロードしてね。 jQueryの公式サイトはこちら 次にDrawer.jsを入れるよ。 公式サイトからダウンロードしてね。 Drawer.jsの公式サイトはこちら まずは「Step 1: Link required files」の 「Download」という項目から 「

ここ数年、Web制作で当たり前のように耳にするようになった「モバイルファースト」。 特にこのモバイルファーストを加速させたのがGoogleが検索エンジンに実装した「モバイルファーストインデックス（MFI）」です！ Web制作に関わる人間ならば知ってて当たり前になりつつあるモバイルファーストインデックス（MFI）ですが、ちゃんと理解していますでしょうか？ 今回はモバイルファーストインデックス（MFI）についての基本やあれこれを解説しようと思います！ MFIはインデックスに関わるプロセスGoogleの検索エンジンは大きく分けて「クロール」「インデックス」「ランク付け」の3つのプロセスからなっています! ※ここが分からないという方は、まずSEOの基礎部分から学びましょう。 スマホの普及によりモバイル検索が圧倒的に多くなったため、Googleはクロールとランク付けに関わる対応はしてきました。 モバ

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！！ HTMLのタグには「デフォルトCSS」と呼ばれる、ブラウザに組み込まれたCSSがはじめから適応されているのをご存知でしょうか？ 例えば、見出しをh1タグでマークアップするとfont-sizeでサイズ指定した訳じゃないのに大きなフォントサイズで表示されますよね？ またliタグにはlist-styleを指定した訳じゃないのに文頭に「・」が付いていたり、pタグにmarginを指定した訳じゃないのにmarginが付いていたり… これがデフォルトCSSなんですが、結局のところ自分で書いたCSSで上書いてしまうので邪魔なんですよね(^^;) さらに面倒くさいのが、ブラウザごとに差異があること… ブラウザごとに見え方の違うWebサイト作るわけにはいかないですよね。 ということで、今回はデフォルトCSSの影響を受けずにコーディングするために

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！！ 最近ではテレビなどでも大活躍の超人気YouTuberヒカキンさんが大のApple製品好きってご存知でしたか？ ヒカキンさんは日本でスマホが普及し始めたばかりの2010年6月24日のiPhone4発売日に購入するほど、昔からのApple製品好きなんです！ これまでにもiPhone、Mac、Apple Watchなどの数多くのApple製品に関するレビューや開封動画をアップし、「Apple信者」を自称するほどApple愛がハンパないヒカキンさん笑 平成も終わり令和に元号が変わるということで、今回は平成のライフスタイル変えたといっても過言ではないApple製品のこれまでの進化をヒカキンさん動画でチェックできるまとめ記事を作成いたしました！

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！！ つい最近、Webデザイン初心者の友人からこんなことを言われました。 「CSSでレイアウトしたいんだけど、ネットで調べてみるとfloatとかFlexboxとか出てきて意味わかんない(T ^ T)」 確かにCSSでのレイアウト方法を検索してみるとfloatを使った方法とFlexboxを使った方法が混在していて、Webデザイン初心者には分かりづらいですよね(^^;) ラファエロは断然Flexboxを使った方法をおすすめしていますが、実際のところfloatとFlexboxのどっちが簡単なのかサンプルコードを用意したので比較みましょう！ *{ margin: 0; padding: 0; } nav{ border-top: 8px solid #79BD9A; background: #A8DBA8; } nav ul{ overf

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！！ Webデザインって、結構大変ですよね。 サイト全体のデザイン考えて、配色も考えて、フォント選んで、コーディングして… 初心者には難しすぎる！！ ということで、今回は… 初心者の方でもWebデザインを楽にするコツと便利なサイトを紹介いたしますので、ぜひ参考にしてみてください！ デザインはギャラリーサイトを参考に！良いデザインをするためには、とにかく良いデザインをサイトをたくさん見て参考にするのが一番！ そこで良いデザインのサイトを集めたギャラリーサイトを活用しましょう！ 縦長デザインのギャラリーサイト「MUUUUU.ORG」 https://muuuuu.org/ こちらのサイトは、クオリティが高い縦長のサイトを厳選して集めている「MUUUUU.ORG」というギャラリーサイトです。 スマートフォンの普及に伴い縦長デザインの需要

どうも、ジャングルオーシャンのミケです。 今日はAdobe Illustrator CC 2019でガイドを設定する方法を紹介するよ。 ガイドとは ガイドはIllustratorでオブジェクトなどを配置する時に使う線のことで 配置の目安になるものだよ。 表示状態で書き出しても一緒に書き出されることはないからどんどん使っていこう！ ガイドの設定 ガイドの設定はメニューバーの 「Illustrator」＞「環境設定」＞「ガイド・グリッド」 から設定できるよ。 設定できる項目は2つ。 カラーとスタイルが設定できるよ。 ガイドを作成する定規からガイドを作成する定規からガイドを作成するには まず、定規が非表示になっている場合は定規を表示させよう。 メニューバーの「表示」＞「定規」＞「定規を表示」 を選択するか 「command」＋「R」で表示、非表示が切り替えられるよ。 表示された定規にマウスカーソ

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！ ここ数年、「UI/UXデザイン」という言葉をよく耳にするようになりまたが、みなさんはUIとUXとは何なのかご存知でしょうか？ UIとは、ユーザーインターフェイス（User Interface）の略。 インターフェイスとは「接点・接触面」という意味で、ユーザーと製品・サービスの接触面を指すのでユーザーが視覚でとらえることのできる情報全てが「UI」になる。 UXとは、ユーザーエクスペリエンス（User Experience）の略。 エクスペリエンスとは「体験、経験」を意味し、「ユーザーが製品・サービスを通じて得られる体験」を指します。製品・サービスを利用する一連の行動の中で、ユーザー感じたこと全てが「UX」になる。 上記がよく書籍やWebサイトに載っているUIとUXの解説になるのですが、あまりピンとこないですよね(^^;) という

どうも、ジャングルオーシャンのミケです。 今日はiCloudで簡単に写真を削除する方法を紹介するよ。 iphoneユーザーは必見！ ぜひ読んで参考にしてみてね。 iCloudにログインするまずiCloudのページにアクセスしてね。 iCloudはこちら 画像のような画面になるからまずは自分のApple IDを入力！ 次にパスワードの入力欄が出るから パスワードを入力してエンターを押してね。 アプリ一覧無事にログインできたらiCloudのアプリ一覧が表示されるから 「写真」をクリックしてね。 写真一覧写真アプリの中はiphoneで見る内容と同じように iCloudに保存されてる写真が日付毎に一覧で表示されてるよ。 ここで写真をクリックして選択すれば写真を削除することができるよ。 ただ、この画面でドラッグ、shiftキー、ctrlキー、commandキーで複数選択する事ができないんだ。 そんな

どうも、ジャングルオーシャンのミケです。 今日はマウスオーバーすると画像が拡大、縮小、回転をするエフェクトの紹介だよ。 HTMLとCSSだけで簡単に実装できるよ。 ソースコードを載せてるからぜひコピペして使ってね。 拡大、縮小、回転に使用するCSSプロパティ拡大、縮小、回転に使うのは CSSのtransformというプロパティだよ。 サンプルデモページも用意したから 具体的なイメージはここでつかみながら色々試してみてね。 サンプルデモを見る それじゃ拡大、縮小、回転させる時のソースコードを紹介していくよ。 1.マウスオーバーで画像を拡大するHTML CSS .moimg1 { overflow: hidden; width: 350px; height: 240px; } .moimg1 img { width: 350px; display: block; transition: 0.5

どうも、ジャングルオーシャンのミケです。 今日はカルーセルスライダーが実装できるslickのご紹介！ カルーセルスライダーは ウェブサイトのファーストビューなどでよく使われている 何枚かの画像がスライドしたりして切り替わる機能のことだよ。 slickを使ったサンプルデモを用意したので 具体的なイメージはこちらを見てみてね。 コピペして使ってもらって大丈夫だよ！ サンプルデモページはこちら もしslickを実装して動かないことがあったりしたらこちらの記事を参考にしてみてね！ slickとはslickはjQueryのプラグインの一つで 簡単にカルーセルスライダーを実装する事ができるよ。 JavaScriptやjQueryが書けなくても大丈夫なので カルーセルスライダーの実装を考えている人は slickも検討してみてね。 まずはslickの公式サイトにアクセス！ slick公式ページはこちら ま

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！ Webサイトをデザインするうえで、ユーザーの目をひく”見栄えの良さ”をデザインすることも大事ですが… ユーザーの”使いやすさ”をデザインする「UIデザイン」も同じく大事です！ UIとは、ユーザーインターフェイス（User Interface）の略。 Interface とは「接点・接触面」という意味で、UI はユーザーと製品・サー ビスの接触面を指すのでユーザーが視覚でとらえることのできる情報全て が「UI」になります。 そんなUIデザインにも様々なUIパターンがありますが、今回はアコーディオンメニュー（アコーディオンUI）に絞って、メリット・デメリットや実装・デザインする際のコツを解説いたします！ アコーディオンメニューがどんなものか分からないという方は、下記の記事に簡単な説明と様々なデモサンプルがありますのでチェックしてみ

こんにちわ！ ジャングルオーシャンのラファエロです！！ 健康的な食生活をしたいけれど、仕事や勉強で忙しくて栄養面まで考えて食事をする余裕がない、料理するのが面倒でインスタント食品やジャンクフードを食べてしまいがち…といった方は多いんじゃないでしょうか？ 栄養がしっかり取れて、手軽に食べられる都合の良い食べ物があれば最高なんだけどなぁ…と、思っている皆さん！ 実は、そんな理想的な食品がITテクノロジーの進歩によりフードテック(フード×テクノロジー)という言葉とともに注目を集めているんです！ その名も「完全食」！！ 今回は、そんな完全食についてまとめてみました。 人気YouTuberも注目の「完全食」商品「完全食」とは、人間の生活に欠かせない必須栄養素が理想的なバランスで配合されている食品ことです。 人気YouTuberのセイキンさんが「COMP」と「BESE FOOD」という日本企業の完全食

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！ 「プログラミングを学びたい！ けど、プログラミング言語って色々あるから何を学べばいいのか分からない…」といった感じで、プログラミング学習に興味があってもなかなか手を出せずにいる方は多いのではないでしょうか？ そんな方に断然オススメしたいのが「Ruby」というプログラミング言語です！ この記事ではRubyが入門者にオススメな理由について簡単に解説していきます！！ 1.人気Webサービスの開発に利用されている！ Rubyは世界でも人気のあるプログラミング言語のひとつであり、多くのWebサービスの開発に利用されています！ 「クックパッド　」や「食べログ」、「グノシー」などといった国内の人気Webサービスの開発にも利用されており、Rubyを身につけることで数多くの企業で活躍することが可能になります！ 2.日本で開発された言語なので学習

どうも、ジャングルオーシャンのミケです。 今日は、Google Analyticsで自分のIPアドレスを除外する方法を解説していくよ！ Google Analyticsを設置して数日でアクセスが急激に増えた！？Google Analyticsがアクセス解析ツールであるという事は 前にレオが紹介してくれているね。 新しくウェブサイトを作ってGoogle Analyticsを設置して数日様子を見ていたら アクセスがすごく多くて嬉しがっちゃったりしていないかな？ 残念ながらウェブサイトを作ってすぐにアクセスが増えるなんて稀なんだ。 「それじゃこのアクセスはなんなの？」というと 自分のアクセスをカウントしている可能性が高い！ 例えば、自分のアクセスが含まれている時 ブログサイトであれば、記事を作っていると何回もプレビューをするけど それすらもカウントされてしまう。 自分のプレビューが一番アクセスが

みなさん、こんにちは！ ジャングルオーシャンのラファエロです！ 「Webデザイナーになりたいけど、何から始めたらいいか分からない」「Webデザインの勉強したいけど、良い参考書が見つからない」って思っているWebデザイナー志望の方、結構多いんじゃないでしょうか？ この私、ラファエロも初めはそんな感でした… しかし！ あらゆる書籍やWebサイトを見ながら独学でWebデザインを学び、今では一流のWebデザイナー（自称）になったこのラファエロが選りすぐりの書籍やWebサイトを特別にご紹介いたしましょう！ まずはデザインの基本から学ぼう！楽しく読めるデザインの教科書「なるほどデザイン」 Webデザイナーは、Webサイトをデザインするのが仕事！ つまり、デザインの基本が分かっていなくては仕事になりません！！ ということで、はじめに紹介するのは「なるほどデザイン」という書籍です。 こちらの書籍はWebで

どうも、ジャングルオーシャンのミケです。 今日はjQueryで実装するアコーディオンメニューのご紹介だよ。 簡単すぎてあっという間に実装できてしまうので 「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」 と思ってるそこのあなた！ぜひ見ていってね！ ではいってみよう！ アコーディオンメニューとはアコーディオンメニューってなんだよって人の為に説明するね。 クリックやタップをするとうにょ〜んと中身が出てきて もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。 Webサイトでよく見かけるアニメーションだよね。 要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。 アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。 具体的なイメージは用意し

みなさん、こんにちは！ ジャングルオーシャンのラファエロです！ 2017年9月22日に「iPhone 8」に発売がされたと思ったら、それから約2ヶ月後の11月3日に「iPhone X」が発売されましたね！ iPhone Xからはホームボタンがなくなり、ベゼルレスになるなど外見的に大きく変わりました。また、「Face ID（顔認証）」や「アニ文字」を始めとする気になる新機能にも注目が集まっています！ なので、今回はiPhone Xの購入を検討しているiPhone派の皆さんのために人気YouTuber達のレビュー動画をまとめてみました。 注目のFace ID（顔認証）と防水性を検証

どうもジャングルオーシャンのミケです。 早速だけど、JavaScriptを勉強しようと思った目的に 自動で色々なものを生成したい！ めんどうなことはプログラムで済ませたい！ そういうきっかけで始めることが多いと思うんだけど 今日教える文もめんどうなことをチャッっとすませてくれるものなんだ 自動で繰り返し同じものを作ってくれる文！ それがfor文というものなんだ for文とはfor文の例を書くと for ( i=1; i<=10; i++ ) { document.write("" +i+ "回目！ "); } forの後の()の中の条件を満たしている間は{}の中の命令を繰り返していくっていう文 ()の中のi=1とi<=10とi++についてみていこう！ ()の中の条件i=1;繰り返しのためのスタートの値 iは1という意味ですよ！ということを表してるよ i<=10これは条件式 iが10以下だっ

Cowabunga！ ジャングルオーシャンのレオナルドです。。 WEBに属するグロースハッカーを目指す内気なゴリラーデス。 最近、なにかと注目されているプログラミング言語 「Python（パイソン）」 前回に引き続き！今回も、Pythonの代表来なデータ型を紹介するよ Pythonを扱うには当たり前の構文だからしっかり覚えよう 構文を覚える前に知識を一つ！ Pythonの名前の由来は、 イギリスのコメディグループ「モンティ・パイソン」からとられてるんだyo それでは、今回も代表的な構文をマスターしましょう Pythonの実行環境がない人もしくは気軽に書いてみたいって人は、、 このサイトのエディターで使ってみて！CHECK⇒"paiza.IO" さてさて、、今回のパイソンメニューはこちら 整数（int） 浮動小数点型(float) 文字列型(str) 文字のエスケープ 文字列の結合 文字列の

どうもジャングルオーシャンのミケです。 今日は簡単なJavascriptの勉強をしていこうと思うよ！ HTMLを勉強した人ならわかると思うけど どこか他のページにリンクをする時ってaタグを使うよね 今回はaタグを使わずにいろんな動きでリンクさせる方法を書いていくよ とりあえず難しい言葉は抜きにして見ていこう！ aタグにhref属性をつけてリンクする場合href トップページに飛ぶこれはそのままaタグにhref属性を追加してリンクさせた状態 ボタンをクリックしたらリンク先に飛ぶよね トップページに飛ぶ あえて違う書き方でリンクをさせた場合onclick トップページに飛ぶ hrefにURLを入れずにクリックしたときにトップページにリンクさせる書き方だよ これもボタンをクリックしたらリンク先に飛ぶよ トップページに飛ぶ ダブルクリックした時にリンク先に飛ぶようにする書き方ondblclick

Cowabunga！ ジャングルオーシャンのレオナルドです。。 WEBに属するグロースハッカーを目指す内気なゴリラーデス。 最近、なにかと注目されているプログラミング言語 「Python（パイソン）」 その使用範囲はひろく、例えば！ 人工知能（AI） データ解析 Webシステム開発などで利用されているんだ。 Pythonの特徴としてあげられるのが、 「インデントによる読みやすさ＆書きやすさ」 軽量プログラミング言語　＝ LL 一般的に、気軽に使えると思われているプログラミング言語デス。 そのなかで、今回は、、 Pythonをこれから使用してみようとしてる人に向けて、、 ではなく、、Pythonを動かせる実行環境までクリアした人に向けて、、 基本構文をメモしたよ でも、、環境なくてもやってみたい人は、、 このサイトのエディターで使ってみて！CHECK⇒"paiza.IO" さてさて、、今回の

どうもジャングルオーシャンのミケです。 このアイコン見たことある？ こういうブログ記事でTwitterやFacebookの横に並んでるのは見たことあるけど いや〜使ったことないわ なんなの？ って人いると思うんだけど 今日はこのピンクのアイコンのツールについて紹介していくよ！ このツールの名前は「Pocket」特徴は ・インターネットが接続していなくても閲覧ができる。・いろんな情報を貯めておける。・対応しているサービスがたくさんある。気になった人は まず下のURLからアカウント登録をしてみよう https://getpocket.com/ googleアカウントかメールアドレスから登録ができるよ 登録してログインが終わったらマイリストにとぶよ ポケットの機能はこのマイリストにインターネット上の情報をどんどん詰め込んでいくというイメージなんだ 保存したいページのURLをコピーして右上の+を押