はてなブックマーク

明けましておめでとうございます。 訳あって約1ヶ月ぶりのブログ更新となりました。 webディレクターになりました 実は、昨年11月一杯で職業訓練校を退校して、12月からコーディング専門の会社でwebディレクターとして就職が決まりました！！ 訓練期間はあと半月残っていたのですが、就職先が決まったので途中退校という形になりました。 webフロントエンドエンジニアを目指して学校に通ってたけど、世の中の動きと日本における需要の関係でディレクターになることにしました！ いま7年目のベンチャー企業から、昨年の春頃に独立した子会社で働いています。 ↑　動物園みたいなエントランスの会社でお仕事しています！！ 周りが出来る人ばかりで、日々目まぐるしく吸収･成長できる環境でとてもありがたい。私も私の持ち味を活かしてがんばります！！ このブログは引き続き更新します 今は仕事が始まったばかりでなかなかブログを更新

最近、学校の授業でポートフォリオ作っておりまして「PDFで出力したいけど、やり方がわからない」とよく耳にするので、手順を書いておこうと思います。 ポートフォリオはIllustratorで作っている人が大多数ですが、今回ご紹介する方法はOfficeSoftのEXCELやWORDなどで作ったものでもPDF化できます。 プリンターを選ぶようにPDF化ソフトを選べるようになるので、印刷画面を出せるところなら何でもPDFに出力できます！ 意外と知らない？ IllustratorやPhotoshopを簡単にPDF化する方法 今回ご紹介するのは「CubePDF」という無料のソフトです。 CubePDFは、Windowsの印刷機能を利用した「仮想プリンタドライバ」形式のPDF変換ソフトです。 使い方はとてもシンプルで簡単です。それぞれのアプリケーションで印刷ボタンを押す際に、CubePDFプリンタを選択す

先週末まで2週間インターンシップに行っていたのでバタバタしてましたー！やっと落ち着いて来たので久しぶりの更新です。 今回は様々なところで見かける『スクロールして、ページトップに戻るボタン』の作り方です。 超簡単&コピペでOK！ ページトップへ戻るボタンの実装方法：jQuery jQuery初心者さんが、まず1番最初にやりたいのはこの『トップページへ戻るボタン』なはず！！！ なぜなら私がそうだったから！ ！ ボタンを押すとスーっと上に移動してくれる。この動きがたまらなく気持ちいい。 このブログにも最近やっと実装しましたが、クセになりますよね。 ページが縦に長くなりがちな方はぜひぜひ設置してみてくださいませ。 demo このブログがまさにdemoページそのものです！トップページから少しスクロールすると、右下に出てくる水色のボタンです。動きを試してみてください。 『ページトップへ戻るボタン』を知

さて、前回の記事に引き続き『これなんて読むのシリーズ』の後半、『web用語編』です。 『Google Chrome』ってグーグル チャーム？クロム？チョロメ？ 『ASUS』はアスース？エイサス？エイスース？ 突然、父から電話で何事かと思ったら、どうも何か変な操作をして、メールが全部消えたらしいのだが、「いつもPCで使ってるグーグルチャームがね」と。チャームを連呼する。ん？グーグルチャーム？？お父さん、それ、Google Chromeだよ。 — cinnamon (@cinnamondog) 2015, 6月 14 あなたは自信をもって正しい読み方ができますか？ これなんて読むの？ 今さら聞けないweb用語の読み方まとめ web系初心者さんも、ベテランのバリバリさんもいい機会なので一緒におさらいしてみましょう！ そして、私が間違っているところがあったらこっそり教えてください。 前回の記事はこ

webサイトの1番下にある『著作権表示』色々な表記を見かけるけどどれが正しいのー？って思ったことありませんか？ Copyright(コピーライト：著作権表示)の 正しい書き方を知っていますか？ webサイトでいう『Copyright(コピーライト/著作権表示)』は、サイトの1番下にある Copyright © 2015 sometimes study All Rights Reserved. (c) 2010-2015 sometimes study All Rights Reserved. こんな感じの表記のことです。 このページの所有者は私ですよ！という『著作権の所有を示すおまじない』みたいなものですね。ひとつずつ、一緒に書き方をおさらいしていきましょう！ 『著作権(ちょさくけん)』って何？ まず、著作権とは？ってところからですね。 著書などの　制作物に対して　発生する権利 知的財産権

今回は、プラグインを使わないで作る『アコーディオンメニューの作り方』です！ 例えば 『Q ＆ A』みたいな項目に対しての説明が長くなってしまうとき 『メニューボタン』のように、入れ子入れ子で子ページがいくつもあるとき 説明が長い位場合は特に必要性を感じますよね。そのままつらつらと書き続けると、ユーザーがずっとスクロールしなくちゃいけなくて見るのが大変なのです。 そんな時に役立つのがこの『表示・非表示ボタン』です。 jQuery：クリックしたら 表示するtoggleボタンの実装方法 動作としてはこんな感じです。 表示(非表示)ボタンを押す ↓　　↓　　↓ 連動して、説明文が表示(非表示)になる 下にdemoも作ってあるので、触ってみてください。 demo HTML <!-- 表示ボタン --> <p class="openBtn"><i class="fa fa-chevron-down f

会社で上司に報告をするとき、取引先の相手にプレゼンをするとき。相手にわかりやすく、順序立てて話をする力ってとっても必要とされますよね。 それは対人でなく、対コンピューターなプログラマーも同じ。プログラムを作るうえで、物事を論理的に考える力はとても大切です。 そこで、今回は『論理的思考力(ロジカル・シンキング)』を身につける為の問題を、いくつかご紹介してみようと思います。 論理問題：プログラマーに必要な 『論理的思考力(ロジカル・シンキング)』を身につけよう！ そもそも論理的な思考ってなんでしょうか？ ある有名なお話があるので読んでみてください。 ジョーは酒場で論理学の教授と知り合った。 「論理学ってのはどういったもんですか？」 「やって見せましょうか。お宅には芝刈機があります？」 「ありますよ」 「ということは、広い庭があるわけですね？」 「その通り！うちには広い庭があります」 「というこ

週末にwebサイトの機能追加の依頼が入り、 メールフォームに利用規約の同意ボタンを実装しました。 自分用メモとしてHTML、jQuery、cssのソースをまとめておきます。誰かの参考になれば幸いです！ チェックされたら送信可能にするボタンをjQueryで制御する 動作としてはこんな感じ 最初にページが表示されたときは、送信ボタンが押せない状態になってる ↓　　↓　　↓ "「利用規約」に同意します"にチェックが入ったら、 送信ボタンを押せるようにする デモも作ってみたので実際に触って確認してみてください。 demo 「利用規約」に同意します 条件分岐：チェックボックスに… チェックが入っている → 送信ボタンが押せる チェックが入っていない → 送信ボタンが押せない HTML <!-- チェックボックス --> <input id="checkBtn" type="checkbox"><la

以前webサイトを作らせてもらったクライアントさんから、改修依頼として「キーイメージをイラストで描いて！」って言われたので頑張ってみました。 何も調べないで自己流で書いたので参考になるかわかりませんが、自分メモとして残しておきたいと思います。 Photoshopとペンタブで、水彩風のイラストを描いてみました chiba-onsei-lab.com 音声処理の専門家さんのwebサイトなので、録音物の音声補正やりますよーって内容の画像です。 要望としては ・「言った・言ってないの水掛け論」を証拠音声で解決させたいという内容 ・ベースは写真でなく、 [ ↓ ] こんな感じのPOPなイラストを描いてほしい (サイトの雰囲気に合わないようなら変更可能) 参考にいただいた絵だとちょっとサイトの雰囲気に合わないな～と思ったので、今回はなるべくゴチャゴチャしてない、シンプルで素朴な絵にしたいと思います。

8月の中旬から1ヶ月かけて、学校の課題として『webサイト制作』をしていました！ 実際にクライアントを見つけて、サイトを作らせてもらうので、友人から依頼をもらった人や飛び込みで営業しに行った人など様々。できあがったサイトのレビュー会もしました。 そこで、『初心者の私たちがやってしまいがちな、サイト制作の落とし穴』のパターンが見えてきたのでまとめておきたいと思います。 私が作成したwebサイトについてはこちら serinaishii.hatenablog.com webサイト制作の落とし穴！初心者がやりがちなミス20選 ユーザビリティの落とし穴 ロゴにトップページへ戻るリンクを貼ってない SNS(FacebookやTwitter)と連携しない ファーストビューで何のページかわからない (社名や個人名だけ載せて、内容の説明がなかったり、足りなかったり…) [ ↑ ] サンプルとして作ってみまし

webサイトを作るうえで、手間のかかる作業のひとつ『画像制作』。 私はピクトグラムのように、パッと伝えたい意図がわかるアイコンが大好きで、どこにでも登場させます。 しかし、アイコン画像を一から作っていると、あっという間に時間が過ぎ去っていきますよね…今回はそんな時のお助けサービス『Font Awesome』をご紹介します！ Font Awesome(フォント オーサム) こちらが『Font Awesome』のトップページ。 そう、ご覧のとおり海外サイトです。私と一緒で全面英語のページに拒否反応がでてしまう方も、少し我慢して先に進んでください(;O;) たったひと手間で豊富なアイコンが使い放題な優秀サービス！しかも全て無料！ 1度知ってしまったらもう離れられないくらい。便利すぎて感動します。 fontawesome.io 前準備 まずは黄色い四角で囲んである『Get Started』から、前

高雄山の次はここ！新宿から1時間ちょっとで行ける東京のオアシス御岳山(みたけさん)に登ろう！！ ということで、先月 富士山に登ったのがきっかけですっかり山の魅力に取り憑かれ、近辺の山々を制覇していくことになりました。 御岳山(標高 929m)はケーブルカーでも行き来でき、本気で山登りしたい人も気軽に山の雰囲気を楽しみたい人も、老若男女誰でも楽しめる山です。 『日本二百名山(東京唯一！)』『花の百名山』と言われる大岳山(標高 1,266m)と、『つるつる温泉』がある日の出山(標高 902m)に囲まれている為、それぞれの山を通して様々な楽しみ方ができます。 御岳山の登山スケジュール 日程　　　：　2015年08月15日(土) 天候　　　：　晴れ (前日に雨) 場所　　　：　東京都青梅市 御岳山(標高929m) 所要時間　：　9時間 (登り：3時間、降り：ケーブルカー) 難易度　　：　★★★☆☆