lecture

Python入門 Python をはじめよう! (動画あり)

IT工房では、IT系学習用の動画を配信します。 まずは、Python入門の動画を順次アップしていきますので、Python入門の参考にしてください。 それぞれの動画は、IT工房のVideoページから選ぶと解説も行っています。 Pythonには2系と3系がありますが、互換性がありませんので、ここでは新しいバージョンの3系を学習します。 なお、PythonコードはGoogle Colaboratoryを活用します。 Googleが提供する無料のJupyter Notebookを拡張したものです。 ビデオでは、入門者向けにゆっくり喋ってますので、1.5倍から2倍くらいのスピードで聞いても良いと思います。

CSS flex〜チートシート(動画あり)

flexBoxの主軸と交差軸についての動画 FlexBoxのプロパティと値をまとめたものです。 FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。 ネット上にも団子の串刺しのようなイラストが乱立しているようです。まずはプロパティの動きを覚えましょう。 しかし、FlexBoxのキモはflexプロパティの使いこなしだと思います。flexプロパティの初期値もしっかりと覚えておきましょう。 仕様書をしっかりと読み込むことを忘れないことが大事です。 flex レイアウト詳説〜Flex Box Layout Container 値の太字は初期値です。 flex-direction row | row-reverse | column | column-reverse flex-wrap nowrap | wrap | wrap-reverse justify-content flex-start | flex-end | center | space-between | space-around | space-evenly align-items stretch | flex-start | flex-end | center | baseline align-content stretch | flex-start | flex-en  >>続きを読む

FlexBoxの使い方(7)〜 flex-wrapについて(動画あり)

flex-wrapの動画 floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定した幅はしばしば無視されてしまうことがあります。 次の例はフロートを使用した固定レイアウトの例です。フロートレイアウトをFlexBoxでレイアウトした時に起こる現象です。 サンプル 単純に「display:flex」を使用するとwidthの値は無視されて横1列に並びます。今回は画像のwidthを100%としてフルードイメージにしていますので縮小されて横並びになります。 サンプル flex-wrap:wrapを使用すると画像はフロートレイアウトのように2行3列の配置になります。 サンプル Web動画記事一覧

floatの仕組みとoverflowでfloat解除できる理由

フロートの基本動画 フロートについて HTML&CSSのコーディングで初心者泣かせなのがフロートを使ったレイアウトです。その理由は正しいfloatプロパティの原理原則を勉強してない事と、clearプロパティの正しい使い方を理解してないからです。 また、clearプロパティよりももっと簡単に使えるoverflowで解決する方法については、その仕組みがどこにもちゃんと解説されてないため、おまじない的な使い方という印象が拭いきれずに躊躇するためではないでしょうか。 今回はなぜoverflowを使うとフロート解除ができるのかその理由を解説しますが、まずfloatとclearの原理を簡単に復習しておきます。 floatの仕組み floatプロパティは値を「left」にすると左に配置され、「right」にすると右に配置されると単純に理解していると使いこなせません。正しい動きを理解しておきましょう。 floatの仕組みはCSSの仕様書の視覚整形モデル9.5 浮動のところに書いてあります。 また、フロートの仕組みを正しく理解するには包含ブロックの考え方を知っておく必要があります。まずは、包含ブロックについて調べておきましょう。 包含ブロックについての説明はこちら 視覚整形モデルで記述されているfloatプロパティは次のような仕様です。 浮動体の配置:’float’プ  >>続きを読む

FlexBoxの使い方(5)〜flexプロパティについて(動画あり)

flexプロパティの動画 flexプロパティについて解説します。 display:flexを指定したときflexコンテナはblockの性格を持ち、親要素の幅いっぱいに広がります。flexコンテナでflexアイテムをきれいに囲むためにはflexアイテムの幅をそれぞれ計算してflexコンテナの幅を決めなければいけません。つまり、flexコンテナにflexアイテムを並べても余計なスキマが空いたり、逆にflexコンテナにflexアイテムが入りきれない場合もでてきます。 *復習ですが、flexコンテナとflexアイテムの関係は下図のようになります。 ここでは、flexアイテムを拡大、縮小してflexコンテナにぴったりと収める方法の解説をおこないます。 flexアイテムの拡大は自分自身を基準に拡大するのではなく、余った余白をflex-growで指定した比率で分配して拡大するものです。 flex grow factorという言葉が「CSS Flexible Box Layout Module Level 1」に書かれています。和訳するとflex伸長係数と訳されたりしています。 flex grow factor つまり「flex 伸長係数」について。 flexコンテナの幅が全てのflexアイテムを囲んでもまだ余りがある場合に、それぞれのflexアイテムに指定した伸長係数の値に従って、flexアイテ  >>続きを読む

FlexBoxの使い方(4)〜display:inline-flexについて(動画あり)

inline_flexの動画 「inline-flex」を簡単に説明すると「inline-block」の拡張版と言えます。 「inline-block」の性格を持ちながら、尚且つ「flex」の性格を持ちます。結構万能に使えますので有効に活用しましょう。 メリット flexコンテナに「display:inline-flex」を設定するとflexアイテムに幅を指定しなくても勝手に中身依存の幅になること。 flexコンテナの親要素に「text-align:center」をかけると中央に揃います。 FlexBoxの様々なプロパティがそのまま使えます。 デメリット 中央揃えに「margin:auto」が使えないこと。親要素に「text-align:center」を設定すると別の要素に影響が出る可能性があること。 対策としては親要素にdisplay:flexを設定して、justify-content:centerにすればこの問題は解決できます。 「display:inline-flex」について 「inline-flex」はインラインレベルの flexコンテナボックスを生成するとCSS Flexible Box Layout Module Level 1に記述されています。「インラインレベルのflexコンテナ」って何?と思ってしまいます。ここでは「inline-flex」について掘り下げてみま  >>続きを読む

FlexBoxの使い方(3)〜flexアイテムの順番を入れ替え(動画あり)

flexアイテムの順番の入れ替えについて解説します。 flex アイテムに対するプロパティの使い方動画 flexBoxレイアウトの初期状態 flexBoxレイアウトをorderプロパティで並べ順を変えた状態 通常のflexBoxレイアウト orderで並び変えたflexBoxレイアウト HTMLコード orderで並び変えたCSSコード orderで並び変えたflexBoxレイアウト作成手順 flexコンテナを作るための要素にdisplay:flexを設定 flexアイテムにあたる要素にorderプロパティを設定 orderプロパティに整数の値を設定する。数値が多きいほど右に並ぶ *注意:orderを指定してない場合、初期値は「0」です。従ってorderを指定してない要素より前に表示するには必ずマイナスの値を指定しなければなりません。最初戸惑うことがあると思いますので注意してください。 プロパティの名前 order 値 初期値 0 適用対象 flex アイテム , および flex コンテナの子であって 絶対位置にされているもの 継承 されない 媒体 visual 算出値 指定値 アニメーション 可 FlexBoxレイアウトの並び方向の変更 横並びの場合は初期状態で左から右に向かって並びます。 また、縦並びの場合は初期状態で上から下へ向かって並びます。 横向き、縦向きの並ぶ方向を逆  >>続きを読む

FlexBoxの使い方(1)〜display:flexについて(動画あり)

通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来上がります。また、今までできなかったこともうまく解決できるようになりました。まずは簡単に横並びのレイアウトを作成してみましょう。 FlexBox解説動画 通常フローのレイアウトを横並びのレイアウトに変更する例 上のような通常フローを下のような横並びのレイアウトに変えるにはflexレイアウトを使うと簡単です。 今回のサンプルとコード 通常フローレイアウトのサンプル 横並びレイアウトのサンプル HTMLコード 通常フローレイアウトのCSSコード 横並びレイアウトのCSSコード 作成手順 flexコンテナにdisplay:flexを記述するだけで横並びレイアウトが出来上がります。それだけでOK!!簡単なのです。 flexレイアウトを使うためには、「flexコンテナ」と「flexアイテム」2つの用語を覚えましょう。 flexコンテナとは横並びにするカラムをまとめる親要素 flexアイテムとは横並びにするカラムのこと あとは、flexコンテナに display : flex; とするだけ。 display:flexを使用するポイント 縦並びと横並びを明示的に指定する方法 全  >>続きを読む