XcodeでUIStepperを追加する方法【初心者向け】

XcodeのUIパーツ【UIStepper（ステッパー）】を追加する方法を初心者向けに解説した記事です。プラスとマイナスのボタンなどで、増減量を変化させる時に使うことができるパーツです。実際にボタンが動くようにコードも紹介。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。

今回は、XcodeでUIStepper（ステッパー）を追加する方法を初心者向けに解説します。

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

UIStepperについて

UIStepperは、下限値と上限値および増減量を決めて値を変化させるために使います。デフォルトでは「+（プラス）」と「-（マイナス）」のボタンが表示されます。

iOS5から追加されたUIパーツです。

UIStepperを配置する

ストーリーボードにUIStepperを配置していみましょう。

「Stepper」と表示されている箇所です。

XcodeScreenSnapz001

これを他のUIパーツでと同じように、ドラッグ&ドロップで配置します。

XcodeScreenSnapz002

今回は現在の値を示すためにLabelも配置しておきます。
XcodeScreenSnapz003

また、UIStepperの4つの値（下限値・上限値・現在値・増減量）はインスペクタで設定できます。

XcodeScreenSnapz004

パーツの配置は以上です。

[PR] iPhoneアプリ開発コース

UIStepperの使い方

配置しただけでは動きませんので、動くように設定していきます。

まずはUIStepperのIBOutletを作成します。ドラッグ&ドロップの操作でこのような画面が表示されることを確認してください。

XcodeScreenSnapz005

この時の名前はuiStepperとしておきます。

XcodeScreenSnapz006

同じように、値を表示するLabelのIBOutletも作成します。

こちらの名前はlabelValueとしました。

続いて、UIStepperのActionを作成します。

この際の名前はstepperChangedとします。対象となるEventはValue Changedです。

ここまで操作すると、ViewController.hに以下の3行が追加されます。

@property (weak, nonatomic) IBOutlet UIStepper *uiStepper;
@property (weak, nonatomic) IBOutlet UILabel *labelValue;
– (IBAction)stepperChanged:(id)sender;

最後にUIStepperの値が操作された時の処理を記述します。単純にUIStepperの現在値をラベルに表示するだけのコードです。

– (IBAction)stepperChanged:(id)sender
{
_labelValue.text = [NSString stringWithFormat:@”%zd”, _uiStepper.value];
}

これでUIStepperの値を取得することができるようになりました。

今回の記事は以上です。

他のUIパーツも追加してみたい場合は、XcodeでUITableViewを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

Swiftにおけるデリゲート (delegate)の使い方とは【初心者向け】

Swiftで書くdelegateの使い方を解説します。効率よくプログラミングをするためにもデリゲートとは何なのか、デリゲートの使い方を知っておくと良いで...

iPhoneアプリ開発

【開発しながら学ぶ！】Swiftで作るサンプルiOSアプリをまとめてみた！

すでにSwiftを学んでいる人もこれからiOSアプリを作ってみたいという人にも参考になるサンプルアプリをまとめています。作りたいアプリが特に無いという人は、今回...

iPhoneアプリ開発

XcodeでUISearchBarを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。今回は、XcodeでUISearchBar（サーチバー）を追加...

iPhoneアプリ開発

【入門編】無料で学べる！初心者のためのSwift学習サービス10選

Swiftを入門から始めようとしている人に最適な学習サービスを10個まとめてみました。どのサービスも初心者向けに作られているので、Swiftを全くやった...

iPhoneアプリ開発

2ヶ月間でiOSアプリを開発、ストアに申請するまでの学習軌跡

本稿は、Mediumのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、iOS開発者のBob Lee氏によって投稿されました。 ...

iPhoneアプリ開発

XcodeでUIActivityIndicatorViewを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。今回は、XcodeでUIActivityIndicatorVi...

iPhoneアプリ開発

あわせてよく読まれている記事

Androidアプリ開発のRelativeLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、RelativeLayout（リラティブレイアウト・相対レイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！Androidアプリでボタンの並びを相対的に並べたいんですけど、何かいい方法ってないですか〜？田島悠介それならRelativeLayoutを使うとできるよ。パーツの位置を相対的に設置できるんだ。大石ゆかり RelativeLayout、ですか？ RelativeLayoutとは RelativeLayoutとは、基準となるパーツを決め、それとの相対的な関係で位置を決めていくというレイアウトです。 RelativeLayoutを配置する画面を最初から作成する場合は、xmlタブを開いてデフォルトで記述されているコードをすべて削除しておきましょう。 RelativeLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のRelativeLayoutを、プレビュー画面までドラッグしましょう。 [PR] iPhoneアプリ開発コースRelativeLayoutにパーツを配置する RelativeLayout上にパーツを配置してみましょう。一番最初に配置したパーツはレイアウトの基準として配置されています。次に配置したパーツは、一つ前に配置したパーツを基準に配置されます。また、基準にしているパーツは矢印で確認できます。パーツを移動させると、そのパーツを基準としている他のパーツも同じように移動します。 RelativeLayoutのコードを確認する最後に、RelativeLayoutで、下の画像のようにボタンを3つ配置した画面を作成しコードを確認してみましょう。 xmlタブでコードを確認すると、このようになっています。 <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignParentLeft=”true” android:layout_alignParentTop=”true” android:layout_marginLeft=”59dp” android:layout_marginTop=”56dp” android:text=”Button” /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/button1″ android:layout_below=”@+id/button1″ android:layout_marginTop=”80dp” android:text=”Button” /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_below=”@+id/button2″ android:layout_marginLeft=”43dp” android:layout_marginTop=”68dp” android:layout_toRightOf=”@+id/button2″ android:text=”Button” /> </RelativeLayout> グラフィカルレイアウトでうまく微調整ができない場合は、コードを使って微調整をするようにしましょう。各コードを編集する際は、下記の内容を参考にしてください。レイアウトを基準に配置したい場合は、下記の属性を「true」にする android:layout_alignParentTop　：　レイアウトの上端に配置する android:layout_alignParentBottoｍ　：　レイアウトの下端に配置する android:layout_alignParentLeft　：　レイアウトの左端に配置する android:layout_alignParentRight　：　レイアウトの右端に配置する android:layout_centerHorizontal　：　レイアウトの水平方向の中央に配置する android:layout_centerVertical　：　レイアウトの垂直方向の中央に配置する android:layout_centerInParent　：　レイアウトの中央に配置するパーツを基準に配置をしている場合は、下記の属性に基準としているパーツIDを指定する layout_below　：　指定したパーツの下に配置 layout_alignLeft　：　指定したパーツの左に配置 ayout_toRightOf　：　指定したパーツの右に配置基準としたパーツやレイアウトからの距離を指定する場合は、下記の属性に距離を指定する layout_marginTop　：　上の距離 layout_marginBottom　：　下の距離 layout_marginLeft　：　左側の距離 layout_marginRight　：　右側の距離（指定がない場合は、基準のパーツの位置と揃えて配置します）今回の記事は以上です。さらに他のレイアウトを試したい場合はTableLayoutの使い方も合わせてご覧ください。大石ゆかり RelativeLayoutはとても使う場面が多そうなレイアウトですね〜♪ 田島悠介そうだね。絶対的な位置関係だと一つパーツをずらした時に他のパーツも動かさないといけないから、使うととても便利だね。大石ゆかりはい！ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

Androidアプリ開発

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次UIStepperについてUIStepperを配置するUIStepperの使い方そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] iPhoneアプリ開発コースcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

Androidアプリ開発のFrameLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、FrameLayout（フレームレイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！FrameLayoutっていうレイアウトがあるんですけど、これって何に使うんですか〜？田島悠介 FrameLayoutはビューを重ねて表示したい時に使うんだ。ちょっと試しにやってみようか。 FrameLayoutとは FrameLayoutとは、パーツをひとつだけ配置して使用するレイアウトです。位置の指定はできず、FrameLayoutに配置したパーツは左上に表示されます。また、FrameLayoutに複数のパーツを配置した場合、パーツが重なって表示されます。 FrameLayoutを配置する FrameLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のFrameLayoutを、プレビュー画面までドラッグしましょう。 [PR] iPhoneアプリ開発コースFrameLayoutにパーツを配置する FrameLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。配置したパーツの位置を指定することはできず、画面の左上に表示されます。さらにもうひとつパーツを配置してみましょう。すると先ほど配置したパーツの上に重なって表示されます。 FrameLayoutの応用最後に応用として、FrameLayoutを利用して次のような画面のレイアウトを作る例を紹介します。ボタンを押すことで表示される内容が変わる画面です。レイアウトは、次のようになっています。最初にLinearLayout（Vertical）（黄色枠）を配置します。次に、LinearLayout（Hrizontal）（青枠）を配置し、画面を切り替えるためのボタンを配置します。さらに、FrameLayout（赤枠）を配置し、その中に表示する画面を作成するために、レイアウトを3つ重ねた状態で配置しています。なお、表示する画面の切り替えは、FrameLayoutの中に作成したレイアウトを、javaで制御しています。レイアウトのソースは以下のようになります。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面3" /> </LinearLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/layout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面１" android:textSize="40dp" /> </LinearLayout> <LinearLayout android:id="@+id/layout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面２" /> </LinearLayout> <LinearLayout android:id="@+id/layout3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面３" /> </LinearLayout> </FrameLayout> </LinearLayout> MainActivityには以下のように記述しました。 public class MainActivity extends AppCompatActivity { private LinearLayout mLayout1; private LinearLayout mLayout2; private LinearLayout mLayout3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mLayout1 = (LinearLayout)findViewById(R.id.layout1); mLayout2 = (LinearLayout)findViewById(R.id.layout2); mLayout3 = (LinearLayout)findViewById(R.id.layout3); findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout1.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout2.setVisibility(View.VISIBLE); mLayout1.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout3.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout1.setVisibility(View.INVISIBLE); } }); } } 今回の記事は以上です。さらに他のレイアウトを試したい場合はGridLayoutの使い方も合わせてご覧ください。大石ゆかりなるほど、こうやって使うんですね！田島悠介使うのが少し難しいLayoutだけど、使い方によっては画面内で画面を切り替えるようなこともできるから、覚えておくと良いね。大石ゆかりはい！ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

Androidアプリ開発

XcodeでiPhoneアプリにUIパーツを追加する方法【初心者向け】

XcodeではUIKitを使って、iPhoneアプリにUIパーツを追加することができます。UIパーツを使えば、ボタンやラベルなどを表示でき、アプリのUIデザインも簡単になります。本記事では、UIパーツの一部を紹介し、Xcode上での追加方法について解説していきます。なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。目次下記のような流れで説明していきます。 UIKitとは UIパーツの一部を紹介 UIパーツの追加方法 UIKitとは UIKitとは、iOSアプリケーションの核となるフレームワークです。UIKitには画面の部品、加速度情報やフォント管理等、30を超えるクラスから構成されています。 Storyboardを選択すると画面右下のペインには、各種オブジェクトのリストが表示されます。これらはStoryboardのViewController上のViewや、Viewの上にある部品の上に載せて利用します。 UIKitのうち、この画像のように黄色い円形の背景を持つものはViewControllerですので、新しい画面をStoryboardに追加する時に使います。一方こちらはクラスオブジェクトの部品です。 [PR] iPhoneアプリ開発コースUIパーツの一部を紹介 Xcodeが提供するUIパーツは多数ありますが、よく使うものを中心にご紹介します。リンクの先には詳細の設定方法の記事もあるので、合わせて参考にしてみてください。 Button（ボタン）各種操作を指示するために使わることが多いボタンです。ボタンの文言や色も変えることができます。 XcodeでUIButtonを追加する方法 Date Picker 日付や時間を選択するためのホイールです。表示するのを日付だけや時間だけにすることもできます。乗り換え案内アプリなどで見かけることも多いのではないでしょうか。 XcodeでUIDatePickerを追加する方法 Label（ラベル）画面上に静的な文字列を表示するのに利用するラベルです。文言は簡単に変更可能です。 XcodeでUILabelを追加する方法 Slider ある一定範囲（設定可能）の数値を変化させるのに利用するUIパーツです。 XcodeでUISliderを追加する方法 Switch ONとOFFの二つの状態を持ちます。設定画面等で利用することが多いです。 XcodeでUISwitchを追加する方法 Text Field 読んで字のごとく、文字を入力するためのパーツです。 XcodeでUITextFieldを追加する方法 Image View 画像を表示するためのパーツです。このサンプルのように画像ファイルを表示させたりして使います。気を付けなくてはならないのは、これが他の部品とは違い、Viewであるということです。 XcodeでUIImageViewを追加する方法 Web View WEBページを表示するためのパーツです。標準ではURLを入力するフィールドはありませんので、別途TextFieldで作成する必要があります。 XcodeでUIWebViewを追加する方法 UIパーツの追加方法最後に、UIパーツの追加方法をご紹介します。今回はLabelを使います。画面右下にある「Label」をStoryboardのViewの上にドラッグ&ドロップするだけで配置できます。また、パーツの外観等は画面右側のペインで設定します。なお、これらのパーツをプログラムから扱うためにはIBOutletを作らなくてはなりません。具体的には部品からヘッダーファイルに右クリックでドラッグして名前を付けることになります。ボタンのようにタップされたことを検知するにはIBActionを作成しますが、操作方法はIBOutletの作り方と同じで、表示されるポップアップで種類をActionに変更するだけです。いかがでしたか？ Xcodeの使い方の基礎がまだわからないという方は、ストーリーボードの使い方もご覧ください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

iPhoneアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。大石ゆかりあ、そうなんですか〜！？ TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。ただし、行をまたいでパーツを配置することはできませんのでご注意ください。 TableLayoutを配置する今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください）配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。 [PR] iPhoneアプリ開発コースTableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。 TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout> TableLayout上のパーツの配置を調整する「0」ボタンは2つのセルをまたいで配置されています。複数のセルをまたぎたい場合は、「android:layout_span」を追加してください。 <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ /> 実行すると、この画像のようにボタンが表示されます。また、途中のセルを空白にしたい場合は、「android:layout_column」を追加し、列番号を指定します。列番号は、一番左から「0,1,2,3…」となっています。 <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_column=”3″ android:text=”+” /> </TableRow> さらに実行すると、この画像のようにボタンが表示されます。これで完成です。さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。大石ゆかり tableタグを同じように設置できますね！田島悠介そうだね。GridLayoutもそうだけど一定の間隔でパーツを並べる場面って結構あるから、そういう時に使うと良いね。大石ゆかりそうですね〜♪ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

Androidアプリ開発

HTMLでテキストを下寄せに配置する方法を現役エンジニアが解説【初心者向け】

HTMLでテキストを下寄せ（親要素の下部）に配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次UIStepperについてUIStepperを配置するUIStepperの使い方そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介テキストなどを親要素の下部に配置する方法について詳しく説明していくね！大石ゆかりお願いします！テキストの基本位置まずは、テキストの基本位置についておさらいです。文章などのテキストを表すpタグは、ブロックレベル要素のため、記述順に上から下方向に配置されます。 divタグなどで囲まれた中では、divタグ（親要素）の左上を起点としてpタグ（テキスト）が配置されます。そのため、親要素の下部にテキストを配置したいときには、CSSによる指定が必要になります。テキストを下寄せ（親要素の下部）に配置する方法何も指定しなければ、pタグなどのテキストは左上に配置されますが、CSSのpositionプロパティで配置指定をすることで、自由に配置することが可能になります。以下は、親要素divタグで囲まれた中でpタグを下寄せ（親要素の下部）に配置している例です。 HTML <div class="parent"> <p class="text">テキストがはいりますテキストがはいりますテキストがはいります。</p> </div> CSS div.parent { position: relative; /*配置位置の基準となる指定*/ height: 60vh; background: #ccc; } p.text { position: absolute; /*自由に配置する指定*/ bottom: 0; /*下寄せの指定*/ margin: 0; } [PR] iPhoneアプリ開発コースコードの解説今回の例では、まず親要素のdiv.parentに対し、配置の基準となる指定position:relativeを記述しています。下寄せに配置したい子要素p.textには、自由に配置する指定position:absoluteと、下寄せの指定bottom:0を記述し、親要素の下部に配置させています。親要素div.parentに配置の基準となる指定をしていない場合、p.textはbody（画面全体）に対して下寄せとなってしまうため、注意しましょう。デモの表示で、配置の基準となるposition:relativeを削除すると結果がどう変わるか確認してみてください。デモの表示 See the Pen テキストを下寄せに配置する方法 by nomallica (@nomallica) on CodePen. まとめ今回は、テキストなどを親要素の下部に配置する方法について紹介しました。基本位置ではない場所に要素を配置したい時は、ぜひCSSのpositionプロパティを使って自由に配置してみてください。その際は、親要素にも配置の基準となる指定を忘れずに記述してあげてください。 CSSのpositionプロパティには、他にも様々な配置方法があります。こちらの記事も参考にし、さらに表現の幅を広げていきましょう。大石ゆかり HTMLでテキストを下寄せに配置する方法がよく分かったので良かったです！田島悠介ゆかりちゃん、これからも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML