はてなブックマーク

フロートについて HTML&CSSのコーディングで初心者泣かせなのがフロートを使ったレイアウトです。その理由は正しいfloatプロパティの原理原則を勉強してない事と、clearプロパティの正しい使い方を理解してないからです。 また、clearプロパティよりももっと簡単に使えるoverflowで解決する方法については、その仕組みがどこにもちゃんと解説されてないため、おまじない的な使い方という印象が拭いきれずに躊躇するためではないでしょうか。 今回はなぜoverflowを使うとフロート解除ができるのかその理由を解説しますが、まずfloatとclearの原理を簡単に復習しておきます。 floatプロパティは値を「left」にすると左に配置され、「right」にすると右に配置されると単純に理解していると使いこなせません。正しい動きを理解しておきましょう。 floatの仕組みはCSSの仕様書の視覚整

InstagramのAPI使用方法 Instagramの投稿内容を自分のホームページで表示するには、面倒な手続きが必要です。 それは「accessToken」と「userid」を取得することから始めます。 なお、2018年4月に設定方法が変更されていますので、それに対応した内容にしています。 これは素人には少し難しいかもしれませんが、Webデザイナーを目指す人は挑戦してみたい事だと思います。頑張ってチャレンジしてみましょう。 「accessToken」と「userid」を取得するには、アプリ登録のためにの、Hello Developers.のページに行きます。 Hello Developersページではインスタのユーザーネームとパスワードでログインをしておきます。 ＊インスタのページを開いてフッター部分のapiからもdeveloperページへ行けます。 タイムラインは無限スクロール担ってい

SVGのpathに沿ってアニメーションさせる CodeGridの記事が元ネタです。（有料ですがフロントエンドの方にはお勧めのサイトです。） シンプルなサンプル このサンプルのアニメーションの仕組みは刻々と進む時間に対してpathの特定の長さを指定して、getPointAtLengthで現在のpath長さの座標を導き出します。その座標を円の中心座標にすることで移動をさせています。 具体的にはタイマーはsetIntevalを使用せずに、requestAnimationFrame()を使うことで代用しています。 requestAnimationFrameはブラウザの再描画の準備が整ったら次の関数を読み込みます。読み込む速度はブラウザに依存しています。そのため、経過時間を取得する処理を追記する必要があります。今回は変数elapsedTimeに現時刻から経過時間を算出して使用しています。 HTMLコ

スターツールには第1半径と第2半径の２つの半径が存在します。 第1半径が星の中心から尖った先までの長さで、第2半径が中心から内側にくびれたところまでの長さです。 command(ctrl)キーを押しながらドラッグすると第2半径が固定されて第1半径だけが伸び縮みします。 そのため、いきなりcommand(ctrl)キーを押しながらドラッグすると、第1半径が極小のままで第1半径だけが伸びて、まるでクモヒトデのような形になります。 こうなるとやっかいなのは、もとの状態になかなか戻りません。 対処法は意外と簡単で、command(ctrl)キーとoption(alt)キーを同時に押しながら星を描くと元の状態にもどります。 altキーだけを押しながら星を描くと、第2半径を第1半径の38.3％に固定しながら星が描かれます。 これはスマートな星形を描くことができます。 スマートな星形 ズングリムックリの

パスワードの保存 なんらかの認証を行う場合、ユーザーにパスワードを入力してもらい、その値とあらかじめ用意していた正解のパスワードと比較をして正しければ認証は成功しますし、正しくなければ認証に失敗します。 ここで問題がおこります。安全に正解のパスワードを保管するにはどうすればよいかということです。 パスワードの正解をドキュメントルート以外に置くこともひとつですが、平文のままでは怖いですね。 そのため、一般的にはハッシュ関数で暗号化してデータベースへ保存する方法が取られています。 例えば、ある会員制のサイトでパスワードの入力でサイトに入れる仕組みだとします。 会員がパスワードを作成するとハッシュ化されてデータベースなどに保存されます。 次に認証の際に会員がパスワードを入力するとそれは再びハッシュ化され最初に作成したパスワードをハッシュ化したデータと照合して認証する仕組みです。 ハッシュ関数とは

Illustratorで作成した文字がWeb用に綺麗に書き出せないと悩んでいませんか。 「ピクセルが小数単位になっているから」とか「アンチエイリアスを切れ」だとか色々情報がありますが、それでもどういうわけか書き出すと汚くなる。使い慣れないと本当に悩ましいのですが、これは大体アンチエイリアスのしわざです。 そしてIllustratorには文字のアンチエイリアスの設定ツールが色々と分散して用意されているためにどれを使ったら適切かよくわからないことが原因していると思います。 一般的に文字を書き出す時はアンチエイリアスを「なし」にするとと良いと言われます。けれどもそれは細かい文字を書き出す時に有効であってケースバイケースで対応が変わります。 アンチエイリアス とは？ 何らかのオブジェクト（文字を含む）をコンピュータ上で描くと、画面では1ピクセルが最小単位となるため、オブジェクトの輪郭にジャギーと呼

Google Map共有機能の「地図を埋め込む」を使って、サイトにMapを表示する場合iframeが使用されます。 簡単に導入することができて便利に使えますのでさまざまなサイトで活用されています。 ところが、ひとつ問題点があります。スクロールをするときにMapの上にマウスのカーソルが重なった場合です。 Mapに重なった状態でスクロールを行うと、ページ全体の移動ではなくMapの拡大縮小やMapの移動が実行されます。 最近の長いページではページ全体の移動は頻繁に行われ、Mapにかかるとストレスを感じたりします。 できれば、スクロールでのMapの拡大縮小機能を止めておきたいものです。けれども、そのままでは今度はMapの拡大縮小の時に不便になります。 今回はjQueryを使用して対策を行いました。 初期状態ではスクロールを行ってもMapの拡大縮小は行わないものとして、Mapの拡大縮小をスクロールで

jQueryで動的に要素を追加することをマニピュレーションといいます。動的なサイトを作成するには欠かせないものですが、時には困ったことが起こります。 例えば動的に作成した要素にイベント処理を行うときです。サンプルを見ながら問題点と解決を考えていきます。 サンプル１：ある要素をクリックしたら別の要素の文字色が変わるものです。 HTMLコード <p class="aa">AAAA</p> <p class="bb">ここをクリックするとAAAAが赤字になる。</p> CSSコード .bb { background-color: yellow; width: 200px; height: 100px; cursor:pointer; } jQueryコード $(function(){ $('.bb').click(function() { $('.aa').css('color','red');

Bitbucketについて Bitbucketはアトラシアンが運営するプライベートリポジトリを無制限に持てる無料アカウントを提供しているサービスです。 無料アカウントの場合、5 ユーザーまで使用できます。GitHubとの違いは非公開リポジトリを無料で作成できることです。 Bitbucketのページでアカウントを作成すると無料で使用することができます。 「Get started for free」のボタンをクリック Eメールを入力して「Continue」ボタンをクリック Eメールアドレスと名前とパスワードを入力して「私はロボットではありません」をチェック後に「Continue」ボタンをクリック 登録したEメールアドレスに届いたメールを確認します。 次の内容のメールが届きます。「Verify my email address」ボタンをクリック ユーザー名を入力して「続行」ボタンをクリック Bi

パーミッションの設定でchmodeの使い方とかrwxの使い方だったらネットにもたくさん出てきますが、ユーザー（所有者）、グループ、その他の使い分けについての説明があまりされていません。今回はWebサーバーのパーミッションの設定でユーザー設定のポイントを解説します。 さっそく、これからパーミッションの設定を練習をしてみましょう。例えばindex.htmlファイルをサーバーにアップロードしたとします。サーバーはXドメインの無料サーバーとしましょう。 一般ユーザーの読み込みを禁止する方法です。読み込みを禁止するということは、index.htmlが読めない、つまり表示されない事と考えてしまいがちですが、本当の原理は少し違います。けれども、結果的にはファイルの内容が表示されないことにはなります。 まず、「ユーザー」、「グループ」、「その他」のどれに対して設定をするか考えます。一般ユーザーだから「その

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替え まずは、CSSでのメディアクエリを利用した切り替えポイントの例です。 501px以上ではdiv.baseは赤色ですが、500px以下ではdiv.baseは緑色になります。 これはCSSのメディアクエリで指定したものです。 CSSメディアクエリによる切り替えサンプル HTMLコード <div class="base"></div> CSSコード .base{ width:200px; height:100px; background-color: red; } @media (max-width:500px){ .base{ background-color: green; } } jQuery

CompassはSassを利用したCSSフレームワークです。導入はちょっと面倒ですが、うまく導入できるとCSSがすごく楽に書けるようになります。 Compassでできることは、ベンダープレフィックスなどの複雑なCSSを簡単に記述できたり、画像のwidthやheightを取得してくれたり、スプライト画像を作成してくれたりもします。 Compassのインストール〜Mac OS X El Capitan編 Compassのインストールはやっかいです。PCの状況で色々と設定が必要になります。 OSのバージョンや色々な環境でエラーが出た際はそのエラー内容を検索するなどで自分で解決するより他になさそうです。 今回はMac El Capitanでのインストール方法です。参考になれば幸いです。 SassはRubyで書かれていますので、Rubyの仕組みを使います。RubyにはGemという便利なライブラリ追加

主な仕組み スクロールイベントを使用してスクロールした量だけオブジェクトを移動させます。 スクリプトで使用する主なメソッド スクロールイベントはscroll( )メソッドを使用します。 スクロール量を取得する方法は$(window).scrollTop( )で取得できます。 オブジェクトの現在の座標を取得するにはoffset( )を使用します。 オブジェクトの現在の座標は offset().top でy 軸、offset().left でx 軸の値がとれます。 HTML要素を動かす 動かす対象のオブジェクトをブロック要素でマークアップして、CSS でその要素をposition:fixedとして固定します。 スクロールするとテキストAを動かすサンプル HTMLコード <p id="no1">A</p> CSSコード #no1{ position:fixed; right:30px; top:

テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いものではありません。 今回は疑似要素を使用して下線を引く方法です。この方法なら二重線、三重線にも対応できます。 疑似要素で下線を引く方法 「::before」と「::after」にそれぞれ新しい要素を作成してそれに対して線を引く仕組みです。 疑似要素で下線を引くサンプル このサンプルではh1要素に疑似要素「::before」と「::after」を使用して「content: “”」で空の要素をひとつ作ります。 「left:0」「right:0」にすることで要素にUAの幅いっぱいを指定します。そしてその空の要素に下線を引きます。 このままだと「::before

スマートフォン向けのサイト作成の時に定番的に使われている開閉式のナビゲーションの作成方法です。今回は縦方向の開閉と横方向の開閉（ドロワーメニュー）の基本的な仕組みの解説です。 jQueryとCSS3を使用した作成方法です。通常jQueryのアニメーションはCPUで処理されますが、CSS3を有効活用するとGPUが使用されてより滑らかな動きを実現できます。 縦方向の開閉メニュー ハンバーガーボタンをタップするとアコーデオン状に開くナビゲーションです。 ハンバーガーボタンはタップするとX印に変わります。X印をタップするとナビゲーションを閉じることができます。 比較的多く見るタイプのものです。 HTMLのポイントはハンバーガーボタン部分とナビゲーション部分の構造です。 ハンバーガーボタンはdivとspanで作成します。 ナビゲーションはulとliでできた一般的なものです。 縦方向の開閉メニューのサ

Bootstrapのグリッドシステムの仕組みを更に掘り下げてみます。 Bootstrapを使用するときに注意する点はボックスモデルの概念が通常と違うところです。 Bootstrapは通常のボックスモデルではありません。border-boxです！！ レイアウトの幅を算出するときはこの事をふまえておく必要があります。 Bootstrapでは全ての要素にいきなり次のように初期化を行っています。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Bootstrapでは内容領域（width)にパディングとボーダーが含まれます。通常のボックスモデルは内容領域（width）にパディングとボーダーは含まれません。 グリッドシステムの基本構造 グリッドシステムの基本構造は次のよ

高機能テキストエディタとして人気のSublime Textに代わる勢いのAtom。 Githubが提供するWeb開発用エディタです。その力は鉄腕アトムなみ。。 Atomのインストール〜Mac Macへの導入で説明します。 Atomのページからダウンロードします。無料です。 zipファイルをダウンロードしたら展開して終わりです。 あとは、アプリケーションフォルダに入れればOKです。必要に応じてDockに設置すればよいでしょう。 基本的な使い方 新規ファイルを作成すると左サイドにファイル名が表示され、既存のファイルを開いた場合はフォルダ内が表示されます。 便利なコマンド Ctrl + Shift + P 使い方がわからない。。コマンドは。。。と言うときはCtrl + Shift + Pで教えてくれます。 Option + Command + i Atomは、Google Chromeのベースと

グローバルナビゲーションとして使用できるナビゲーションバーの作成方法です。 ナビゲーションバーを作成するには少し複雑なタグとクラスを使用することになります。 Bootstrap本家のサンプルを確認してみましょう。 基本的なナビゲーションバーのサンプル 基本的なナビゲーションバーのHTML(Bootstrapのページサンプルより） <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。（中級者向け） モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のページを隠します。そして、画像などを表示する領域をブラウザの中央部に置くものです。 代表的なものにLightBoxがあります。 今回のサンプルの表示内容は画像ではなくて、同じドメインに存在する他のHTML文とします。 これをAjaxを活用して読み込みます。 さらに、読み込んだHTML文内のリンク先をAjaxを活用して読み込む方法です。 サンプル 見出しをクリックするとモーダルウインドウが表示されます。モーダルウインドウに表示されたh1にはリンクの設定をしています。この部分をクリックするとajaxを使用して同じ場所にリンク先が表示される仕組みのものです。 HTML <dl> <

WordPressでパーマリンクを変更する場合サーバーがmod_rewriteモジュールの使用を許可してないと使えません。 mod_rewriteモジュールとは mod_rewriteモジュール とはURLの書き換えなどを行うモジュールです。 WordPressでは人にわかりやすいような特定のURLでアクセスをしても機械的なURLへ書き換えを行うことができます。 これがパーマリンクの変更です。 例えば、「http://localhost/wp_green/?p=123」を人にわかりやすい「http://localhost/wp_green/sample-post/」とすることができるわけです。 このときWordPress内部では「http://localhost/wp_green/sample-post/」を「http://localhost/wp_green/?p=123」と変換していま

グリッドデザインとは グリッドデザインとは、均等なマス目に分割して、そのマス目に沿って各部品を配置していくデザインです。 有名なものに「960 Grid System」があります。 Webサイトを作成するときにグリッドデザインを活用すると統一感のあるページができあがります。 Bootstrapのグリッドシステムではクラス名を指定することで簡単にグリッドレイアウトを作成することができます。 面倒なfloatの設定を自分で行ったり、レスポンシブの対応を考えたりする必要もありません。 Bootstrapを活用したグリッドデザイン Bootstrapでグリッドデザインを行うには、divに決められたクラス名を命名していきます。 ちょうどテーブルを作成するとき、まずtableタグを使用するように、Bootstrapのグリッドシステムでは、divにクラス「container」または、「container

カンプやワイヤーフレームを作成する上で重宝するのが、グリッドシステムです。 これは、縦方向に区切られたカラムに沿って要素を配置するもので、簡単に見栄えのするレイアウトを作成することができます。 多くの制作者はグリッドシステムを利用する場合には960GRID SYSTEMなどを使用したりします。 近年のWebサイトは横幅が大きくなり続けており、デザインする時に960GRID SYSTEMの横幅が960pxでは不足する場合も出てきているものと思われます。 もっと自由にグリッドシステムを設計したい場合にはカラムを自作するのが一番です。 PhotshopもIllustratorもCCではカラムを簡単に作成できるようになっています。 もっと自由に自分専用のカラムを使用してグリッドシステムを活用してみましょう。 ページの横幅の決め方ＰＣ用 グリッドシステムのカラムを作成する時に事前に必要になるのがペー

マウスホバーでボタンなどの画像をフワッとクロスフェードさせたいという相談が多いので、何種類かのアプローチと失敗例などを書きました。 CSS3でクロスフェードさせるサンプル jQueryでimgタグの画像をクロスフェードさせる（成功例） jQueryでCSSのbackground-mageをクロスフェードさせる（完成形） CSSを使用した例 hover疑似クラス マウスホバーはCSSでの設定が簡単です。 CSSでは:hover擬似クラスを使用します。この疑似クラスはa要素以外にも使用できます。 また、a要素に適用させる場合には、順番が大事です。 LVHA の順 です :link — :visited — :hover — :active LOVE HEARTで覚えるとよいらしいです。（笑） hover擬似クラスのサンプル HTML <div class="myimg"></div> CSS

このサイトは、AI関係の記事やWeb開発者向けの記事を発信しています。Python入門から機械学習、ディープラーニング に関する技術的な内容をできるだけわかりやすく書いています。 また、動画を有効に活用することで更に理解を深められるよう工夫しました。今後、IT工房独自のアプリ開発やその支援またメンターやアドバイザーとしての活動にも携わる計画です。